Merge pull request #2997 from IgniteUI/mch-export-switch

feat(grid): adding switch to toggle multi-column header export

Author: hanastasov

src/app/grid/multi-column-headers-export/multi-column-headers-export.component.html

@@ -2,9 +2,10 @@
     <igx-grid igxPreventDocumentScroll #grid height="750px" [data]="data" [moving]="true" displayDensity="compact" [allowFiltering]="true">
         <igx-grid-toolbar>
             <igx-grid-toolbar-actions>
+                <igx-switch [(ngModel)]="exportHeaders">Export multi-column headers</igx-switch>
                 <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
                 <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
-                <igx-grid-toolbar-exporter [exportCSV]="false" [exportExcel]="true">
+                <igx-grid-toolbar-exporter [exportCSV]="false" [exportExcel]="true" (exportStarted)="exportStarted($event)">
                 </igx-grid-toolbar-exporter>
             </igx-grid-toolbar-actions>
         </igx-grid-toolbar>

src/app/grid/multi-column-headers-export/multi-column-headers-export.component.ts

@@ -1,5 +1,5 @@
 import { Component, ViewChild } from '@angular/core';
-import { IgxGridComponent } from 'igniteui-angular';
+import { IgxExporterEvent, IgxGridComponent } from 'igniteui-angular';
 import { DATA } from '../../data/customers';
 
 @Component({
@@ -12,4 +12,9 @@ export class GridMultiColumnHeadersExportComponent {
     @ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })
     public grid: IgxGridComponent;
     public data = DATA;
+    public exportHeaders = true;
+
+    public exportStarted(args: IgxExporterEvent) {
+        args.options.ignoreMultiColumnHeaders = !this.exportHeaders;
+    }
 }

src/app/hierarchical-grid/hierarchical-grid-multi-column-headers-export/hierarchical-grid-multi-column-export.component.html

@@ -2,9 +2,10 @@
     <igx-hierarchical-grid igxPreventDocumentScroll  #hierarchicalGrid [data]="localdata" [moving]="true" [height]="'740px'" [width]="'100%'" displayDensity="compact" [allowFiltering]="true">
         <igx-grid-toolbar>
             <igx-grid-toolbar-actions>
+                <igx-switch [(ngModel)]="exportHeaders">Export multi-column headers</igx-switch>
                 <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
                 <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
-                <igx-grid-toolbar-exporter [exportCSV]="false" [exportExcel]="true">
+                <igx-grid-toolbar-exporter [exportCSV]="false" [exportExcel]="true" (exportStarted)="exportStarted($event)">
                 </igx-grid-toolbar-exporter>
             </igx-grid-toolbar-actions>
         </igx-grid-toolbar>

src/app/hierarchical-grid/hierarchical-grid-multi-column-headers-export/hierarchical-grid-multi-column-export.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { IgxExporterEvent } from 'igniteui-angular';
 import { HIERARCHICAL_DATA } from '../../data/hierarchical-data';
 
 @Component({
@@ -9,6 +10,11 @@ import { HIERARCHICAL_DATA } from '../../data/hierarchical-data';
 
 export class HGridMultiColumnHeadersExportComponent implements OnInit {
     public localdata = [];
+    public exportHeaders = true;
+
+    public exportStarted(args: IgxExporterEvent) {
+        args.options.ignoreMultiColumnHeaders = !this.exportHeaders;
+    }
 
     public ngOnInit(): void {
         this.localdata = HIERARCHICAL_DATA;

src/app/tree-grid/tree-grid-multi-column-headers-export/tree-grid-multi-column-headers-export.component.html

@@ -3,9 +3,10 @@
         displayDensity="compact" [allowFiltering]="true" width="100%">
         <igx-grid-toolbar>
             <igx-grid-toolbar-actions>
+                <igx-switch [(ngModel)]="exportHeaders">Export multi-column headers</igx-switch>
                 <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
                 <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
-                <igx-grid-toolbar-exporter [exportCSV]="false" [exportExcel]="true">
+                <igx-grid-toolbar-exporter [exportCSV]="false" [exportExcel]="true" (exportStarted)="exportStarted($event)">
                 </igx-grid-toolbar-exporter>
             </igx-grid-toolbar-actions>
         </igx-grid-toolbar>

src/app/tree-grid/tree-grid-multi-column-headers-export/tree-grid-multi-column-headers-export.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { IgxExporterEvent } from 'igniteui-angular';
 import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed';
 
 @Component({
@@ -9,4 +10,9 @@ import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detaile
 export class TreeGridMultiColumnHeadersExportComponent {
     public data = generateEmployeeDetailedFlatData();
     public selectionMode = 'none';
+    public exportHeaders = true;
+
+    public exportStarted(args: IgxExporterEvent) {
+        args.options.ignoreMultiColumnHeaders = !this.exportHeaders;
+    }
 }