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 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 &amp;&amp; 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.
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.