Width

Each grid column (cell, header and footer templates) is assigned a CSS class .aw-column-n where n is a column index. The width of each column can be set with CSS width attribute

.aw-column-1 {width: 200px;}

<style> .aw-column-1 {width: 200px;} </style> <script> var obj = new AW.UI.Grid; obj.setCellText("cell"); obj.setHeaderText("header"); obj.setColumnCount(10); obj.setRowCount(10); document.write(obj); </script>

Use object id if you have several grids on one page -

#myGrid1 .aw-column-1 {width: 200px;}
#myGrid2 .aw-column-1 {width: 30px;}

<style> #myGrid1 .aw-column-1 {width: 200px;} #myGrid2 .aw-column-1 {width: 30px;} </style> <script> var obj1 = new AW.UI.Grid; obj1.setId("myGrid1"); obj1.setCellText("cell"); obj1.setHeaderText("header"); obj1.setColumnCount(10); obj1.setRowCount(10); document.write(obj1); document.write("<hr/>"); var obj2 = new AW.UI.Grid; obj2.setId("myGrid2"); obj2.setCellText("cell"); obj2.setHeaderText("header"); obj2.setColumnCount(10); obj2.setRowCount(10); document.write(obj2); </script>

The column width can also be set using column width property -

obj.setColumnWidth(200, 1); // set col-1 width to 200px

<script> var obj = new AW.UI.Grid; obj.setCellText("cell"); obj.setHeaderText("header"); obj.setColumnCount(10); obj.setRowCount(10); obj.setColumnWidth(200, 1); // set col-1 width to 200px document.write(obj); </script>

See also

Class reference - column width