This sample demonstrates the client-side exporting of the Tree Grid, which allows you to export its data to the Excel, Pdf and CSV formats. Use the toolbar buttons to export Tree Grid data to desired format.
By using the Persist collapsed state checkbox we can persist the Expand/Collpase state of Tree Grid in exported document
Task ID | Task Name | Start Date | End Date | Duration | Progress | Priority |
---|---|---|---|---|---|---|
1 | Planning | 2/3/2017 | 2/7/2017 | 5 | 100 | Normal |
2 | Plan timeline | 2/3/2017 | 2/7/2017 | 5 | 100 | Normal |
3 | Plan budget | 2/3/2017 | 2/7/2017 | 5 | 100 | Low |
4 | Allocate resources | 2/3/2017 | 2/7/2017 | 5 | 100 | Critical |
5 | Planning complete | 2/7/2017 | 2/7/2017 | 0 | 0 | Low |
6 | Design | 2/10/2017 | 2/14/2017 | 3 | 86 | High |
7 | Software Specification | 2/10/2017 | 2/12/2017 | 3 | 60 | Normal |
8 | Develop prototype | 2/10/2017 | 2/12/2017 | 3 | 100 | Critical |
9 | Get approval from customer | 2/13/2017 | 2/14/2017 | 2 | 100 | Low |
10 | Design Documentation | 2/13/2017 | 2/14/2017 | 2 | 100 | High |
11 | Design complete | 2/14/2017 | 2/14/2017 | 0 | 0 | Normal |
12 | Implementation Phase | 2/17/2017 | 2/27/2017 | 11 | 66 | Normal |
13 | Phase 1 | 2/17/2017 | 2/27/2017 | 11 | 50 | High |
14 | Implementation Module 1 | 2/17/2017 | 2/27/2017 | 11 | 10 | Normal |
15 | Development Task 1 | 2/17/2017 | 2/19/2017 | 3 | 50 | High |
16 | Development Task 2 | 2/17/2017 | 2/19/2017 | 3 | 50 | Low |
17 | Testing | 2/20/2017 | 2/21/2017 | 2 | 0 | Normal |
18 | Bug fix | 2/24/2017 | 2/25/2017 | 2 | 0 | Critical |
19 | Customer review meeting | 2/26/2017 | 2/27/2017 | 2 | 0 | High |
20 | Phase 1 complete | 2/27/2017 | 2/27/2017 | 0 | 50 | Low |
21 | Phase 2 | 2/17/2017 | 2/28/2017 | 12 | 60 | High |
22 | Implementation Module 2 | 2/17/2017 | 2/28/2017 | 12 | 90 | Critical |
23 | Development Task 1 | 2/17/2017 | 2/20/2017 | 4 | 50 | Normal |
24 | Development Task 2 | 2/17/2017 | 2/20/2017 | 4 | 50 | Critical |
25 | Testing | 2/21/2017 | 2/24/2017 | 2 | 0 | High |
26 | Bug fix | 2/25/2017 | 2/26/2017 | 2 | 0 | Low |
27 | Customer review meeting | 2/27/2017 | 2/28/2017 | 2 | 0 | Critical |
28 | Phase 2 complete | 2/28/2017 | 2/28/2017 | 0 | 50 | Normal |
29 | Phase 3 | 2/17/2017 | 2/27/2017 | 11 | 30 | Normal |
30 | Implementation Module 3 | 2/17/2017 | 2/27/2017 | 11 | 60 | High |
31 | Development Task 1 | 2/17/2017 | 2/19/2017 | 3 | 50 | Low |
32 | Development Task 2 | 2/17/2017 | 2/19/2017 | 3 | 50 | Normal |
33 | Testing | 2/20/2017 | 2/21/2017 | 2 | 0 | Critical |
34 | Bug fix | 2/24/2017 | 2/25/2017 | 2 | 0 | High |
35 | Customer review meeting | 2/26/2017 | 2/27/2017 | 2 | 0 | Normal |
36 | Phase 3 complete | 2/27/2017 | 2/27/2017 | 0 | 50 | Critical |
Tree Grid supports client-side exporting which allows you to export its data to the Excel, Pdf and CSV formats.
In this demo, for the toolbar items of exporting, we have defined actions in toolbarClick
event to export the Tree Grid data using the excelExport
, pdfExport
and csvExport
methods.
Injecting Module:
Tree Grid component features are segregated into individual feature-wise modules. To use exporting feature, we need to inject ExcelExportService
and PdfExportService
into the @NgModule.providers
section.
More information on the Pdf exporting and Excel exporting can be found in documentation section