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)

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.