Jquery – Sorting jqGrid in ASP.NET MVC client view with jQuery and LINQ-to-Entities

asp.net-mvcjqgridjquerylinq

I'm a jQuery noob, so I'm sure I'm missing something simple here.

I've got the jqGrid working with an action that creates JSON data from a LINQ-to-Entities operation. But when I click on the column headers in the browser, the rows don't sort. The ascending/descending indicator shows up, but nothing else happens.

The necessary JavaScript and CSS links are in the master page header:

<script src="/Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<!-- CSS and JavaScript files for jqGrid to display on Details pages -->
<link rel="stylesheet" type="text/css" href="/scripts/jQuery/jqGrid-3.4.4/themes/green/grid.css" title="green" media="screen" />
<script src="/Scripts/jQuery/jqGrid-3.4.4/jquery.jqGrid.js" type="text/javascript"></script>
<script src="/Scripts/jQuery/jqGrid-3.4.4/js/jqModal.js" type="text/javascript"></script>
<script src="/Scripts/jQuery/jqGrid-3.4.4/js/jqDnR.js" type="text/javascript"></script>

Here's my initialization code:

// jqGrid setup.
$("#gridlist").jqGrid({
    url: '/Contact/GridData',
    datatype: 'json',
    mtype: 'GET',
    colNames: ['ID', 'First Name', 'Last Name', 'Organization'],
    colModel: [
        { name: 'id', index: 'id', width: 40, align: 'left', resizable: true },
        { name: 'first_name', index: 'first_name', width: 200, align: 'left', resizable: true, sortable: true, sorttype: "text" },
        { name: 'last_name', index: 'last_name', width: 200, align: 'left', resizable: true, sortable: true, sorttype: "text" },
        { name: 'organization', index: 'organization', width: 300, align: 'left', resizable: true, sortable: true, sorttype: "text"}],
    pager: jQuery('#pager'),
    rowNum: 5,
    rowList: [5, 10, 20, 50],
    repeatitems: false,
    viewrecords: true,
    imgpath: '/scripts/jQuery/jqGrid-3.4.4/themes/green/images',
    caption: 'Contacts'
});

And here's the HTML:

    <h3>My Grid Data</h3>
    <table id="gridlist" class="scroll" cellpadding="0" cellspacing="0">
    </table>
    <div id="pager" class="scroll" style="text-align:center;">
    </div>

And, just for completeness, the action method:

public ActionResult GridData()
{
    var page = new { page = 1 };

    IEnumerable contacts = _db.ContactSet;
    int i = 0;
    var rows = new object[contacts.Count()];

    foreach (Contact contact in contacts)
    {
        rows[i] = new { id = contact.ID, cell = new[] { contact.ID.ToString(), contact.First_Name, contact.Last_Name, contact.Organization } };
        i++;
    }

    var result = new JsonResult();
    result.Data = new { page = 1, records = 2, rows, total = 1 };

    return result;
}

Any ideas what obvious setting I'm missing here?

Best Answer

There are two basic ways to handle this. The grid can sort the data itself. I can't remember how to turn this on, because I never use this option. Generally, I work with datasets which are too large to return to the page, so I use the grid's paging features. This requires doing this sort on the server, since the grid will not see the entire dataset.

To do the paging on the server, add a sidx and a sord (both strings) argument to your action. sidx will be the name of the column to sort on. sord will be the direction, asc or desc.

I have a demo project which shows how to do this (using LINQ to Objects). But using LINQ to Entities is almost identical; I use LINQ to Entities in my production/non-demo code. Download the demo solution and look for yourself.

Related Topic