paginationjqgridserver-sidemvcjqgrid

Sorting issue with jqgrid


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

Solution

  • 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 },
            {},
            {},
            {}
            );
        });