How to change column width if there is more than one grid ?

I am using more than one grid in an HTML page. I want to change the width of columns seperately in each grid. The following code changes the width of first column to 200px of all the grids in that page.

var stylesheet = document.styleSheets[document.styleSheets.length-1];
stylesheet.addRule(".active-column-0", "width:200px");

The below code changes the column width of the data in the row but not the header column.

var column0 = new Active.Templates.Text;
column0.setStyle('width', '200px');
obj.setTemplate('column', column0, 0);

I think I have to use different <style> tags for each grid. How this can be done ?

Use this syntax for each grid on the page:

#mygrid .active-column-1 {width: 100px; text-align: left;}
#mygrid2 .active-column-1 {width: 150px; text-align: left;}
#mygrid3 .active-column-1 {width: 200px; text-align: left;}

Happy holidays

I think mygrid is the object of the Active.Controls.Grid as follows.
var mygrid = new Active.Controls.Grid;
But even the above syntax doesn't work.
Now Where I have to give the below lines
#mygrid .active-column-1 {width: 100px; text-align: left;}
#mygrid2 .active-column-1 {width: 150px; text-align: left;}
#mygrid3 .active-column-1 {width: 200px; text-align: left;}
It would be better if anyone gives a clear example.

Happy new Year 2005.

You got it... it should be working for each of your grids.
<style>
#mygrid .active-column-0 {width: 100px; text-align: left;}
#mygrid2 .active-column-0 {width: 150px; text-align: left;}
#mygrid3 .active-column-0 {width: 200px; text-align: left;}

#mygrid .active-column-1 {width: 100px; text-align: left;}
#mygrid2 .active-column-1 {width: 150px; text-align: left;}
#mygrid3 .active-column-1 {width: 200px; text-align: left;}
</style>

var mygrid = new Active.Controls.Grid;
... grid stuff here ...
var mygrid2 = new Active.Controls.Grid;
... grid stuff here ...
var mygrid2 = new Active.Controls.Grid;
... grid stuff here ...

Hi
I have the same problem,
There was the original grid: http://www.works.iandistudio.com/gridproblem/grid1.html

I tried #mygrid,#mygrid1, but doesn't work.
http://www.works.iandistudio.com/gridproblem/grid2.html

Please take a look at my links.

I am looking forward for your answer,
Thank you very much.

Hi folks,

I've just come across the same problem.

Solution:

for the first grid:

obja.setId('grida');
#grida.active-controls-grid{
width: 500px;
}
#grida .active-column-1 {width: 100px; text-align: left;}
#grida .active-column-2 {width: 150px; text-align: left;}
#grida .active-column-3 {width: 200px; text-align: left;}

for the second grid:
objb.setId('gridb');

#gridb.active-controls-grid{
width: 300px;
}
#gridb .active-column-1 {width: 100px; text-align: left;}
#gridb .active-column-2 {width: 150px; text-align: left;}
#gridb .active-column-3 {width: 50px; text-align: left;}

hope this helps,

cheers,

Hi Folks,

This is ok, if you know in advance the width the column needs to be.

What if you want the column to autosize to either the width of the column header or the data in that column depending on which is the larger.

I am trying to design a site with several thousand pages of data, I have one main data page and just tell it which data page to include, but I cant get the columns to size the way I want to.

Ross,

Something like this should work:

<script>
function tryResize(grid,colNdx,width) {
var ss = document.styleSheets[document.styleSheets.length-1];
var i, selector = "#" + obj.getId() + " .active-column-" + colNdx;
for(i=0; i<ss.rules.length;i++){
if(ss.rules[i].selectorText == selector){
ss.rules[i].style.width = width;
el = null;
grid.getTemplate("layout").action("adjustSize");
return;
}
}
ss.addRule(selector, "width:" + width + "px");
el = null;
grid.getTemplate("layout").action("adjustSize");
}
</script>

<a href=javascript:tryResize(obj,1,10)>Try Resize</a><BR>


<script>

Frank Gualtieri