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.