can you have images or any custom HTML displayed in jquery grid (jqgrid) cells?

Question

i dont see anything in the documentation but i am trying to convert over code that is rendered in an html table over to jquery grid but the one missing piece is that many of the columns have images in them or other specialized html that i would like to show in the grid

Avina

Answer 1

To show an image in a grid row, this post has a nice summary:

Return the HTML element as your grid column's data. Do not use ' or " for the src, it will not work properly. The field should be like this:

<img src=../images/my_image.jpg>

Framing

+1, but your link to experts-exchange is unusable for me. Hopefully I'll try a custom formatter wrapping my image name in an IMG tag, and that'll work. – Ingrown

You can add the 's if you escape them with \ – Esmeraldaesmerelda

when I try to put this in my code I am getting this error : Type 'Trirand.Web.UI.WebControls.JQGridColumn' does not have a public property named 'img'. – Lebron

My answer was specifically for the JavaScript version of jqGrid. It sounds like you are using one of the ASP or PHP versions with server-side integration. You may need to post your code to give us a better idea what is going on. I suggest you do that as a new question. – Framing

Answer 2

This may not be the answer you're after, but DataTables will construct a grid from an HTML table. It features client side paging, sorting, filtering, client side editing and Ajax callback functions that will for server side paging.

With a table as your "source" you can have what ever you want in the columns.

Pyrimidine

as you say, doesn't solve for jqgrid but this is an excellent plugin and does what i need – Avina

i had to move accepted to the other answer as technically this was the correct answer to the question – Avina

Answer 3

$("#yourTableID").jqGrid({
     url: '<%= ResolveUrl("ModelClass/ModelFunction")%>'
        , datatype: "json"
        , mtype: "POST"
        , postData: { 'idofyourcolumn': $('#idofyourcolumn').val(),
            'page': $('.pagedisplay').val(), 'rows': $('#rowCount').val()
        }
        , colNames: ['YOURHEADER', 'ACTION']
        , colModel: [{ name: 'column1', index: 'column1name' },
                     { name: 'action', index: 'action', width: 10, sortable: false, align: 'center'}]
        , autoheight: true
        , autowidth: true
        , rowNum: 15
        , rowList: [15, 20, 30, 50]
        , pager: '#pager'
        , sortname: 'column1'
        , viewrecords: true
        , sortorder: "desc"
        , caption: "Sample Code"
        , afterInsertRow: function (rowid, aData) {
            jQuery('#yourTableID').setCell(rowid, 'action', '<img src="pathofyourimage/image.jpg" />');
        }
        , loadComplete: function () {
            $('#ResultCount').text($("#yourTableID").getGridParam("records"));
        }
 })

        .navGrid('#pager1'
            , { search: true, refresh: false, view: false, del: false, add: false, edit: false }
            , {} // default settings for edit
            , {} // default settings for add
            , {} // delete
            , { closeOnEscape: true
                , multipleSearch: true
                , closeAfterSearch: true
            }  // search options
            , {}
          );

the key is in afterInsertRow: it contains your column image and data

Amphitheater

Answer 4

If you want to add an image to a cell of a jqGrid, you have to use a hack, and if your datatype is 'client' it would work well.

1. Set the image in a variable.
2. var crossImg = "set you html src of image";
3. Set the colmodel like this.
4. {name:'delImage',index:'delImage', align:'center', width:40, editable:false,formatter: 'integer',formatoptions:{defaultValue:crossImg}}

That