Expand All

Basics

Formatting

Context menu

Drag n Drop

Spreadsheet

Tabs

Export

Layouts

RTL Layout

Rows

Paging

Big data

Columns

Cells

Inline editing

Row Grouping

Pivot

Sorting

Filter

Selections

Nesting / Row details

Tree grid

Charts

Angular

React React

Vue Vue

Knockout

;

Export of Main and detail / nested grids together to csv, html, spreadsheet & pdf

This example demonstrates

  • combined export of main and multiple nested grids to a single worksheet in a spreadsheet. Since v9.0.0, it's also possible to export them in a single csv, html or pdf file.
  • calling of methods on details grids. In this example exportData method is called on the details grids.

This example uses 2 alternative ways of export:

  • Quick Export: It includes unprocessed data from detail grids without creating instance of the detail grids. It's fast.
  • Detailed Export: It includes processed data from detail grids after creating instance of all detail grids. Initial run is slow but subsequent runs are fast as the instances of detail grids are cached in memory.

Xlsx

We get the workbook from main grid by using grid.exportData({ format: 'wb' }) and iterate over its rows to get the corresponding detail grid data. We combine and save the rows from main grid and detail grid in a new rows array.

  • In case of full details of detail grid via custom exportFullXlsx function, we create the detail grid if not created yet, export its data in 'wb' format and combine it with that of main grid
  • In other case i.e., exportXlsx function, we just get the detailGrid Model of the detail grids without creating them and gather data directly from colModel and dataModel.data of detail grid
  • We finally export the workbook to xlsx

Csv, Html, Pdf

We get the js object from main grid by using grid.exportData({ format: 'js' }) and iterate over its rows to get the corresponding detail grid data. We combine and save the rows from main grid and detail grid in a new rows array.

  • In case of full details of detail grid via custom exportFulljs function, we create the detail grid if not created yet, export its data in 'js' format and combine it with that of main grid
  • In other case i.e., exportjs function, we just get the detailGrid Model of the detail grids without creating them and gather data directly from colModel and dataModel.data of detail grid
  • We finally export the js object to csv, html or pdf

Limitation: This example assumes local data of nested grids and doesn't work in case of lazy loading of nested grids.