change column width in javascript

Hello Alex,

Before do ask, congratulations to you work!

Well, when I try change the column width in javascript (using " column.setStyle('width', '100px');"), the grid lost itself. In my project, I can't change the ".css" and the only things that I can change is the javascript.

How can I change the properties of column (like width or lenght) whith javascript?

How I align the grid in center of page ? I tried use the <div align='center'> ... </div> but the grid lost itself...



// my code
var obj = new Active.Controls.Grid;
obj.setColumnCount(3);
obj.setRowCount(11);
obj.setStyle('color', 'black');
obj.setStyle('background', 'white');
obj.setStyle('font-size', '8pt');
obj.setStyle('font-family', 'menu');
obj.setStyle('border', '3px double black');


var column0 = new Active.Templates.Text;
column0.setStyle('text-align', 'center');
column0.setStyle('color', '#000099');
column0.setStyle('background', '#ffffcc');
column0.setStyle('text-align', 'right');
column0.setStyle('font-weight', 'bold');
column0.setStyle('width', '123px');
obj.setTemplate('column', column0, 0);

var column1 = new Active.Templates.Text;
column1.setStyle('width', '100px');
obj.setTemplate('column', column1, 1);

var column2 = new Active.Templates.Text;
column2.setStyle('text-align', 'left');
column2.setStyle('color', '#000099');
column2.setStyle('background', '#ffffcc');
column2.setStyle('text-align', 'right');
column2.setStyle('font-weight', 'bold');
column2.setStyle('width', '100px');
obj.setTemplate('column', column2, 2);

obj.sort(0,'ascending');

Your code looks OK for me. Is your question about changing the width AFTER the grid was created?

No. When I put the code "column2.setStyle('width', '150px');" the column change the width, but the column header no change the width. Try execute this code and you'll see. The columns stay strange, out of position, not align with the column header.

tks! for quick response

Sorry, you are right! The only way to resize both is through stylesheet. But you can still do it with the script like this:

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

Great! tks man!

That's all, folks

How about
.active-scroll-left, .active-scroll-corner {display: none}
How to using the similar way like Alex's

Any update on that for v2.0b2 ?
This has no effects.

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

With ver 2.x there is a function built into the grid for changing the column size. Take a look at the examples that were created when you downloaded the code. Specifically in the QuickRef folder.

Replace ".active" with ".aw"

...sorry wrong post-answer

No ,no it's OK (my mouse is taken it's own decissions, I need to restrict it's freedom) ;-)