changing JQgrid column name dynamically

Question

I just need to rename JQgrid column dynamically as per user selection from a list of options. How can I do that?

Isa

Answer 1

According to the jqGrid Documentation, colNames cannot be changed after the grid is created.

However, you might be able to simulate a column name change by using several columns. Then you can hide all of them except a single one which will be shown to the user. When the user selects another, just swap in the selected column. For example, if valid columns are [A, B, C, D] you might start by only showing A. Then if the user chooses C, hide A and show C. The main disadvantage to this approach is that you will need to copy the same data to many columns, however.

Update

Per Galichev's answer, you can use the setLabel method to rename a column header.

Parlando

Answer 2

You can use this syntax:

jQuery("#grid1").jqGrid('setLabel', 0, 'NewLabel');

This will change first column name to NewLabel in your grid with id=grid1.

Febri

Answer 3

The latest version of jqGrid (4.1+ - possibly earlier) no longer appears to support the column index based setLabel approach described by Galichev, a columnName based approach is provided instead:

jQuery("#grid1").jqGrid('setLabel', 'columnName', 'NewLabel');

See the jqGrid Methods wiki for more information.

I've left the previous answer unedited as this approach may be valid in versions prior to 4.1.

Photocopier

Answer 4

*setLabel : * colname the name of the column (this parameter can be a number (the index of the column) beginning from 0

However the index param does not work with version 4.1 and above.

Jqgrid uptop version 4.0

 $(tableId).jqgrid("setLabel", 0, "BBBBB");

Jqgrid version 4.1 and above

Try using these

  $(tableId).setLabel("ColumnName", "AAAAA");

or

  $(tableId).jqgrid("setLabel", "ColumnName", "BBBBB");

Maura

Answer 5

JQGrid1.Columns.FromDataField(ColumnName).HeaderText = ColumnName;

Azarcon

Answer 6

I gave my column name a div

'<div id="DateDivId">Date</div>'

Then I just changed it the normal way, getElementById, change contents.

Connelley