Blazor Tree Grid Example - Column Template
This sample demonstrates the usage of template columns in Tree Grid. This demo displays images in one of the tree grid columns.
Name | Employee Image | DOB | Designation | Employee ID | Priority |
|---|
Robert King | ![]() | 2/15/1992 | Chief Executive Officer | EMP001 | USA |
David William | ![]() | 5/20/1990 | Vice President | EMP004 | USA |
Nancy Davolio | ![]() | 3/19/1988 | Marketing Executive | EMP035 | USA |
Andrew Fuller | ![]() | 9/20/1993 | Sales Representative | EMP045 | UK |
Anne Dodsworth | ![]() | 1/1/0001 | Sales Representative | EMP091 | USA |
Michael Suyama | ![]() | 1/1/0001 | Sales Representative | EMP110 | UK |
Janet Leverling | ![]() | 1/1/0001 | Sales Coordinator | EMP131 | UK |
Romey Wilson | ![]() | 2/2/1994 | Sales Executive | EMP039 | UK |
Margaret Peacock | ![]() | 1/1/0001 | Sales Representative | EMP213 | USA |
Steven Buchanan | ![]() | 1/1/0001 | Sales Representative | EMP197 | USA |
Tedd Lawson | ![]() | 1/1/0001 | Sales Representative | EMP167 | USA |
Tree Grid provides a way to use a custom layout for each cell using the column template feature. By using the Template component of TreeGridColumn component, custom content can be placed. Inside the Template, you can access the data using the implicit named parameter Context.
In this demo, using column template, Employee Image column is displayed with employee photo.
More information on the column template can be found in this documentation section.










