Changing the dynamic name of a JQgrid column

Question

I just need to dynamically rename the JQgrid column according to the user's choice from the parameter list. How can i do this?

Answer 1

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

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

Update

In response to Galichev's post, you can use the setLabel method to rename the column heading.

Answer 2

You can use this syntax:

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

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

Answer 3

The latest version of jqGrid (4.1+ - possibly earlier) no longer supports the setLabel method based on the index described by Galichev, instead using a column-based approach:

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

See the jqGrid Methods wiki for more information.

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

Answer 4

* setLabel: * colname is the column name (this parameter can be a number (column index) starting at 0

However, the index parameter does not work with version 4.1 and higher.

Jqgrid uppop version 4.0

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

Jqgrid version 4.1 and higher

Try using these

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

or

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

Answer 5

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

Answer 6

I gave the name of my div column

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

Then I just changed it in the usual way, getElementById, changed the contents.