Styling

16 Jul 201814 minutes to read

List of classes and its purposes

To modify Grid appearance, you need to override default CSS of Grid. Please find the list of CSS classes and its corresponding section in Grid. Also you have an option to create your own custom theme for all JavaScript controls using our Theme Studio.

Section CSS class Purpose of CSS class
Root e-grid This classes are in this root element (div) of grid control.
e-js
Header e-gridheader This is class is added in the root element of header element. In this class, You can override thin line between header and content of grid.
e-table This class is added at 'table' of grid header. This CSS class makes table width as 100 %.
e-columnheader This class is added at 'tr' of grid header.
e-headercell This class is added in 'th' element of grid header. You can override background color of header and border color
e-headercelldiv This class is add in div which present 'th' element in header. You recommend you to use e-headercelldiv to override skeleton of header.
Body e-gridcontent This class is added at root of body content. This is to override background color of body.
e-table This class is added to table of content. This CSS class makes table width as 100 %.
e-alt_row This class is added to alternate rows of grid. This is to override alternate row color of grid.
e-rowcell This class is added to all cells in grid. This is to override cells appearance and styling.
e-groupcaption This class is added to 'td' of group caption which is to change background color of caption cell.
e-selectionbackground This class is added to `e-rowcell` of grid. this is override selection.
e-hover This class adds to row of grid while hover grid rows.
Pager e-pager This class is added to root element of pager. This to change appearance of background color and color of font.
e-pagercontainer This class is added to numeric items of pager.
e-parentmsgbar This class is added to pager info of pager.
Summary e-gridfooter This class is added to root of summary div.
e-gridsummary This class is added to table of summary. This CSS class makes table width as 100 %.
e-gridSummaryRows This class is added to rows of grid summary.
e-summaryrow This class is added to cells of summary row. This to override background color of summary.

Toolbar Customization

To customize toolbar, you need to use toolbar default CSS class to override icon in toolbar.

See Also

customize toolbar