JQGrid with dynamic columns and server-side functionality

Question

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:

1. First make an ajax call to get the dynamic col model and other grid params (rows, page etc.) except data.
2. 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 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.

Answer 1

Small recommendations:

1. It seems to me that you can remove async: false parameter for the $.ajax call.
2. 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.
3. On the other side the values for sortname and sortorder parameters should be included in the data model (as the properties of result).
4. 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.

• StudentForever: One issue with my approach is I need to make two requests to set up the grid the first time, one to get the col model and another for the data. Is it possible to extend the Json reader so that we can the col model server-side like the other parameters. { total: xxx, page: yyy, records: zzz, rows: [ ...], colModel: {....}, // is it possible to support this in jqgrid colNames: {....} // is it possible to support this in jqgrid }
• Oleg: @StudentForever: It is not possible because many parts of grid are currently not dynamic. I have the same opinion as you in the subject. Some time before I made the feature request which was stayed unanswered.
• StudentForever: Very interesting , Thanks. Any final thoughts on my approach on making two requests to initialize the dynamic jqgrid based on my requirement. Thanks a lot for your time.
• Oleg: @StudentForever: You are welcome! If you have common (general) grid settings the usage of two asynchronous ajax calls (one inside of the success handler of another) I find the logical consequence from the possibilities which you has. It is clear enough and easy to understand and to manage. One additional tip: try to use not so much jqGrid settings in the colModel which you save in the database. Instead of that you can consider to use column templates.
• StudentForever: Ok, Thanks. Will look into the column templates option. Thanks again for all your inputs.