How do you set a columns width?

I have one column that I would like to have displayed wider than the rest. What file and code must I modify?

Thanks!

.active-column-2 {width:100px}

Column width is set via style sheets as demonstrated in the first answer above.

Modifying: /app/web/htdocs/test/ActiveWidgets/runtime/styles/flat

I see .active-column-0{z-index:99}.active-column-1{z-index:98}.

etc.. in the grid.css file. When I modified the column-1 to use:

active-column-1{z-index:98;width:120px}.

I saw no change. Am I doing something incorrect?

Actually you have to insert

<style>
.active-column-0 {width:0px}
</style>

tags into your HTML code. The best place for it is just before you call
<?php echo activewidgets_grid($name, $data);?>

so you can control col widths for every grid (if you have more than one grid that is).

Too late for GB I guess, but it could spare someone else some time :)

The reason you saw no change is because the last loaded style (inline if you're using any of the example programs) with the same class name takes precedence:

Something similar to this is generally listed at the top of most of the examples...

<style>
body, html {margin:0px; padding:0px; overflow:hidden; border:none}
a:visited {color:#009;}
.active-controls-grid {height:100%; font:menu}
.active-column-0 {text-align:left; border-right:1px #DDDDDD solid; border-bottom:1px #DDDDDD solid}
.active-column-1 {width:100px}
.active-column-2 {width:100px}
.active-column-3 {width:100px}
.active-column-4 {width:90px; text-align:right; color:#0033FF; cursor:hand}
.
.
.
.
</style>

FallenAngels example does exactly the same thing as modifying the style at the top of the grid file. Again, last loaded takes precedence.

make sure you include it after

<link href='js/ActiveWidgets/runtime/styles/xp/grid.css' rel='stylesheet' type='text/css' ></link>

if you have one

Is there any possibility to define column and header width using JavaScript?

I have several grid on the same page, and I would like to be able to specify the width of each column for each grid.
That css solution is not working in this case.
We should be able to override it for a grid.

If you do a Google search you can find JavaScript functions that change CSS values. If you use one of them then you can change the column width of any column for any grid (assuming that you have unique names for your grids). I have done this for ver 1.x and it works fine. For ver 2.x there are functions in the grid to change individual column widths.

I'm tryin to figure out how can i capture the order a person selects by clicking on on the the following columns on activewidgets.Reason I ask is because i am tryin to display that same order onto a pdf



Thanks in adavance

When trying to use the ActiveWidget grid within a DIV generated by the DoJo toolkit, everything seems ok, but the cell widths are auto-sized to each displayed value resulting in different widths for cells in the same column. Any suggestion how to solve this?

Does in work in 'normal' DIV?
Does it work without Dojo loaded?

I had a similar problem with beta 2.0. Because in my case the document was in strict mode, I needed to do the following to change the column width:

.aw-strict .aw-column-2 {width: 200px;}

Hi,

I want to adjust the coloumn width of datagrid at runtime. So that clients can adjust the column widths at runtime.
Plz help me.

Hi ,
function workGetComponentCode()
{
compcode = new Array(1);
compcode[0] = "&nbsp;<input id='z1' type='Checkbox' name='chkItemBoxWork' value='1'>";
compcode[0] = compcode[0] + "<input id='z3' type='hidden' value=\""+arguments[0]+"\" id='educationalId' name='educationalId'>";
compcode[1] = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input id='z4' type='text' value=\""+arguments[1]+"\" id='company' name='company' onfocus='isValidAllField();'>";
compcode[2] = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<select id='z7' name='fromMonth' class=''>" +getComboValMonth(0,arguments[2])+"</select><select id='z7' name='fromYear' class=''>" +getComboVal(0,arguments[3])+"</select>";
compcode[3] = "<select id='z7' style='active-column-0' name='toMonth' class=''>" +getComboValMonth(0,arguments[4])+"</select><select id='z7' name='toYear' class=''>" +getComboVal(0,arguments[5])+"</select>";
compcode[4] = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<select id='z7' name='workRole'class=''>" +getComboValRole(0,arguments[6])+"</select>";
return compcode;
}


i am calling this fun it is generating row but my prob is all combo box and text box are not coming in center even though i am using style in it
plzzzzzzzzzzz , help me its very urgent.(using GRID);

thanks
vishnu