I am attempting to use jqGrid with asp.net. The grid comes back greyed (disabled?) and the Loading... div is still visible. But my data is in the grid just fine. From reading other questions and forums my problem is being caused by something I have set wrong.
I'm hoping someone can look at my code and my json response and point me in the right direction. Any help on this would be appreciated as I have struggled with this for the last 6 hours.
jqGrid function
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("#btn1").click(function(e) {
$("#tblJQGrid1").jqGrid({
jsonReader: {
root: "rtsList",
page: "page",
total: "total",
records: "records",
repeatitems: false,
id: "0"
},
datatype: function() {
$.ajax(
{
url: "RTSServices.asmx/GetRTSList",
data: "{}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
complete: function(jsondata, stat) {
if (stat == "success") {
var thegrid = jQuery("#tblJQGrid1")[0];
thegrid.addJSONData(eval("(" + jsondata.responseText + ")").d);
return true;
}
}
});
},
colNames: ['field1', 'field2'],
colModel: [
{ name: 'field1', index: 'field1', width: 150 },
{ name: 'field2', index: 'field2', width: 150}],
pager: jQuery('#Pager1'),
rowNum: 10,
rowList: [10, 20, 30],
sortname: 'field1',
sortorder: 'desc',
viewrecords: true,
caption: 'My first grid'
});
});
});
</script>
The json response taken from fiddler
{"d":{"__type":"BusinessLogicLayer.ReturnToSupplierList","total":"3","page":"1","records":"3","rtsList":[{"field1":"fld11","field2":"fld12"},{"field1":"fld21","field2":"fld22"},{"field1":"fld31","field2":"fld32"}]}}
Just to demonstrate that the data is being populated in the grid. I have included the HTML (rather than a screenshot) of the grid after being populated.
<div style="width: 300px;" id="gview_tblJQGrid1" class="ui-jqgrid-view">
<div class=
"ui-jqgrid-titlebar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix">
<a class="ui-jqgrid-titlebar-close HeaderButton" role="link" href=
"javascript:void(0)"></a><span class="ui-jqgrid-title">My first
grid</span>
</div>
<div class="ui-state-default ui-jqgrid-hdiv" style="width: 300px;">
<div class="ui-jqgrid-hbox">
<table class="ui-jqgrid-htable" style="width: 272px;" role="grid"
aria-labelledby="gbox_tblJQGrid1" border="0" cellpadding="0"
cellspacing="0">
<thead>
<tr class="ui-jqgrid-labels" role="rowheader">
<th style="width: 136px;" role="columnheader" class=
"ui-state-default ui-th-column">
<span class="ui-jqgrid-resize"> </span>
<div class="ui-jqgrid-sortable" id="jqgh_field1">
field1
</div>
</th>
<th style="width: 136px;" role="columnheader" class=
"ui-state-default ui-th-column">
<span class="ui-jqgrid-resize"> </span>
<div class="ui-jqgrid-sortable" id="jqgh_field2">
field2
</div>
</th>
</tr>
</thead>
</table>
</div>
</div>
<div style="height: 150px; width: 300px;" class="ui-jqgrid-bdiv">
<table style="width: 272px;" aria-labelledby="gbox_tblJQGrid1"
aria-multiselectable="false" role="grid" class="ui-jqgrid-btable" id=
"tblJQGrid1" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr id="fld11" role="row" class="ui-widget-content jqgrow">
<td role="gridcell" style="width: 136px;" title="fld11">
fld11
</td>
<td role="gridcell" style="width: 136px;" title="fld12">
fld12
</td>
</tr>
<tr id="fld21" role="row" class="ui-widget-content jqgrow">
<td role="gridcell" style="" title="fld21">
fld21
</td>
<td role="gridcell" style="" title="fld22">
fld22
</td>
</tr>
<tr id="fld31" role="row" class="ui-widget-content jqgrow">
<td role="gridcell" style="" title="fld31">
fld31
</td>
<td role="gridcell" style="" title="fld32">
fld32
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="ui-jqgrid-resize-mark" id="rs_mtblJQGrid1">
</div>
<div class="ui-state-default ui-jqgrid-pager corner-bottom" style=
"width: 300px;" id="Pager1">
<div id="pg_Pager1" class="ui-pager-control" role="group">
<table class="ui-pg-table" style="width: 100%; table-layout: fixed;"
role="row" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td id="Pager1_left" align="left"></td>
<td id="Pager1_center" style="white-space: nowrap; width: 244px;"
align="center">
<table style="table-layout: auto;" class="ui-pg-table" border=
"0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td id="first" class=
"ui-pg-button ui-corner-all ui-state-disabled"></td>
<td id="prev" class=
"ui-pg-button ui-corner-all ui-state-disabled"></td>
<td class="ui-pg-button ui-state-disabled" style=
"width: 4px;"></td>
<td>
Page <input class="ui-pg-input" size="2" maxlength="7"
value="0" role="textbox" type="text"> of <span id=
"sp_1">3</span>
</td>
<td class="ui-pg-button ui-state-disabled" style=
"width: 4px;"></td>
<td id="next" class="ui-pg-button ui-corner-all"></td>
<td id="last" class="ui-pg-button ui-corner-all"></td>
<td>
<select class="ui-pg-selbox" role="listbox">
<option role="option" value="10" selected="selected">
10
</option>
<option role="option" value="20">
20
</option>
<option role="option" value="30">
30
</option>
</select>
</td>
</tr>
</tbody>
</table>
</td>
<td id="Pager1_right" align="right">
<div style="text-align: right;" class="ui-paging-info">
View 1 - 3 of 3
</div>
</td>
</tr>
</tbody>
</table>
</div>