Dynamic Columns for Grid

[kinky_lizzard]

Hi,
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}';
 }
 else{
	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!

[Animal]

You're creating an Array of strings, not an Array of column config objects.

[seanfell]

I'm looking at doing exactly the same thing kinky_lizzard...
If you get it working, any chance you could post the code here
It would be very much appreciatedbe

[kinky_lizzard]

Thanks Animal (Wonder y they call u that ) :roll:
i got it working with the following piece of code

var columnHeaders = new Array();
for(var l = 0; l < colHeaders.length; l++){
	var columnConfig = new Object();
	columnConfig.header = colHeaders[l].firstChild.nodeValue;
	if(l == 0){
		columnConfig.width = 30;	
	}
	else{
		columnConfig.width = 150;
		
	}
	columnHeaders[l] = columnConfig;
}
var colModel = new YAHOO.ext.grid.DefaultColumnModel(columnHeaders);

Cheers!

[Animal]

or

var columnHeaders = [];
for(var l = 0; l < colHeaders.length; l++){
   columnHeaders.push({width: (l == 0) ? 30 : 150, header: colHeaders[l].firstChild.nodeValue});
}
var colModel = new YAHOO.ext.grid.DefaultColumnModel(columnHeaders);

(Growl!)

[kinky_lizzard]

on the same note how can i apply renderer on the columns:
attempts like

var columnHeaders = [];
for(var l = 0; l < colHeaders.length; l++){
   columnHeaders.push({width: (l == 0) ? 30 : 150, header: colHeaders[l].firstChild.nodeValue, renderer: imageRenderer});
}
var colModel = new YAHOO.ext.grid.DefaultColumnModel(columnHeaders);

leads to the grid not being displayed at all, also the following alternative does not work

var columnHeaders = [];
for(var l = 0; l < colHeaders.length; l++){
   columnHeaders.push({width: (l == 0) ? 30 : 150, header: colHeaders[l].firstChild.nodeValue});
}
var colModel = new YAHOO.ext.grid.DefaultColumnModel(columnHeaders); 
colModel.setRenderer(0, imageRenderer);

Enlighten me please!

[kinky_lizzard]

Oops, mebbe i should look at the code more closely than shooting off my mouth. Lesson learnt.
Actually the renderer function has to be defined in the function that spans the grid, mine was not (it was defined inside an 'if' check)
Apologies :oops:

[kushal179]

Can ths dynamic grid works with json reader?what are changes i have to make in my json reader and grid.

Thanks & regards