When I use remote sorting, but it cannot work well.

I developed a query page. First I left the igGird's dataSource property to null, so I can get an empty table to display.

After user click query button,  I'll get data from controller to populate the grid.

User can sort data by any column,  I used columnSorted event to achieve it.  But after I populated the gird using the returned data, the sort direction missed.

My main code as bellow:

-----------cshtm----------------

<script type="text/javascript">

var queryObject = { pageIndex: 0, pageSize: 5, columnKey: "", direction: "" };

$.ig.loader({
scriptPath: '@Url.Content("~/Scripts/")',
cssPath: '@Url.Content("~/Content/")',
resources: "igGrid.Sorting,igGrid.Paging"
});

$.ig.loader(function () {
$("#grid1").igGrid({
dataSource: null,
autoGenerateColumns: false,
responseDataKey: "Records",
responseTotalRecCountKey: "TotalRecordsCount",
columns: [
{ headerText: "Serial No", key: "SerialNo" },
{ headerText: "User Name", key: "UserName" },
{ headerText: "Nick Name", key: "NickName" }
],
features: [
{
name: "Paging",
pageSizeList: [5, 10, 15],
pageSize: 5,
type: "remote",
recordCountKey: 'TotalRecordsCount',
pageIndexChanged: function (ui, args) {
queryObject.pageIndex = args.pageIndex;
getData(queryObject)
},
pageSizeChanged: function (ui, args) {
queryObject.pageSize = args.pageSize;
queryObject.pageIndex = 0;
getData(queryObject)
}
},
{
name: "Sorting",
type: "remote",
mode: "single",
columnSorted: sortData,
columnSettings: [
{ columnKey: "SerialNo", allowSorting: true },
{ columnKey: "UserName", allowSorting: true },
{ columnKey: "NickName", allowSorting: true }
]
}
]
});
});
</script>
<table id="grid1">
</table>
<input type="button" name="btnquery" value="Query" onclick="BLOCKED SCRIPTgetData(queryObject);" />
<script type="text/javascript">
//Handler code
function sortData(event, args) {

if (!args.columnKey || !args.direction) {
return false;
}

queryObject.columnKey = args.columnKey;
queryObject.direction = args.direction;

getData(queryObject);
}

function getData(queryObject) {
var url = '@Url.Action("igGridLoaderData")';
// $("#grid1").igGrid("option", "dataSourceType", "json");
// $("#grid1").igGrid("option", "dataSource", url);

$.ajax({
type: "POST",
url: url,
data: queryObject,
success: function (data) {
$("#grid1").igGrid("option", "dataSourceType", "json");
$("#grid1").igGrid("option", "dataSource", data);
$("#grid1").igGridPaging("pageSize", queryObject.pageSize);
$("#grid1").igGridPaging("pageIndex", queryObject.pageIndex);
}
});
}
</script>

------------Controller---------------------

private IList<TestModel> _testData = new List<TestModel>()
{
new TestModel(){SerialNo=1, UserName="UserName1", NickName="NickName1"},
new TestModel(){SerialNo=2, UserName="UserName2", NickName="NickName2"},
new TestModel(){SerialNo=3, UserName="UserName3", NickName="NickName3"},
new TestModel(){SerialNo=4, UserName="UserName4", NickName="NickName4"},
new TestModel(){SerialNo=5, UserName="UserName5", NickName="NickName5"},
new TestModel(){SerialNo=6, UserName="UserName6", NickName="NickName6"},
new TestModel(){SerialNo=7, UserName="UserName7", NickName="NickName7"},
new TestModel(){SerialNo=8, UserName="UserName8", NickName="NickName8"},
new TestModel(){SerialNo=9, UserName="UserName9", NickName="NickName9"},
new TestModel(){SerialNo=10, UserName="UserName10", NickName="NickName10"},
new TestModel(){SerialNo=11, UserName="UserName11", NickName="NickName11"},
new TestModel(){SerialNo=12, UserName="UserName12", NickName="NickName12"},
new TestModel(){SerialNo=13, UserName="UserName13", NickName="NickName13"},
new TestModel(){SerialNo=14, UserName="UserName14", NickName="NickName14"},
new TestModel(){SerialNo=15, UserName="UserName15", NickName="NickName15"},
new TestModel(){SerialNo=16, UserName="UserName16", NickName="NickName16"}
};

public JsonResult igGridLoaderData(int pageIndex, int pageSize, string columnKey, string direction)
{
PagedList<TestModel> pagedList = new PagedList<TestModel>(_testData, pageIndex, pageSize);

var q = from v in pagedList
orderby v.SerialNo descending
select new
{
v.SerialNo,
v.UserName,
v.NickName
};

var o = new
{
TotalRecordsCount = pagedList.TotalRecordsCount,
Records = q,
timezoneOffset = 0
};

return Json(o, JsonRequestBehavior.AllowGet);

}