How to change grid column headers dynamically

Hi Folks,

I have a 2 cell layout with grids in both cells. Based on a selection from the first grid I have to set the second grid’s column headers. In addition the number of columns may vary,so I may need to add or delete columns from the second grid.

I have not been able to find a simple way to do this. I have tried just re-running the grid.setHeader function and that didn’t work, then I tried the grid.attachHeader function, but that placed the new headers on a new row, and I need to add them to the original headers.

Any help would be much appreciated.



Attach the onRowSelect event handler:

grid.attachEvent("onRowSelect", function(id,ind){
   //change grid 2

Then inside the handler, you can change grid2 a couple of different ways…

Way 1: set the column label with:


Way 2: destroy the grid and then reattach and completely rebuild / load data

grid = cell.attachGrid();
/// rebuild from scratch

Way 3: hide and show the columns … olumn.html

Hi bmcgin, Thanks for your reply. The destroy option was the best for this case since the number of header fields does vary. I appreciate the help.



Sounds good. I use the destroy approach in lots of places. In other cases I am able to load the grid with all columns/rows/data and then hide/show/filter the data.