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

This sample demonstrates the Grid component's detail template feature. It lets user click the expand button in each Grid row to displays 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 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 name. In each employee row with a details view, while expanding the details, You can see the sprint report of that employee. In the details row with two tabs. first tab contains Syncfusion Kanban component is used to list of assigned task and it current statuses and second tab contains Syncfusion Chart Component and it is used to display the burndown chart of employee task estimated time vs actual spend time.

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


For more details on the row template feature, refer to this documentation section.

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