I am trying to render a grid the columns for which are user/server modifiable (stored as user preferences), hence i cannot have a column model like the one defined in the grid example. e.g.

var colModel = new YAHOO.ext.grid.DefaultColumnModel([
			{header: "Author", width: 120, sortable: true}, 
			{header: "Title", width: 180, sortable: true}, 
			{header: "Manufacturer", width: 115, sortable: true}, 
			{header: "Product Group", width: 100, sortable: true}
Instead i have a xml that defines the column headers that i need to display. I create an array for each individual column config e.g.
for(var l = 0; l < colHeaders.length; l++){
 var tempCol;
 if(l == 0){
	tempCol ='{header:"'+colHeaders[l].firstChild.nodeValue+'", width: 30}';
	tempCol ='{header:"'+colHeaders[l].firstChild.nodeValue+'", width:150}';				
 columnHeaders[l] = tempCol;
var colModel = new YAHOO.ext.grid.DefaultColumnModel(columnHeaders);
However on doing so the rendereres are not activated, neither is the column header text visible. However the number of columns is being rendered right.

I would really appreciate if someone can point me in the right direction.
Thanks a lot!