JQGrid with dynamic columns and server-side functionality

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.

Reference

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 and mtype) 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

Small recommendations:

• It seems to me that you can remove async: false parameter for the $.ajax call.

• You can remove result.data from the data returned by the ajax call. (After that you should and the line with var colD = result.data). The data will be not really used because you call trigger('reloadGrid'); immediately.

• On the other side the values for sortname and sortorder parameters should be included in the data model (as the properties of result).

• You can use url: secondFetchURL, datatype: 'json', mtype: 'POST' parameters directly in the jqGrid definition ( in $("#myGrid").jqGrid({/here/});. No trigger('reloadGrid') will be needed.

UPDATED: Look at this and this answers. Probably the approach is what you need from the dynamic columns.

You can take a look in the answer in case if you will need to use custom formatters.

StackExchange Code Review Q#3668, answer score: 5