Changing the row/column headers width and height.

To change the row header width it is necessary to modify style settings for all four parts of the grid. Here is the example how to set a row header width to 100px:

<style>
  .active-scroll-left, .active-scroll-corner {width: 100px}
  .active-scroll-top, .active-scroll-data {padding-left: 100px}
</style>

Changing the column header height is very similar:

<style>
  .active-scroll-top, .active-scroll-corner {height: 25px}
  .active-scroll-left, .active-scroll-data {padding-top: 25px}
</style>

You can do the same thing in javascript using the methods of the grid object:

obj.setColumnHeaderHeight("25px");
obj.setRowHeaderWidth("100px");

Example:

Back to Visual Style