Skip to content

Styling the Grid Visualizer

Tom edited this page Mar 4, 2016 · 2 revisions

For even more control over the styling of the grid, the Grid Visualizer defines the following CSS Classes that can be implemented in a site's CSS file:

DNN_Reports_Grid_Header Applied to the header of the Grid,
DNN_Reports_Grid_Row Applied to every row of the Grid,
DNN_Reports_Grid_AlternatingRow Applied to alternating rows of the Grid,
DNN_Reports_Grid_Pager Applied to the pager at the bottom of the Grid.

These classes can be used to change the style of either all Grids in a site (by defining them in a Portal CSS file), or to change the style of this Grid (by using the CSS Class setting to apply a unique CSS Class to this entire grid). The cascading nature of CSS can also be used to apply styles to particular instances of the Grid Visualizer. For example, if the CSS Class setting for a particular instance of the Grid Visualizer has been set to CustomersReport, then the following CSS will change the background color of alternating rows in the Grid to "white":

.CustomersReport .Reports_AlternatingRow
{
background-color: white;
}