Display Icons in JQGrid

JQGrid is one of the best plug-in to display data as grid. Using JQGrid is very simple and easy to use. In this article we will look into displaying icons in JQGrid.

Consider the following code that makes an ajax call:

jQuery("#grid").jqGrid({
  url:'GetDetails.asmx?team=All',
 datatype: "json",
    colNames:['ID','Team', 'Name', 'Designation'],
    colModel:[
     {name:'id',index:'id', width:55},
     {name:'Icon',index:'Icon', width:90},
     {name:'name',index:'name asc, invdate', width:100},
     {name:'designation',index:'designation', width:80}],
    rowNum:10,
    rowList:[10,20,30],
    pager: '#pager',
    sortname: 'id',
    viewrecords: true,
    sortorder: "desc",
    caption:"JSON Data"
});

The return data from the GetDetails.asmx should be in json format and the data should look like :-

{
"page":"1",
"total":1,
"records":"5",
"rows":[
{"id":"1","cell":["1","","Scott","Manager"]},
{"id":"2","cell":["2","","Charles","Accountant"]},
{"id":"3","cell":["3","","Dan","Sales"]},
{"id":"4","cell":["4","","Chris","Administrator"]},
{"id":"5","cell":["5","","Paul","Developer"]}
]}

The data cell value should contain an image location so that JQGrid will render and display an image in the grid.

“Tell me and I forget. Teach me and I remember. Involve me and I learn.”
– Benjamin Franklin