Blogger Widgets
  • Sharing Photos using SignalR
  • TFS Extenstion - allows copy work items between projects
  • Displaying jquery progressbar with ajax call on a modal dialog
  • Managing windows services of a server via a website
  • Exploring technologies available to date. TechCipher is one place that any professional would like to visit, either to get an overview or to have better understanding.

Search This Blog

Thursday, 11 November 2010

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

1 comments:

Copyright © 2013 Template Doctor . Designed by Malith Madushanka - Cool Blogger Tutorials | Code by CBT | Images by by HQ Wallpapers