Customization via CSS and Styles

The Advanced Styles Architecture available in GridGroupingControl helps to define styles for unique grid elements such as GroupCell, HeaderCell, NestedTableCell, IntendCell, SummaryCell, etc. The datagrid provides two customization options, Customization using CSS and Customization via Grid's style architecture.

Cascading Style Sheets Support

Custom css style can be defined for each of the above elements in the GridGroupingControl.

Grid Style Architecture

The grid implements it's own style architecture with style inheritance across logically related elements in the grid. Use this as an alternative to the CSS style options for more fine grainded control over the look and feel.

Just like CSS, the grid's style architecture lets you define a style and apply it across different cells in the grid. For example, conditional formatting can be applied with ease using this approach. The below image best illustrates the base styles. The base styles 'HeaderStyle' and 'StandardStyle' are applied to the headers and other cells respectively. The base style named 'HighlightStyle' is applied to those cells in 'Sales' column, where the value falls below its 'Target' value.

GridGroupingControl with base Styles