Example of Detail Template in Blazor DataGrid Component
This sample demonstrates the Blazor DataGrid component with the detail template feature. To view detailed information about a row, click the expand button in each Blazor DataGrid row.
First Name | Last Name | Title | Phone | Email | Address | Country |
|---|
| Nancy | Davolio | Sales Representative | (206) 555-9857 | [email protected] | 507 - 20th Ave. E.Apt. 2A | USA | |
| Andrew | Fuller | Vice President, Sales | (206) 555-9482 | [email protected] | 908 W. Capital Way | USA | |
| Janet | Leverling | Sales Representative | (206) 555-8122 | [email protected] | 4110 Old Redmond Rd. | USA | |
| Margaret | Peacock | Sales Representative | (71) 555-4848 | [email protected] | 14 Garrett Hill | UK | |
| Steven | Buchanan | Sales Manager | (206) 555-8122 | [email protected] | Coventry HouseMiner Rd. | USA | |
| Michael | Suyama | Sales Representative | (71) 555-4444 | [email protected] | 7 Houndstooth Rd. | UK | |
| Robert | King | Sales Representative | (71) 555-5598 | [email protected] | Edgeham HollowWinchester Way | UK | |
| Laura | Callahan | Inside Sales Coordinator | (206) 555-3412 | [email protected] | 722 Moss Bay Blvd. | USA | |
| Anne | Dodsworth | Sales Representative | (71) 555-5598 | [email protected] | 4726 - 11th Ave. N.E. | UK |
When expanding or collapsing the detail content, the Blazor DataGrid Detail Template feature displays additional information about a specific row. With the required content, the DetailTemplate should be wrapped around the GridTemplates component. This expanded row is used to visualizes the statistical data hierarchy.
Frozen columns are supported in the Detail template feature. In this demo, you can dynamically enable or disable the frozen column feature using a checkbox.
The row displays Employee information and an image. Sales and report details are also displayed in the detail row within the Tab component.
More information about the Detail template feature can be found in the documentation section.