DetailTemplate

  • Material 3
  • Fluent
  • Fluent 2
  • Bootstrap 5
  • Tailwind CSS
  • High Contrast
  • Fluent 2 High Contrast
Preferences
Mode Selection
Touch
Mouse
Theme Selection
Theme Mode
Localization
*Translated by Google Translator.
Currency

Example of Detail Template in ASP.NET Core Data Grid Control

This sample demonstrates the Grid component's with the detail template feature. It lets users click the expand button in each grid row to display detailed information about that row.

DEMO
SOURCE

This additional information can be shown or hidden by clicking on the expand or collapse button. The detailTemplate property accepts either a string or HTML element`s ID value, which will be used as the template for the detail row.

In this demonstration, the parent row provides information about employees name, ID, team and reporter names. In each employee row with a details view, when expanding the details, you can see the sprint report of that employee. In the details row with two tabs, the first tab contains Syncfusion Kanban component used to list assigned tasks and their current statuses, and the second tab contains Syncfusion Chart Component used to display the burndown chart of employee task estimated time vs actual spend time.

The template expression should be provided inside ${...} interpolation syntax.


Transform your ASP.NET Core web apps today with Syncfusion® ASP.NET Core components
85+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE
opens in a new tab