Load jqgrid structure from server, not only data

Question

Is it possible to load from server via ajax JQGrid structure(columns) together with data ? If possible, could you please show an example ?

Answer 1

There's no reason why not, you just ned to do things (asynchronously) in the correct order, something like this (forgive the psuedo code)

var jqGridOptions = {
   /*  various options here */
}

$.ajax({
   url: jqGridStructureUrl
}).success(function(jqGridColumns){


    // Add the col model to the other options    
    jqGridOptions.colModel = jqGridColumns.colModel
    jqGridOptions.colNames = jqGridColumns.colNames

    // set up the jqGrid
    $j("#gridId").jqGrid(jqGridOptions)

})

This will get you part of the way there. I guess you'll also be wanting to load Data via Ajax in which case you can set the "Data" option on the jqGrid settings to a callback function (this is not very well documented) - OR you could fire off TWO ajax calls, one for data and one for structure and then when they're BOTH back munge the two together and instantiate your grid object

Answer 2

You can create jqGrid with all hidden columns. You need create grid with large enough number of columns. The names of the columns (in colModel) can have some generic values like "c1", "c2", "c3" ... The response from the server can contains colModel information together with the data. Inside of beforeProcessing callback you can change colModel and set new column headers. The answer demonstrates setting of column headers dynamically. The code column be simplified by usage setLabel method. Another answer demonstrates how to use setColProp to set the most settings of colModel full dynamically. If you would combine the solution with the usage of setColWidth method which I posted in the answer (see here too) then you could create perfect solution.