CODEWITHSUNDEEP
jqgrid
Pokuri
Pokuri

Reputation: 3082

changing JQgrid column name dynamically

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

Upvotes: 8

Views: 31841

Answers (6)

patrick
patrick

Reputation: 16979

I gave my column name a div

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

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

Upvotes: 0

Yasser Shaikh
Yasser Shaikh

Reputation: 47804

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

Upvotes: 2

kirk
kirk

Reputation: 1007

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

Upvotes: 1

Rob Willis
Rob Willis

Reputation: 4844

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.

Upvotes: 11

Justin Ethier
Justin Ethier

Reputation: 134255

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.

Upvotes: 5

Galichev Anton
Galichev Anton

Reputation: 360

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.

Upvotes: 16

Related Questions