jqGrid dynamic columns

Question

I use jqGrid v4.4.5 and I want to create it with dynamic columns. It is filled by \"jqGridHandler.ashx\" file . I want send all information(column name,data,...) by JSON .

Answer 1

Before your initialize the jqGrid you will need to have the information for your colNames and colModel properties of the jqGrid.

So in short, you will request the information from your server, once you have successfully retrieved that information you can then build the jqGrid and then the jqGrid can go and fetch it's data.

The following post has some example code on the client side: jqGrid and dynamic column binding

Answer 2

One can use jqGrid to create many different grids, tree grids, subgrids and so on. It's very important to understand whether you want to display grid with 10 rows or with 100000 rows. If you have 100000 rows (or some other large number of rows) you will have to implement server side paging and sorting of data. So if the user would click on the "next page" button the next rows should be loaded from the server. Why you would need to send all colModel data on paging or sorting? So you should clear understand that in server side scenario one need create all structures of grid only once and then one need refresh only the body of grid. So it would be bad choice to send all information (column name, column model, data,... at once).

Only if you have some hundreds or some thousand of rows in the grid and you can use loadonce: true option them you can load once all information (column name, column model, data, ...) per separate jQuery.ajax call and then create jqGrid with datatype: "local" and using data parameter which contains all grid data.

UPDATED: If you need change

// in the example below the grid with id="list" will be created 
// with column having name: "c4" in colModel
var $grid = $("#list"), columnName = "c4";

...

var $colHeader = $("#jqgh_" + $.jgrid.jqID($grid[0].id) + "_" + $.jgrid.jqID(columnName)),
    $sortingIcons = $colHeader.find(">span.s-ico");

// change the text displayed in the column 
$taxHeader.text("New header text");

// append sorting icons to the new text
$taxHeader.append($sortingIcons);