JqGrid - losing ability to sort and perform multipleSearch when column header text is changed programmatically on gridComplete - search

Question

This is my jqgrid - $("#list1")
When it loads, i.e. on the gridComplete event, I need to rename the column header texts.
Original column header texts are in this format - Colomn1, Column2 ...
On gridComplete, I change these header texts like this:
$("#list1_Column" + someNumber).text(someText);
However on doing this, I lose the ability to sort columns. Column headers are no longer clickable and hence I cannot sort the grid after this custom programmatic editing.
Similar thing happens when I try changing the texts in the search dropdown list (search modal - using multipleSearch: true)
When, on gridComplete, I change text values in the select list as per the grid column headers, like this -
var select = $('#grid_wrapper #fbox_list1 .ui-widget-content .sf .fields select');
$('#grid_wrapper #fbox_list1 .ui-widget-content .sf .fields select option').remove();
$.each(data, function (i, item) {
select.append('<option value="Column' + item.id + '">' + item.ColumnName + '</option>')
});
...I lose the ability to perform multiple search, i.e. the + and - buttons in the search modal disappear.
How do I get around these two issues? Retaining ability to sort and perform multiple search after having changed column header and search list text values on load.
Please guide.

Answer 1

The column header <th> element has two child elements: one <span> with the text of the column header and another with the sort icons which are hidden the most time. So if you want to change the text manually you should use another selector
$("#list1_Column" + someNumber+ " > span").text(someText);
If you do so you will change the text on the page, but not change the text in the colNames or in the colModel (if you use label property instead of colNames). The text will be used for example to create Multisearch dialog. You can make changes in the colModel with respect of setColProp method or use getGridParam to get reference to any internal parameter of jqGrid (which are objects like inclusive colNames and colModel) and then make any changes which you need.
The best way in my opinion to solve the described problems is to use setLabel method to change the text in the column header:
$("#list1").jqGrid('setLabel','ColumnName','My new Name');
this will solve both problems.