Skip to main content

Json for jqGrid from ASP.Net MVC

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

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

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:

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)};

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

public JsonResult GetABunchOfPeopleAsJson()
var rows = (GetABunchOfPeople()
.Select(c => new
id = c.ID,
cell = new[]
return new JsonResult
Data = new
page = 1,
records = rows.Length,
total = 1

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

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() {

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") >'
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.


Vinoth said…
Check out this, might be helpful
Rahuman said…
Similar article with fully functional example at
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

FileSystemWatcher With the BlockingCollection

While working with the FileSystemWatcher I found that if too many files were created the built in buffer will overflowed and files will be skipped.  After much research I found out about the Producer-Consumer Problem .  Then I found that .Net 4 has the BlockingCollection which helps solve the issue.  But how to use it with the FileSystemWatcher? On StackOverflow I found  Making PLINQ and BlockingCollection work together .  I'm not so interested in the PLINQ issue but this is a great example of using The BlockingCollection with FileSystemWatcher. [csharp] using System; using System.Collections.Concurrent; using System.Collections.Generic; using System.IO; using System.Linq; using System.Threading; namespace ConsoleApplication4 {     public class Program     {         private const string Folder = "C:\\Temp\\InputData";         static void Main(string[] args) {             var cts = new CancellationTokenSource();             foreach (var obj in Input(cts.Token))            

C# Spirograph Point Generators

Spirograph's  are cool.  See here and here . I put together three ways to generate points for a Spirograph, first using a Brute Force straight generate the points, second using a Parallel.For and third using LINQ.

Excel User Defined Functions with C# and ExcelDna

Adding user defined functions to Excel can be laborious, either you use VBA or COM. Why can't Microsoft make it easier to use Visual Studio and .NET within Excel? Enter ExcelDna . This example creates a static function in C# using Visual Studio. There is documentation that already describes this, what I am adding is: Use Visual Studio to create project Post Build Events to help create the final XLL file. NOTE: I hate Post Build Events. The ONLY exception is in this case where I am modifying the output of the final build. Post Build Events are Evil especially when used in a large development team. A better solutions is to create actual Build Scripts that do what I am about to do. You have been warned. First, create a new Class Library project. Use NuGet to add a reference to the Excel-DNA package. NuGet will also add ExcelDna.dna and ExcelDna.xll to your project. Rename them both to the name that you want your final output xll to be. In my case I renamed them to Scratch-ExcelDn