Colors, fonts ...

You can modify visual appearance of the grid using .active-controls-grid CSS selector.

.active-controls-grid {
    color: #ff0000;
    background: #6699cc;
    font-size: 8pt;
    font-weight: bold;
    border: 3px double #0099ff;
}

<style> .active-controls-grid { color: #ff0000; background: #6699cc; font-size: 8pt; font-weight: bold; border: 3px double #0099ff; } </style> <script> var obj = new Active.Controls.Grid; obj.setColumnProperty("count", 5); obj.setRowProperty("count", 10); obj.setDataProperty("text", "-"); document.write(obj); </script>

If you have several grids on one page - you can assign unique id to each of them

obj.setId("grid1");

and use this id as CSS selector:

#grid1 {
    height: 100px;
    background: #ddeeff;
}

#grid2 {
    height: 150px;
    background: #ddffee;
}

<style> #grid1 { height: 100px; background: #ddeeff; } #grid2 { height: 150px; background: #ddffee; } </style> <p> Grid No. 1: </p> <script> var obj = new Active.Controls.Grid; obj.setId("grid1"); obj.setColumnProperty("count", 5); obj.setRowProperty("count", 10); obj.setDataProperty("text", "-"); document.write(obj); </script> <p> Grid No. 2: </p> <script> var obj = new Active.Controls.Grid; obj.setId("grid2"); obj.setColumnProperty("count", 5); obj.setRowProperty("count", 10); obj.setDataProperty("text", "-"); document.write(obj); </script>