jQuery Grid Plugin - jqGrid - Topic: Grid not displaying JSON data

Seawinnie on Grid not displaying JSON data

Mon, 25 Mar 2013 01:15:20 +0200

Thanks very much Oleg,

All working now.

I was missing the json reader definition:

jsonReader: {
    repeatitems: false,
    id: "Id",
    root: function (obj) { return obj; },
    page: function (obj) { return 1; },
    total: function (obj) { return 1; },
    records: function (obj) { return obj.length; }
}

OlegK on Grid not displaying JSON data

Fri, 22 Mar 2013 08:55:35 +0200

I am not sure which JSON data produce your code. I recommend you to read documantation about jsonReader especially about root and repeatitems properties of jsonReader. Thy to add jsonReader option in the following form:

jsonReader: {root: function (obj) {return obj;}}

If you will have no success you should include the exact response of server (the JSON data).

Best regards
Oleg

Seawinnie on Grid not displaying JSON data

Fri, 22 Mar 2013 08:42:55 +0200

Hi,

I am trying to load json data in jqgrid but no data is being displayed. I have confirmed that the HRDatahandler.asp page returns json data. I am a jqgrid newbie and any help is appreciated.

Server side:

HRDataHandler code:

<%@ Language=VBScript %>

<% Response.AddHeader "Content-Type", "application/json"

QueryToJSON(dbconn,"SELECT TOP 500 Id,SkillName,SkillDescription,active,ISNULL(CompletionPlusYears,0) AS CompletionPlusYears,ISNULL(Reminder,'No') AS Reminder,ISNULL(ProjectID,0) AS ProjectID FROM dbo.HR_Skills").Flush Response.End

Client side code:

$(function(){

$("#list").jqGrid({

url:'HR_Datahandler.asp',

datatype: "json",

colNames:['Id','SkillName', 'SkillDescription','active','CompletionPlusYears','Reminder','ProjectID'],

colModel:[

{name:'Id', index:'Id', width:55, key:true},

{name:'SkillName', index:'SkillName', width:150},

{name:'SkillDescription', index:'SkillDescription', width:200, align:'right'},

{name:'active', index:'active', width:80, align:'right'},

{name:'CompletionPlusYears', index:'CompletionPlusYears', width:150, sortable:false},

{name:'Reminder', index:'Reminder', width:80, align:'right'},

{name:'ProjectID', index:'ProjectID', width:80, align:'right'} ],

height:'auto',

pager: '#pager',

rowNum:10,

rowList:[25,50,100],

sortname: 'SkillName',

sortorder: "desc",

viewrecords: true,

gridview: true,

caption: "Skills Grid"

});

$("#list").jqGrid('navGrid','#pager',{edit:false,add:false,del:false});

Thanks