:: Documentation >> Tutorial >> Grid >>

Adding gridlines.

To display the gridlines add the following rules to the stylesheet:

<style>
    .active-grid-row {border-bottom: 1px dotted red;}
    .active-grid-column {border-right: 1px solid black;}
</style>

You can do the same thing in a script if you assign CSS rules directly to the row and/or column templates.

First of all you need to create a new row template.

var row = new Active.Templates.Row;

Then assign a proper CSS formatting rule to the new template.

row.setStyle("border-bottom", "1px dotted red");

And finally tell the grid object to use your new template.

obj.setTemplate("row", row);

Same for the column templates.

var column = new Active.Templates.Text;
column.setStyle("border-right", "1px solid black");
obj.setTemplate("column", column);

Here is working example:

Back to Visual Style