implement jqgrid with asp.net webpage using database

Question

I would like to integrate jqGrid in asp.net web page. I got data in JSON format. But when rending the page grid made without data.

My written code given below.

JqGridExample.aspx

    jQuery("#jsonmap").jqGrid({

     url: 'GetData.aspx',
     datatype: 'json',
     colNames: ['ID', 'Name', 'Active', 'Gender'],
     colModel: [
       { name: 'id', index: 'id', width: 35, editable: false, editoptions: { readonly: true, size: 10} },
       { name: 'name', index: 'name', width: 150, align: "left", editable: true, size: 100 },
       { name: 'isClosed', index: 'isClosed', width: 100, align: 'left', editable: true, edittype: "checkbox", editoptions: { value: "true:false", formatter: "checkbox"} },
       { name: 'gender', index: 'gender', width: 100, formatter: 'select', editable: true, edittype: "select", editoptions: { value: "0:select;1:male;2:female"} }
     ],
     rowNum: 10,
     rowList: [2, 5, 10, 15],
     pager: '#pjmap',
     sortname: 'id',
     sortorder: "desc",
     viewrecords: true,
     jsonReader: { repeatitems: false, cell: "", id: "0" },
     width: 600,
     caption: 'First jqGrid',
     height: '100%', viewrecords: true, fixed: true, gridview: true, loadonce: true
   });

<table id="jsonmap">
</table>
<div id="pjmap">
</div>

data Which i got from getdata.aspx is

{"total":1,"page":1,"records":5,"rows":[{"Name":"John","Id":1,"Gender":1,"IsClosed":false},{"Name":"Abel","Id":2,"Gender":1,"IsClosed":false},{"Name":"Aaron","Id":3,"Gender":1,"IsClosed":true},{"Name":"Tsion","Id":4,"Gender":2,"IsClosed":true},{"Name":"Mussie","Id":5,"Gender":2,"IsClosed":true}]}

On Rendering grid on jqGridExample.aspx data is not displaying.

thanks in advance..

Oleg · Accepted Answer · 2013-03-16 09:31:18Z

1

You should use name property in colModel which exact corresponds to names in JSON data. So you should change name: 'id' to name: 'Id', name: 'name' to name: 'Name', name: 'isClosed' to name: 'IsClosed' and name: 'gender' to name: 'Gender'. You can remove all index properties from colModel or make the same changes in all index properties.

Additionally you should include key: true property in the definition of column Id in colModel.

answered Mar 16, 2013 at 9:31

Oleg

222k36 gold badges414 silver badges826 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

implement jqgrid with asp.net webpage using database

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related