Example of undefined in React Grid Component


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.

More Details...


The detail row template provides additional information about a data row which can 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.

Injecting Module

Grid features are segregated into individual feature-wise modules. To use the detail template, PdfExport and ExcelExport Grid features, inject DetailRow, PdfExport, ExcelExport modules into the services.

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