• Material 3
  • Fluent
  • Bootstrap v5
  • Tailwind CSS
  • High Contrast
Theme Selection
Theme Modes
Mode Selection
*Translated by Google Translator.

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

This sample demonstrates how to export detail grids. In this sample, you can export the detail grid by clicking the corresponding export button on the grid's toolbar.


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

In this demo, Employees' information is displayed in the detail row.

Data Grid supports client-side exporting to export data to the Excel and PDF formats.

In this demo, the Employees' information can be exported using the exportDetailTemplate event where each cell can be customized. The ExcelExport and PdfExport items are defined in the toolbar of the Grid. Actions are defined in the toolbarClick event to export Grid data using excelExport and pdfExport methods with the hierarchyExportMode set to All.

The detail grids' export options can be changed by using the hierarchyExportMode property.

The detail template allows you to export the grid with the following options,

  • Expanded : Exports only the visible detail rows in an expanded state.
  • All : Exports all the detail rows in an expanded state.
  • None : Exports the detail rows in a collapsed state.

More information on the exporting configuration can be found in this Excel-export and PDF-export documentation sections.

Transform your ASP.NET MVC web apps today with Syncfusion ASP.NET MVC components
85+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing