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 ?

Are you trying to define the grid before your AJAX call without defining the columns, or would it be an option to declare/define the grid AND columns after the call? — AJ., Jan 03 '14 at 14:12
@AJ I need to define the grid columns right after the server call because it depends on some conditions that should be calculated on server side. On the client side I only have a grid object that each time should be populated/repopulated with different columns and data. — alexanoid, Jan 03 '14 at 14:15

score 2 · Answer 1 · answered Jan 03 '14 at 14:18

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

Thank you so much ! I'd really appreciate if you extend your example with Data also. I mean in one ajax call, not two calls. — alexanoid, Jan 03 '14 at 14:25
This is a good answer. To do the data portion, I would define the grid with `datatype: 'local'`, set up your column data in an array object from the server, and then iterate through adding each row. — AJ., Jan 03 '14 at 14:28

score 2 · Answer 2 · edited May 23 '17 at 12:22

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.

Load jqgrid structure from server, not only data

2 Answers2

Linked