Is there a more direct way to modify the header? 

When I tried your code, I  had 31 spans, but I only had 11 visible columns and 1 hidden one so I'm not sure why I had all the extras if the code should work.  Looking at the innerHTML of the spans, the first column started with the first span (at 0) but the next was at the 2 index (3rd actual)

Thanks for the information. We used  autoGenerateColumns:true to generate the columns. Can we keep the keys of the columns and just change the headerTexts of the columns using autogenerateColumns:true? Basically, we use database table fileds to generate the columns of the grid,but want to display the column in different texts.

Yes.

Just create an array of JSON object for columns:

var myColumns = [

{ headerText: "Column1", key: key},

{ headerText: "Column2", key: key}

];

and initailize the grid with myColumns array:

$("#grid").igGrid({
autoGenerateColumns: true,
columns: myColumns
});

We tested your code. It seems that the columns from myColumns will be added the the columns generated from the data source if AutoGenerateColumns:true.

If you have any other questions, do not hesitate to ask.

Thanks for using ours controls.

Hello,

I am just following up to see if you need any further assistance with this matter.

Thanks. I just build the columns at the runtime.