Skip to main content

Json for jqGrid from ASP.Net MVC

jqGrid takes a specific format for its json (taken from jqGrid documentation):

[js]{
total: "xxx",page: "yyy", records: "zzz",
rows : [
{id:"1", cell:["cell11", "cell12", "cell13"]},
{id:"2", cell:["cell21", "cell22", "cell23"]},
...
]}[/js]

The tags mean the following:

total - Total number of Pages.
page - Current page Index.
records - Total number of records in the rows group.
rows - An array with the data plus an identifier.
id - The unique row identifier, needs to be an int from what I have found.
cell - An array of the data for the grid.

The ASP.Net MVC framework has the JsonResult response type which we can use to populate the jqGrid. As an example I created a Person model and a method to return some data:

[csharp]
public class Person
{
public int ID { get; set; }
public string Name { get; set; }
public DateTime Birthday { get; set; }
}

public IEnumerable<Person> GetABunchOfPeople()
{
yield return new Person {ID = 1, Name = "Darren", Birthday = new DateTime(1970, 9, 13)};
yield return new Person {ID = 2, Name = "Dawn", Birthday = new DateTime(1971, 6, 1)};
yield return new Person {ID = 3, Name = "Thomas", Birthday = new DateTime(1995, 10, 3)};
yield return new Person {ID = 4, Name = "Zoey", Birthday = new DateTime(1997, 8, 15)};
}
[/csharp]

Generating the JSON is as follows, this going into a PersonModel class:

[csharp]
public JsonResult GetABunchOfPeopleAsJson()
{
var rows = (GetABunchOfPeople()
.Select(c => new
{
id = c.ID,
cell = new[]
{
c.ID.ToString(),
c.Name,
c.Birthday.ToShortDateString()
}
})).ToArray();
return new JsonResult
{
Data = new
{
page = 1,
records = rows.Length,
rows,
total = 1
}
};
}[/csharp]


The controller then would look like:
[csharp]
public class PersonController : Controller
{
public ActionResult Index()
{
return View();
}
public JsonResult GetAllPeople()
{
var model = new Models.PersonModel();
return model.GetABunchOfPeopleAsJson();
}
}

[/csharp]
The view doesn't need to inherit any model other than View page if all you want is for the jqGrid to show the data. In the view, Index.aspx in this case, you add table and div for the jqGrid:

<table id="dictionary" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align: center;"></div>

Configuring jqGrid is:
[js highlight="6,8"]
$(document).ready(function() {

$("#dictionary").jqGrid({
caption: "Tank Dictionary",
pager: $("#pager"),
url: '<%= ResolveUrl("~/Person/GetAllPeople") %>',
editurl: '&lt;%= ResolveUrl("~/Person/Edit") %&gt;',
datatype: 'json',
myType: 'GET',
colNames: ['ID', 'Name', 'Birthday'],
colModel: [
{ name: 'ID', index: 'ID', width: 150, resizable: true, editable: false },
{ name: 'Name', index: 'Name', width: 200, resizable: true, editable: true },
{ name: 'Birthday', index: 'Birthday', width: 300, resizable: true, editable: true }
],
sortname: 'ID',
sortorder: 'desc',
viewrecords: true,
height: '100%',
imgpath: '<%= ResolveUrl("~/Scripts/jquery/jqGrid/themes/basic/images") >'
});
[/js]
The url tag is set to call the Person controller to get the JSON results. Note the datatype is json.

The editurl tag will be talked about later.

Comments

Vinoth said…
Check out this, might be helpful http://www.vinothvasanth.com/post/2009/05/16/jQGrid-with-JSON-in-ASPNet-application.aspx
Rahuman said…
Similar article with fully functional example at http://arahuman.blogspot.com/2009/06/jqgrid-using-mvc-json-and-datatable.html
raghava said…
Its Great working with jqgid,but i need manipulations with data and with all features in jqgrid such as edit,subgrid,delete,select,update and ssupported js files for above features

Popular posts from this blog

Changing Typed DataSet Connection String

I was working on a WinForm app that connected to a MS Access database. Yeah, Access sucks but I didn't have a choice in the matter. The app itself is used to import a bunch of CSV files into the Access database. It is more of a utility program and it has going through several variations, from being a simple hand driven command line tool to being GUI driven. The command line version was all hand controlled. I had to go in and update configuration files to point to the CSV files and the MDB database. That got old fast so I decided to make a GUI version that would allow me to pick the MDB file and each of the CSV files to import. Picking and using the CSV files was easy, it was changing the connection string for the MDB that proved to be the hardest. I am using strongly typed datasets in VS2005. If you have ever worked with them you find out soon that the connection string gets saved with the project in the app.config file, even if it is a seperate DAL dll project. My guess is

Remote Controlled RoboTank

This is my version of the ever popular to build RoboTank. It uses an Arduino Mega 2560 with the AdaFruit motor shield and an XBee S1 to communicate to the DFRobot Gamepad. The sketch for the RoboTank makes use of the AFMotor.h to drive the motors and includes a serial parser to read and process the commands coming from the Gamepad. Robotank-Sketch.zip DFRobot Wireless Joystick