Example of Detail Template in Javascript Tree Grid Control

All Controls
/
Tree Grid
/
Detail Template

This sample demonstrates the Tree Grid component with the detail template feature.

More Details...

Robert King
2/15/1963Chief Executive OfficerEMP001USA
RobertKing
Robert King was born on 2/15/1963. Now lives at 507 - 20th Ave. E.Apt. 2A, Seattle, USA. Robert King holds a position ofChief Executive Officer in our WA department, (Seattle USA).
Contact:(206) 555-9857
David william
5/20/1971Vice PresidentEMP004USA
DavidWilliam
David william was born on 5/20/1971. Now lives at 722 Moss Bay Blvd., Kirkland, USA. David william holds a position ofVice President in our WA department, (Seattle USA).
Contact:(206) 555-3412
Nancy Davolio
3/19/1966Marketing ExecutiveEMP035USA
NancyDavolio
Nancy Davolio was born on 3/19/1966. Now lives at 4110 Old Redmond Rd., Redmond, USA. Nancy Davolio holds a position ofMarketing Executive in our WA department, (Seattle USA).
Contact:(206) 555-8122
Andrew Fuller
9/20/1980Sales RepresentativeEMP045UK
AndrewFuller
Andrew Fuller was born on 9/20/1980. Now lives at 14 Garrett Hill, London, UK. Andrew Fuller holds a position ofSales Representative in our WA department, (Seattle USA).
Contact:(71) 555-4848
Anne Dodsworth
10/19/1989Sales RepresentativeEMP091USA
AnneDodsworth
Anne Dodsworth was born on 10/19/1989. Now lives at 4726 - 11th Ave. N.E., Seattle, USA. Anne Dodsworth holds a position ofSales Representative in our WA department, (Seattle USA).
Contact:(206) 555-1189
Michael Suyama
11/2/1987Sales RepresentativeEMP110UK
MichaelSuyama
Michael Suyama was born on 11/2/1987. Now lives at Coventry House Miner Rd., London, UK. Michael Suyama holds a position ofSales Representative in our WA department, (Seattle USA).
Contact:(71) 555-3636
Janet Leverling
11/6/1990Sales CoordinatorEMP131UK
JanetLeverling
Janet Leverling was born on 11/6/1990. Now lives at Edgeham Hollow Winchester Way, London, UK. Janet Leverling holds a position ofSales Coordinator in our WA department, (Seattle USA).
Contact:(71) 555-3636
Romey Wilson
2/2/1980Sales ExecutiveEMP039UK
RomeyWilson
Romey Wilson was born on 2/2/1980. Now lives at 7 Houndstooth Rd., London, UK. Romey Wilson holds a position ofSales Executive in our WA department, (Seattle USA).
Contact:(71) 555-3690
Margaret Peacock
1/21/1986Sales RepresentativeEMP213USA
MargaretPeacock
Margaret Peacock was born on 1/21/1986. Now lives at 4726 - 11th Ave. N.E., California, USA. Margaret Peacock holds a position ofSales Representative in our WA department, (Seattle USA).
Contact:(206) 555-1989
Laura Callahan
12/1/1990Sales CoordinatorEMP201UK
LauraCallahan
Laura Callahan was born on 12/1/1990. Now lives at Coventry House Miner Rd., London, UK. Laura Callahan holds a position ofSales Coordinator in our WA department, (Seattle USA).
Contact:(71) 555-2222
Steven Buchanan
3/23/1987Sales RepresentativeEMP197USA
StevenBuchanan
Steven Buchanan was born on 3/23/1987. Now lives at 200 Lincoln Ave, Salinas, CA 93901, USA. Steven Buchanan holds a position ofSales Representative in our WA department, (Seattle USA).
Contact:(831) 758-7408
Tedd Lawson
8/9/1989Sales RepresentativeEMP167USA
TeddLawson
Tedd Lawson was born on 8/9/1989. Now lives at 200 Lincoln Ave, Salinas, CA 93901, USA. Tedd Lawson holds a position ofSales Representative in our WA department, (Seattle USA).
Contact:(831) 758-7368
Description

The detail row template provides an additional information about a data row. The detailTemplate property accepts either string or HTML element`s ID value, which will be used as the template for the detail row. In this demo, we have presented Employee Information with image in the detail row. The template expression should be provided inside ${...} interpolation syntax. Injecting Module: Tree Grid features are segregated into individual feature-wise modules. To use detail template feature, we need to inject DetailRow using the TreeGrid.Inject(DetailRow) section. More information about Detail Template can be found in this documentation section.