3

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

leora
  • 188,729
  • 360
  • 878
  • 1,366

4 Answers4

6

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>
Justin Ethier
  • 131,333
  • 52
  • 229
  • 284
  • 5
    +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. – David V. Mar 17 '10 at 11:47
  • You can add the 's if you escape them with \ – Samuel Meacham Feb 10 '11 at 23:11
  • 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'. – Rapunzo Jul 14 '12 at 07:17
  • 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. – Justin Ethier Jul 15 '12 at 01:29
1
$("#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

sarah
  • 103
  • 2
  • 12
1

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.

David Robbins
  • 9,996
  • 7
  • 51
  • 82
  • as you say, doesn't solve for jqgrid but this is an excellent plugin and does what i need – leora Dec 13 '09 at 13:50
  • i had to move accepted to the other answer as technically this was the correct answer to the question – leora Dec 14 '09 at 01:09
0

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}}
William
  • 413
  • 9
  • 21
Deepak K
  • 329
  • 3
  • 11