Blazor Tree Grid Example - Row Template
This sample demonstrates the Tree Grid component with row template feature. In this sample, each Tree Grid row are rendered with custom layout.
Employee ID | Employee Name | Employee Details | Designation |
|---|
EMP001 |
RobertKing |
 507 - 20th Ave. E.Apt. 2A, Seattle
USA
(206) 555-9857 |
Chief Executive Officer |
EMP004 |
DavidWilliam |
 722 Moss Bay Blvd., Kirkland
USA
(206) 555-3412 |
Vice President |
EMP035 |
NancyDavolio |
 4110 Old Redmond Rd., Redmond
USA
(206) 555-8122 |
Marketing Executive |
EMP045 |
AndrewFuller |
 14 Garrett Hill, London
UK
(71) 555-4848 |
Sales Representative |
EMP091 |
AnneDodsworth |
 4726 - 11th Ave. N.E., Seattle
USA
(206) 555-1189 |
Sales Representative |
EMP110 |
MichaelSuyama |
 Coventry House Miner Rd., London
UK
(71) 555-3636 |
Sales Representative |
EMP131 |
JanetLeverling |
 Edgeham Hollow Winchester Way, London
UK
(71) 555-3636 |
Sales Coordinator |
EMP039 |
RomeyWilson |
 7 Houndstooth Rd., London
UK
(71) 555-3690 |
Sales Executive |
EMP213 |
MargaretPeacock |
 4726 - 11th Ave. N.E., California
USA
(206) 555-1989 |
Sales Representative |
EMP197 |
StevenBuchanan |
 200 Lincoln Ave, Salinas, CA 93901
USA
(831) 758-7408 |
Sales Representative |
EMP167 |
TeddLawson |
 200 Lincoln Ave, Salinas, CA 93901
USA
(831) 758-7368 |
Sales Representative |
The Tree Grid provides a way to use a custom layout for its rows using template feature. The template can be provided with the RowTemplate component of TreeGridTemplates. Also the tree column in row template can be specified using RowTemplateTreeColumn.
In this demo, employee information with the employee photo and employee details like name, address etc. are displayed.
More information about row template feature can be found in this documentation section.