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 . I search for it in Google but can not find a good answer.

By Click on each node(child) change whole grid(actions and columns...).For example by click on node3 the grid has three columns 'A' and 'B' and 'actions' but by click on node2 grid has columns 'C' and 'D' and 'actions'.

Crawley

Answer 1

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);

Sanguinary

Thanks Oleg.I want to display grid(not tree grids) with 10 rows of 100000 rows and use paging. When client click on nodes of treeview then change grid struct(colName,Actions,....).What is the solution? – Crawley

@ZSH: You can use subgrids as grid to display such data. – Sanguinary

I do not need to use subgrid(parent and child).I just want to be able to change dynamic colName,ColModel in jqgrid. – Crawley

@ZSH: You should understand the terminology used by jqGrid. In your previous comment you wrote about treeview (you mean probably TreeGrid) and the action on "click on nodes" is too unclear. I understand you so that you will have children node which structure (colName, colModel etc) are other as in the parent node. TreeGrid don't allow it, but using subgrids you can implement that. If you need something another you should describe in details the exact requirements in new question. Including pictures or other examples could be very helpful to understand you. – Sanguinary

@ZSH: The goal of stackoverflow to share common problems and the ways to solve it. So you should better to open new question, include pictures, code and all other things to describe mostly clear the problem which you have. Discussion wrote in comments will be not indexes and other people will not find the information during searching. Including pictures and code in comments are also not really possible. – Sanguinary

@ZSH: Sorry, but I don't understand what you need from the picture. I see no relation between the right part of the picture (TreeView) with the grid displayed on the left part. Could you describe more clear what you want to have? Is the "TreeView" part of the page interactive? What can do the user with the "TreeView"? – Sanguinary

By Click on each node,new data is shown in grid.For example by click on node3 the grid has two columns 'A' and 'B' but by click on node2 grid has two columns 'C' and 'D'.Nodes are identified which contents of the grid – Crawley

@ZSH: I wrote you that it's important to write the information which is related to your question in the text of the question and not in comments. Only in the case the information could be found by other users. You should just append your question with the information. You wrote: "By Click on each node,new data is shown in grid". Do you mean "the data" or the whole grid? Which request you need send to the server on every click on the node? You should just describe all carefully in the text of the question. – Sanguinary

@ZSH: Do you need just change the column headers and the grid data dynamically or the number of column, it's type (formatters) could be also be changed – Sanguinary

Yes.I need just change the column headers and the grid data dynamically.Formatters can help me in this issue?In jqgrid document "Formatter supports advanced formatting of the contents of cells in form, in-line and cell editing". – Crawley

@ZSH: To reload the grid body you can trigger "reloadGrid" event. Before it you can change some parameters of jqGrid (like postData, url and so on). You can insert column headers in the server response. Then you can change the text in the column header by direct addressing of column header elements. The id of the column header will be constructed from "jqgh_" prefix, grid id and the name of the column, for example "jqgh_list_amount". You should not forget not overwrite <span> with sorting icons. – Sanguinary

@ZSH: I appended my answer with an example which shows how to change column headers dynamically. You can use for example c1, c2, c3, ... as the column names in colModel. You can include in the server response data like "colHeaders": {"c1": "text 1", "c2": "header 2", ...} and then you can change the column headers inside of loadComplete or inside of beforeProcessing callback. – Sanguinary

I really thank you.This issue waste my time.I new learned about jqgrid.I need more help by sample or some code. – Crawley

@ZSH: You are welcome! If you would have other problems you can post new questions on the stackoverflow and I (or other) would try to help you. – Sanguinary

@Oleg: Kindly look into this #26121488 – Inquest

Answer 2

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

Canvas