Sorting issue with jqgrid - 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);
}

Answer 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();

Answer 2

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