:: Forum >> Version 1 >>

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.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);

Friday, April 2, 2004
Your code looks OK for me. Is your question about changing the width AFTER the grid was created?
Alex (ActiveWidgets)
Friday, April 2, 2004
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
Friday, April 2, 2004
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");
Alex (ActiveWidgets)
Friday, April 2, 2004
Great! tks man!

That's all, folks
Friday, April 2, 2004
How about
.active-scroll-left, .active-scroll-corner {display: none}
How to using the similar way like Alex's
Thursday, November 17, 2005
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");
Thursday, November 17, 2005
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.
Jim Hunter
Friday, November 18, 2005
Replace ".active" with ".aw"
Friday, November 18, 2005
...sorry wrong post-answer
Friday, November 18, 2005
No ,no it's OK (my mouse is taken it's own decissions, I need to restrict it's freedom) ;-)
Friday, November 18, 2005

This topic is archived.

Back to support forum

Forum search