Sorting issue with jqgrid

Question

I want to implement sorting of visible rows in jqgrid the default behavior of jqgrid is sorting all records. i have handled it on server side but the problem is when i do sort i always get page as 1 even when i am on page2 or other.below is my code i also tried loadComplete, & onPaging method.

 $(document).ready(function () {
        $("#grid").jqGrid({
            emptyrecords: "No records to view",
            ignoreCase: true,
            datatype: "json",
            url: '@Url.Action("LoadData", "Home")',
            mtype: "GET",
            height: 'auto',
            rowNum: 5,
            rowList: [5, 10, 15, 20],
            colNames: ['EmployeeId', 'EmployeeCity', 'EmployeeName'],
            colModel: [
            { name: 'EmployeeId', index: 'EmployeeId', key: true, width: 200, sorttype: 'int' },
            { name: 'EmployeeName', index: 'EmployeeName', width: 200, sorttype: 'text' },
            { name: 'EmployeeCity', index: 'EmployeeCity', width: 200, sorttype: 'text' }
            ],
            pager: '#pager',
            sortname: 'EmployeeId',
            viewrecords: true,
            sortorder: "asc",
            caption: "jqGrid Example"
        }).navGrid("#pager",
        { search: false, refresh: false, add: false, edit: false, del: false },
        {},
        {},
        {}
        );
    });

And , My server side code is ,

public ActionResult LoadData(int page, int rows, string sidx, string sord)
    {
        List<Employee> employeeList = new List<Employee>();
        for (int i = 1; i < 18; i++)
        {
            employeeList.Add(
        new Employee() { EmployeeId = i, EmployeeCity = "Mumbai_" + i, EmployeeName = "Jason_" + i }
        );
        }
        var totalRecords = 0;
        var totalPages = 0;
        var griddata = new List<Employee>();
        if (employeeList != null)
        {
            griddata = employeeList.Skip((page - 1) * rows).Take(rows).ToList();
            switch (sidx.ToLower())
            {
                case "employeeid":
                    if (sord.ToLower() == "asc")
                        griddata.OrderBy(x => x.EmployeeId).ToList();
                    else
                        griddata.OrderByDescending(x => x.EmployeeId).ToList();
                    break;
                default:
                    griddata.OrderByDescending(x => x.EmployeeName).ToList();
                    break;
            }
            totalRecords = employeeList.Count;
            totalPages = (int)Math.Ceiling((double)totalRecords / (double)rows);
        }
        var employeeListData = new
        {
            total = totalPages,
            page = page,
            records = totalRecords,
            rows = griddata,
        };
        return Json(employeeListData, JsonRequestBehavior.AllowGet);
    }

teo van kot · Answer 1 · 2015-01-21T20:39:22.683

1

You are ordering your data on server side after you get paging. I mean this section:

griddata = employeeList.Skip((page - 1) * rows).Take(rows).ToList();
switch (sidx.ToLower())
{
    case "employeeid":
        if (sord.ToLower() == "asc")
            griddata.OrderBy(x => x.EmployeeId).ToList();
        else
            griddata.OrderByDescending(x => x.EmployeeId).ToList();
        break;
    default:
        griddata.OrderByDescending(x => x.EmployeeName).ToList();
        break;
}

Just change the order like this:

switch (sidx.ToLower())
{
    case "employeeid":
        if (sord.ToLower() == "asc")
           employeeList = employeeList.OrderBy(x => x.EmployeeId).ToList();
        else
           employeeList = employeeList.OrderByDescending(x => x.EmployeeId).ToList();
        break;
    default:
           employeeList = employeeList.OrderByDescending(x => x.EmployeeName).ToList();
        break;
}
griddata = employeeList.Skip((page - 1) * rows).Take(rows).ToList();

edited Jan 21 '15 at 20:39

answered Jan 21 '15 at 19:55

teo van kot

12,350
10
38
70

It doesnot work.My main problem is when i am on 2nd page and sort grid on controller i recieve page1.I think this is issue with jqgrid itself. – SidD Jan 22 '15 at 14:04
your grid definition looks fine. Did you check in debug what is in `griddata` at the end of the controller method? – teo van kot Jan 22 '15 at 14:13
yes, the main thing is it always shows page1 even when i am on page 2.you can try above code, you will see that it wont send page2.I have also checked HTTP headers and found that it is also showing page1 when i am on page2. – SidD Jan 22 '15 at 16:50
I implement your code. Grid works as expected fine after my changes. But i can get you question wrong. If you need to presist `page` value on sorting event you can see this [answer](http://stackoverflow.com/a/7710346/1849444) by @Oleg – teo van kot Jan 23 '15 at 07:25
I think i can't understand the answers on your link.as per above code on 1st page grid shows record 1 to 5 when i sort grid it should sort only the visible records keeping me on the same page.But on sort jqgrid sends page1 and rows5 even when i am sorting from other page. – SidD Jan 23 '15 at 08:16
that's exatcly what refferens answer about! You just should get, that's by `jqgrid` design. When you sort column it send `page: 1` to server. In that answer the is some approaches how to avoid this behavier of `jqgrid`. – teo van kot Jan 23 '15 at 08:19

score 0 · Accepted Answer · answered Jan 23 '15 at 12:44

Yes finally done in a simple way. Added one hidden field.

<input type="hidden" id="exampleGrid" value="" />

Modified jqgrid as

$(document).ready(function () {
        $("#grid").jqGrid({
            emptyrecords: "No records to view",
            ignoreCase: true,
            datatype: "json",
            url: '@Url.Action("LoadData", "Home")',
            mtype: "GET",
            height: 'auto',
            rowNum: 5,
            rowList: [5, 10, 15, 20],
            colNames: ['EmployeeId', 'EmployeeName', 'EmployeeCity'],
            colModel: [
            { name: 'EmployeeId', index: 'EmployeeId', key: true, width: 200, sorttype: 'int' },
            { name: 'EmployeeName', index: 'EmployeeName', width: 200, sorttype: 'text' },
            { name: 'EmployeeCity', index: 'EmployeeCity', width: 200, sorttype: 'text' }
            ],
            pager: '#pager',
            sortname: 'EmployeeId',
            viewrecords: true,
            loadComplete: function () {
                var page = $('#grid').jqGrid('getGridParam', 'page');
                $("#exampleGrid").val(page);
            },
            onSortCol: function (index, iCol, sortOrder) {
                $('#grid').jqGrid('setGridParam', {
                    page: $("#exampleGrid").val()
                });
            },
            sortorder: "asc",
            caption: "jqGrid Example"
        }).navGrid("#pager",
        { search: false, refresh: false, add: false, edit: false, del: false },
        {},
        {},
        {}
        );
    });

Sorting issue with jqgrid

2 Answers2