Styling and Appearance in Blazor TreeGrid Component

14 Nov 20224 minutes to read

To modify the Tree Grid appearance, override the default CSS of Tree Grid. Find the list of CSS classes and its corresponding section in Tree Grid.

Section CSS class Purpose of CSS class
Root e-treegrid This classes are in this root element div of the Tree Grid control.
Header e-gridheader This class is added in the root element of header element. In this class, thin line between header and content of the Tree Grid can be overridden.
  e-table This class is added at the table of the Tree Grid header. This CSS class makes table width as 100 %.
  e-columnheader This class is added at tr of the Tree Grid header.
  e-headercell This class is added in th element of Tree Grid header. The background color of header and border color can be overridden.
  e-headercelldiv This class is added in div which is present in th element in the header. Use the e-headercelldiv to override skeleton of header.
Body e-gridcontent This class is added at root of the body content. This is to override background color of the body.
  e-table This class is added to table of the content. This CSS class makes table width as 100 %.
  e-altrow This class is added to the alternate rows of Tree Grid. This is to override alternate row color of the Tree Grid.
  e-rowcell This class is added to all cells in the Tree Grid. This is to override cells appearance and styling.
  e-groupcaption This class is added to the td of group caption which is to change the background color of caption cell.
  e-selectionbackground This class is added to rowcell’s of the Tree Grid. This is override selection.
  e-hover This class adds to row of Tree Grid, while hovering the Tree Grid rows.
Pager e-pager This class is added to root element of the pager. This is to change appearance of the 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-summaryrow This class is added to rows of Tree Grid summary.
  e-summarycell This class is added to cells of summary row. This to override background color of summary.