Applying styles to the multiple grids on one page.

If you have more than one grid on the same page - you can apply different styles to the grids using CSS ID selector.

<style>
  #grid1 {height: 200px;}
  #grid2 {height: 100px;}

  #grid1 .active-column-0 {width: 200px;}
  #grid2 .active-column-0 {width: 150px;}

  #grid1 .active-column-1 {background-color: threedlightshadow;}
  #grid2 .active-column-1 {background-color: infobackground;}

  .active-column-2 {text-align: right;}
  .active-column-3 {text-align: right;}
  .active-column-4 {text-align: right;}
</style>

In this example there are two grids on the page, which are assigned the 'grid1' and 'grid2' IDs using setId(id) function.

var obj1 = new Active.Controls.Grid;
obj1.setId("grid1");
...

var obj2 = new Active.Controls.Grid;
obj2.setId("grid2");
...

See full example in /examples/grid/two grids on one page.htm

Back to Visual Style