This sample demonstrates the Tree Grid component with the row template feature. In this sample, we have rendered each Tree Grid row using the template.
Employee ID | Employee Name | Employee Details | DOB |
|---|---|---|---|
EMP001 | Robert King Chief Executive Officer |  507 - 20th Ave. E.Apt. 2A, Seattle USA (206) 555-9857 | 2/15/1963 |
EMP004 | David william Vice President |  722 Moss Bay Blvd., Kirkland USA (206) 555-3412 | 5/20/1971 |
EMP035 | Nancy Davolio Marketing Executive |  4110 Old Redmond Rd., Redmond USA (206) 555-8122 | 3/19/1966 |
EMP045 | Andrew Fuller Sales Representative |  14 Garrett Hill, London UK (71) 555-4848 | 9/20/1980 |
EMP091 | Anne Dodsworth Sales Representative |  4726 - 11th Ave. N.E., Seattle USA (206) 555-1189 | 10/19/1989 |
EMP110 | Michael Suyama Sales Representative |  Coventry House Miner Rd., London UK (71) 555-3636 | 11/2/1987 |
EMP131 | Janet Leverling Sales Coordinator |  Edgeham Hollow Winchester Way, London UK (71) 555-3636 | 11/6/1990 |
EMP039 | Romey Wilson Sales Executive |  7 Houndstooth Rd., London UK (71) 555-3690 | 2/2/1980 |
EMP213 | Margaret Peacock Sales Representative |  4726 - 11th Ave. N.E., California USA (206) 555-1989 | 1/21/1986 |
EMP201 | Laura Callahan Sales Coordinator |  Coventry House Miner Rd., London UK (71) 555-2222 | 12/1/1990 |
EMP197 | Steven Buchanan Sales Representative |  200 Lincoln Ave, Salinas, CA 93901 USA (831) 758-7408 | 3/23/1987 |
EMP167 | Tedd Lawson Sales Representative |  200 Lincoln Ave, Salinas, CA 93901 USA (831) 758-7368 | 8/9/1989 |
The Tree Grid provides a way to use a custom layout for its rows using template feature. The rowTemplate property accepts either string or HTML element`s ID value, which will be used as the template for the row. In this demo, we have presented Employee Information with Employee Photo and employee details like Name, Address etc. The template expression should be provided inside ${...} interpolation syntax. More information about Row Template can be found in this documentation section.