Style and Appearance in AP.NET MVC Grid
15 Jan 202414 minutes to read
List of classes and its purposes
To modify the Grid appearance, you need to override default CSS of the grid. Please find the list of CSS classes and its corresponding section in the grid. Also you have an option to create your own custom theme for all the ASP.NET MVC controls using our Theme Studio.
| Section | CSS class | Purpose of the CSS class |
|---|---|---|
| Root | e-grid | This classes are in this root element (div) of the grid control. |
| e-js | ||
| Header | e-gridheader | This is class is added in the root element of header element. |
| 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 the grid header. | |
| e-headercell | This class is added in 'th' element of grid header. You can override the background color of header and border color. | |
| e-headercelldiv | This class is add in div which present 'th' element in header. It is recommended to use the e-headercelldiv to override skeleton of header. | |
| Body | e-gridcontent | This class is added at root of body content. This is to override the background color of body. |
| e-table | This class is added to table of content. This CSS class makes the table width as 100 %. | |
| e-alt_row | This class is added to alternate rows of grid. This is to override the alternate row color of grid. | |
| e-rowcell | This class is added to all cells in the grid. This is to override cell's appearance and styling. | |
| e-groupcaption | This class is added to 'td' of group caption which is to change the background color of caption cell. | |
| e-selectionbackground | This class is added to the row cells of grid. This is override selection. | |
| e-hover | This class adds to the row of grid when hovering on grid rows. | |
| Pager | e-pager | This class is added to root element of the pager. This to change appearance of background color and color of font. |
| e-pagercontainer | This class is added to numeric items of the pager. | |
| e-parentmsgbar | This class is added to pager info of the pager. | |
| Summary | e-gridfooter | This class is added to root of the 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 the background color of summary. |
Toolbar customization
To customize toolbar, you need to use the toolbar default CSS class to override icon in toolbar.