I have a requirement where I need to build a grid with dynamic columns. I am dealing with a large dataset so I would like to use server-side paging, sorting, filtering logic so that I render only a page-size. I think I got the basic functionality working but just wanted to get my approach reviewed.
An action route will be the JSON datasource for the jqgrid
.
My approach:
- First make an ajax call to get the dynamic col model and other grid params (
rows
,page
etc.) except data. - Update grid params (
url
,datatype
andmtype
) to enable server-side paging, sorting etc.
I am using a flag in the query string to determine if I need the col model (or) the data.
Note: I set the async flag to false for the AJAX requests to make sure I do not run into timing issues.
As you can see, I need to make two requests to set up the grid. One to get the col model and another one to get data and to update it to enable server-side interaction for subsequent requests. Is this ok?
$.ajax({
url: firstFetchURL, //will hit an asp.net mvc action on a controller that returns json
dataType: "json",
type: 'POST',
async: false,
success: function (result) {
if (result) {
if (!result.Error) {
var colD = result.data;
var colM = result.colModelList;
var colN = result.columnNames;
$("#myGrid").jqGrid('GridUnload');
$("#myGrid").jqGrid({ datatype: 'local',
colModel: colM,
colNames: colN,
data: colD,
height: "auto",
rowNum: 10,
sortname: viewOptionText,
sortorder: "desc",
pager: '#myGridPager',
caption: "Side-by-Side View",
viewrecords: true,
gridview: true
});
//Update grid params so that subsequent interactions with the grid for sorting,paging etc. will be server-side
$("#myGrid").jqGrid('setGridParam', { url: secondFetchURL, datatype: 'json', mtype: 'POST' }).trigger('reloadGrid');
}
}
},
error: function (xhr, ajaxOptions, thrownError) {
if (xhr && thrownError) {
alert('Status: ' + xhr.status + ' Error: ' + thrownError);
}
},
complete: function () {
$("#loadingDiv").hide();
}
});
I saw a related post here, but I am looking for some direction from experienced JQGrid users.