I'm using .Net MVC 3 and loading a datagrid via JSON.
The HTML:
....
<script src="../../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.easyui.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.22.custom.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.blockUI.js" type="text/javascript"></script>
<link href="../../Content/jquery-ui-1.8.22.custom.css" rel="stylesheet" type="text/css" />
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<link href="../../Content/themes/icon.css" rel="stylesheet" type="text/css" />
<link href="../../Content/themes/default/tree.css" rel="stylesheet" type="text/css" />
<link href="../../Content/themes/default/datagrid.css" rel="stylesheet" type="text/css" />
...
<table id="ListItemsGrid"></table>
...
The Javascript to instantiate the Datagrid:
jQuery("#ListItemsGrid").datagrid({
title: "Inventory List",
url: "/Categories/GetJSONItemsList",
queryParams: { ID: '1' }, // This is hard-coded
pagination: true,
width: 600,
height: 300,
columns:
[[
{ field: 'ID',
title: 'ID',
sortable: true,
width: 65
},
{ field: 'Name',
title: 'Name',
sortable: true,
width: 400
},
{ field: 'Location',
title: 'Location',
sortable: true,
width: 100
}
]]
});
The output of /Categories/GetJSONItemsList:
[
{"ID":1,"Name":"Canon Sureshot V098","Location":"Vernon"},
{"ID":2,"Name":"Canon Rebel X2i","Location":"Calgary"},
{"ID":3,"Name":"Canon Rebel X2i","Location":"Calgary"},
{"ID":4,"Name":"Canon Rebel X2i","Location":"Calgary"},
{"ID":5,"Name":"Canon Rebel X2i","Location":"Calgary"},
{"ID":6,"Name":"Canon Rebel X2i","Location":"Calgary"},
{"ID":7,"Name":"Canon Rebel X2i","Location":"Calgary"},
{"ID":8,"Name":"Canon Rebel X2i","Location":"Calgary"},
{"ID":9,"Name":"Canon Rebel X2i","Location":"Calgary"},
{"ID":10,"Name":"Canon Rebel X2i","Location":"Calgary"},
{"ID":11,"Name":"Canon Rebel X2i","Location":"Calgary"},
{"ID":12,"Name":"Canon Rebel X2i","Location":"Calgary"},
{"ID":13,"Name":"Canon Rebel X2i","Location":"Calgary"},
{"ID":14,"Name":"Canon Rebel X2i","Location":"Calgary"},
{"ID":15,"Name":"Canon Rebel X2i","Location":"Calgary"},
{"ID":16,"Name":"Canon Rebel X2i","Location":"Calgary"},
{"ID":17,"Name":"Canon Rebel X2i","Location":"Calgary"}
]
I've attached a screen capture of the resulting Datagrid (capture.png). If I click on the "next page" pagination button, all of the elements appear (all 17 on one page). I've included a screen shot of that too (capture2.png).
EDIT:
When I add the following code:
jQuery("#ListItemsGrid").datagrid({
...
onLoadSuccess: function (data) {
jQuery.each(data, function (index, o) {
alert(o);
})
I first get an alert that says "17" and then i get a second alert that says "[object: Object],[object: Object],[object: Object],[object: Object]......" 17 times.
However, when I just call /Categories/GetJSONItemsList I get the JSON array shown previously.
My MVC Controller is as follows:
[HttpPost]
public JsonResult GetJSONItemsList(int ID)
{
Category aCategory = new Category(ID);
List<Item> itemsInCategory = aCategory.GetItemsInCategory();
return this.Json(itemsInCategory, JsonRequestBehavior.AllowGet);
}