image column in jqGrid?

Question

I want a image column in my jQGrid,I have used a formatter,but doesnot work,please give me the solution for this.

my code is as follows:

jQuery(document).ready(function() {
        var TheGrid ;
         var resp;
        jQuery("#registerUsers").jqGrid({
                url: 'EventsList.aspx',
                datatype: "json",
                colNames: ['Name', 'Company Name', 'Responsible Name', 'Date/Time', 'Id'],
                colModel: [{ name: 'GuestName', index: 'GuestName', width: 150, editable: true, editoptions: {readonly: true, size: 10} },
                          { name: 'CompName', index: 'CompName', width: 150, editable: false, editoptions: { readonly: true, size: 10} },
                          { name: 'RespName', index: 'RespName', width: 150, editable: false, editoptions: { readonly: true, size: 10} },
                          { name: 'RegisterDate', index: 'RegisterDate', width: 150, editable: false, editoptions: { readonly: true, size: 10} },
                          { name: 'Register_Id', index: 'Register_Id', width: 100, align: 'left', formatter: checkboxFormatter },
                        ],
                rowNum: 10,
                rowList: [10, 20, 30],
                pager: jQuery('#Userpager'),
                sortname: 'Register_Id',
                viewrecords: true,
                sortorder: "desc",
                imgpath: '/scripts/themes/steel/images',
                caption: "Registered Users"
            });
        });
        jQuery("#registerUsers").jqGrid('navGrid', '#Userpager', { edit: false, add: false, del: false });

  function checkboxFormatter(el, cval, opts) {
            debugger;
            cval = cval + ""; cval = cval.toLowerCase();
            //          var bchk = cval.search(/(false|0|no|off|n)/i) < 0 ? " checked=\"checked\"" : ""; 
            var UserId = jQuery("#registerUsers").getCell(RowId, 'Register_Id');
            $(el).html("<center><img src='../images/gnome-session-logout.png' width='15px' height='15px'  onclick=javascript:LogOutUser(" + UserId + ");/></center>");
            //          <input type='checkbox' onclick=\"ajaxSave('" + opts.rowId + "', this);\" " + bchk + " value='" + cval + "' offval='no' />



        } 

Please help me

Thank You Ritz

Answer 1

you can just return the img tag as a string in the formatter eg:

function  unitsInStockFormatter(cellvalue, options, rowObject) {
    var cellValueInt = parseInt(cellvalue);
    if (cellValueInt > 10)
      return "<img src='../../Content/images/ui-flag_green.png' alt='" + cellvalue + "'title='" + cellvalue + "' />";
    else if (cellValueInt > 0)
      return "<img src='../../Content/images/ui-flag_blue.png' alt='" + cellvalue + "'title='" + cellvalue + "' />";
    else
      return "<img src='../../Content/images/ui-flag_red.png' alt='" + cellvalue + "'title='" + cellvalue + "' />";
  }; 

as described here: http://tpeczek.com/2009/11/jqgrid-and-aspnet-mvc-formatting.html

Answer 2

See can-you-have-images-or-any-custom-html-displayed-in-jquery-grid-jqgrid-cells for instructions on displaying images in cells.

Basically, it looks like you may need to remove quotes from your src element.

Answer 3

i found this solution.

If in your page you include only the table by inserting the scripts and stylesheets and after including grid.php page, you can format the cell to display image this way:

Put the code below in your grid.php:

$grid->setColProperty("COLUMN NAME", array("formatter"=>"js:formatImage"));

Then, put in a string variable, the java script for formatImage function this way:

$IMAGE_FORMAT_STRING = <<<IMAGE_FORMAT_FUNCTION
function formatImage(cellValue, options, rowObject) {
    var imageHtml = "";
    if(cellValue){
        if(cellValue.indexOf("_thumb") == -1){
            imageHtml = '<div><a href="' + cellValue + '" title="" target="_blank">' + cellValue + '</a></div>';    
        }else{
            imageHtml = '<div class="gallery"><a href="' + cellValue.replace('_thumb', '') + '" title=""><img src="' + cellValue + '" width="50" height="50" alt="" border="0"/></a></div>';
        }
    }
    return imageHtml;
}
function unformatImage(cellValue, options, cellObject) {
    return $(cellObject.html()).attr("originalValue");
}
IMAGE_FORMAT_FUNCTION;

and above the grid->renderGrid, put set the JavaScript Code this way:

$grid->setJSCode($IMAGE_FORMAT_STRING);

I hope it helps somebody!

Answer 4

A simple solution could be made directly from the query:

select idres, 'HTML-IMG-SRC=images/tick_' || reserved || '.png' as reserved, indate, outdate from table; -- querying postgres

Where reserved is 0 or 1 and reflects in the image file name "tick_1.png" or "tick_0.png" depending on the field's value of 'reserved'

Hope it helps