diff --git a/live-editing/configs/GridConfigGenerator.ts b/live-editing/configs/GridConfigGenerator.ts
index b77364565f..0d0a13ba04 100644
--- a/live-editing/configs/GridConfigGenerator.ts
+++ b/live-editing/configs/GridConfigGenerator.ts
@@ -116,7 +116,8 @@ import { RemoteServiceVirt } from "../../src/app/grid/services/remoteService";
 import { AppModuleConfig } from "./core/AppModuleConfig";
 import { Config } from "./core/Config";
 import { IConfigGenerator } from "./core/IConfigGenerator";
-import {GridSortingIndicatorsComponent} from '../../src/app/grid/grid-sorting-indicators/grid-sorting-indicators.component'
+import { GridSortingIndicatorsComponent } from '../../src/app/grid/grid-sorting-indicators/grid-sorting-indicators.component';
+import { GridExportVisualizationComponent } from '../../src/app/grid/grid-export-visualization/grid-export-visualization.component';
 export class GridConfigGenerator implements IConfigGenerator {
     public generateConfigs(): Config[] {
         const configs = new Array<Config>();
@@ -191,7 +192,7 @@ export class GridConfigGenerator implements IConfigGenerator {
                 ngDeclarations: [GridGroupBySummaryStylingSampleComponent],
                 ngImports: [IgxPreventDocumentScrollModule, IgxButtonModule, IgxButtonGroupModule, IgxGridModule,
                     IgxIconModule, IgxBadgeModule]
-                })
+            })
         }));
 
         configs.push(new Config({
@@ -731,7 +732,7 @@ export class GridConfigGenerator implements IConfigGenerator {
         configs.push(new Config({
             component: GridExcelStyleFilteringLoadOnDemandComponent,
             additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts", "/src/app/grid/grid-excel-style-filtering-load-on-demand/remoteValues.service.ts",
-                              "/src/app/grid/grid-excel-style-filtering-load-on-demand/employees.ts"],
+                "/src/app/grid/grid-excel-style-filtering-load-on-demand/employees.ts"],
             appModuleConfig: new AppModuleConfig({
                 imports: [GridExcelStyleFilteringLoadOnDemandComponent, IgxGridModule, RemoteValuesService, IgxPreventDocumentScrollModule],
                 ngDeclarations: [GridExcelStyleFilteringLoadOnDemandComponent],
@@ -744,7 +745,7 @@ export class GridConfigGenerator implements IConfigGenerator {
             component: ExcelStyleFilteringStyleComponent,
             additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts", "/src/app/data/nwindData.ts"],
             appModuleConfig: new AppModuleConfig({
-                imports: [ExcelStyleFilteringStyleComponent, IgxGridModule , IgxPreventDocumentScrollModule],
+                imports: [ExcelStyleFilteringStyleComponent, IgxGridModule, IgxPreventDocumentScrollModule],
                 ngDeclarations: [ExcelStyleFilteringStyleComponent],
                 ngImports: [IgxPreventDocumentScrollModule, IgxGridModule]
             })
@@ -754,7 +755,7 @@ export class GridConfigGenerator implements IConfigGenerator {
             component: GridExternalExcelStyleFilteringComponent,
             additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts", "/src/app/data/nwindData.ts"],
             appModuleConfig: new AppModuleConfig({
-                imports: [GridExternalExcelStyleFilteringComponent, IgxGridModule , IgxPreventDocumentScrollModule],
+                imports: [GridExternalExcelStyleFilteringComponent, IgxGridModule, IgxPreventDocumentScrollModule],
                 ngDeclarations: [GridExternalExcelStyleFilteringComponent],
                 ngImports: [IgxPreventDocumentScrollModule, IgxGridModule]
             })
@@ -764,7 +765,7 @@ export class GridConfigGenerator implements IConfigGenerator {
             component: GridExternalAdvancedFilteringComponent,
             additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts", "/src/app/data/nwindData.ts"],
             appModuleConfig: new AppModuleConfig({
-                imports: [GridExternalAdvancedFilteringComponent, IgxGridModule , IgxPreventDocumentScrollModule],
+                imports: [GridExternalAdvancedFilteringComponent, IgxGridModule, IgxPreventDocumentScrollModule],
                 ngDeclarations: [GridExternalAdvancedFilteringComponent],
                 ngImports: [IgxPreventDocumentScrollModule, IgxGridModule]
             })
@@ -1045,7 +1046,7 @@ export class GridConfigGenerator implements IConfigGenerator {
             component: GridAdvancedFilteringStyleComponent,
             additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts", "/src/app/data/nwindData.ts"],
             appModuleConfig: new AppModuleConfig({
-                imports: [GridAdvancedFilteringStyleComponent, IgxGridModule , IgxPreventDocumentScrollModule],
+                imports: [GridAdvancedFilteringStyleComponent, IgxGridModule, IgxPreventDocumentScrollModule],
                 ngDeclarations: [GridAdvancedFilteringStyleComponent],
                 ngImports: [IgxPreventDocumentScrollModule, IgxGridModule]
             })
@@ -1067,7 +1068,7 @@ export class GridConfigGenerator implements IConfigGenerator {
             component: GridAllDataSummaryComponent,
             additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts", "/src/app/data/nwindData.ts"],
             appModuleConfig: new AppModuleConfig({
-                imports: [GridAllDataSummaryComponent, IgxGridModule , IgxPreventDocumentScrollModule],
+                imports: [GridAllDataSummaryComponent, IgxGridModule, IgxPreventDocumentScrollModule],
                 ngDeclarations: [GridAllDataSummaryComponent],
                 ngImports: [IgxPreventDocumentScrollModule, IgxGridModule]
             })
@@ -1264,6 +1265,17 @@ export class GridConfigGenerator implements IConfigGenerator {
             })
         }));
 
+        configs.push(new Config({
+            component: GridExportVisualizationComponent,
+            additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts", "/src/app/data/utils.ts", "/src/app/data/nwindData.ts"],
+            appModuleConfig: new AppModuleConfig({
+                imports: [GridExportVisualizationComponent, IgxGridModule, IgxPreventDocumentScrollModule, IgxExcelExporterService, IgxCsvExporterService],
+                ngDeclarations: [GridExportVisualizationComponent],
+                ngImports: [IgxPreventDocumentScrollModule, IgxGridModule],
+                ngProviders: [IgxExcelExporterService, IgxCsvExporterService]
+            })
+        }));
+
         return configs;
     }
 }
diff --git a/live-editing/configs/HierarchicalGridConfigGenerator.ts b/live-editing/configs/HierarchicalGridConfigGenerator.ts
index b3cf8c6285..e26a3d1328 100644
--- a/live-editing/configs/HierarchicalGridConfigGenerator.ts
+++ b/live-editing/configs/HierarchicalGridConfigGenerator.ts
@@ -53,7 +53,7 @@ import { HGridDragSampleComponent } from "../../src/app/hierarchical-grid/hierar
 import { HGridRowEditStyleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-row-edit-style/hierarchical-grid-row-edit-style.component";
 import { HGridRowEditingSampleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-row-editing/hierarchical-grid-row-editing.component";
 import { HGridRowPinningExtraColumnSampleComponent } from '../../src/app/hierarchical-grid/hierarchical-grid-row-pinning-extra-column/hierarchical-grid-row-pinning-extra-column.component';
-import { HGridRowPinningStylingSampleComponent } from'../../src/app/hierarchical-grid/hierarchical-grid-row-pinning-styling/hierarchical-grid-row-pinning-styling.component';
+import { HGridRowPinningStylingSampleComponent } from '../../src/app/hierarchical-grid/hierarchical-grid-row-pinning-styling/hierarchical-grid-row-pinning-styling.component';
 import { HGridRowPinningSampleComponent } from '../../src/app/hierarchical-grid/hierarchical-grid-row-pinning/hierarchical-grid-row-pinning.component';
 import { HGridRowReorderComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-row-reorder/hierarchical-grid-row-reorder.component";
 import { HierarchicalGridRightPinningSampleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-sample-right-pinning/hierarchical-grid-right-pinning.component";
@@ -76,7 +76,6 @@ import { IConfigGenerator } from "./core/IConfigGenerator";
 import { HGridSaveStateComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-save-state/hGrid-state.component";
 import { HGridAboutComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-save-state/about.component";
 import { HierarchicalGridExternalOutletComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-external-outlet/hierarchical-grid-external-outlet-sample.component";
-
 export class HierarchicalGridConfigGenerator implements IConfigGenerator {
     public generateConfigs(): Config[] {
         const configs = new Array<Config>();
@@ -278,7 +277,7 @@ export class HierarchicalGridConfigGenerator implements IConfigGenerator {
             additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts", "/src/app/hierarchical-grid/data.ts"],
             appModuleConfig: new AppModuleConfig({
                 imports: [IgxHierarchicalGridModule, HGridSelectionSampleComponent, IgxSwitchModule,
-                IgxSnackbarModule, IgxButtonGroupModule, IgxPreventDocumentScrollModule],
+                    IgxSnackbarModule, IgxButtonGroupModule, IgxPreventDocumentScrollModule],
                 ngDeclarations: [HGridSelectionSampleComponent],
                 ngImports: [IgxPreventDocumentScrollModule, IgxHierarchicalGridModule, IgxSwitchModule, IgxSnackbarModule, IgxButtonGroupModule]
             }),
@@ -501,7 +500,7 @@ export class HierarchicalGridConfigGenerator implements IConfigGenerator {
         // Hierarchical Grid Excel Style Filtering Load On Demand Sample
         configs.push(new Config({
             additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts", "/src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-load-on-demand/remoteValues.service.ts",
-                              "/src/app/hierarchical-grid/data.ts"],
+                "/src/app/hierarchical-grid/data.ts"],
             appModuleConfig: new AppModuleConfig({
                 imports: [IgxHierarchicalGridModule, HierarchicalGridExcelStyleFilteringLoadOnDemandComponent, RemoteValuesService, IgxPreventDocumentScrollModule],
                 ngDeclarations: [HierarchicalGridExcelStyleFilteringLoadOnDemandComponent],
diff --git a/live-editing/configs/TreeGridConfigGenerator.ts b/live-editing/configs/TreeGridConfigGenerator.ts
index b149ad82bd..4eeff3ebfb 100644
--- a/live-editing/configs/TreeGridConfigGenerator.ts
+++ b/live-editing/configs/TreeGridConfigGenerator.ts
@@ -87,6 +87,7 @@ import { TreeGridExternalOutletComponent } from "../../src/app/tree-grid/tree-gr
 import { AppModuleConfig } from "./core/AppModuleConfig";
 import { Config } from "./core/Config";
 import { IConfigGenerator } from "./core/IConfigGenerator";
+import { TreeGridExportVisualizationComponent } from "../../src/app/tree-grid/tree-grid-export-visualization/tree-grid-export-visualization.component";
 
 export class TreeGridConfigGenerator implements IConfigGenerator {
     public generateConfigs(): Config[] {
@@ -1022,6 +1023,19 @@ export class TreeGridConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: "/tree-grid/"
         }));
 
+        configs.push(new Config({
+            additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts", "/src/app/tree-grid/data/foods.ts"],
+            appModuleConfig: new AppModuleConfig({
+                imports: [IgxPreventDocumentScrollModule, IgxTreeGridModule, TreeGridExportVisualizationComponent, IgxToggleModule,
+                    IgxExcelExporterService, IgxCsvExporterService],
+                ngDeclarations: [TreeGridExportVisualizationComponent],
+                ngImports: [IgxPreventDocumentScrollModule, IgxTreeGridModule, IgxToggleModule],
+                ngProviders: [IgxExcelExporterService, IgxCsvExporterService]
+            }),
+            component: TreeGridExportVisualizationComponent,
+            shortenComponentPathBy: "/tree-grid/"
+        }));
+
         return configs;
     }
 }
diff --git a/package-lock.json b/package-lock.json
index 973f2be5bb..8fa7b839fc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7485,9 +7485,9 @@
       "dev": true
     },
     "igniteui-angular": {
-      "version": "10.1.2",
-      "resolved": "https://registry.npmjs.org/igniteui-angular/-/igniteui-angular-10.1.2.tgz",
-      "integrity": "sha512-9e7dQq4R/a1KYtOi2jZuYcN6klASB2c3UgRYMMWybLWiOsak/cxKz2g9qvXF1sPa0TIZg8tQExCe9iLMxp2QLg==",
+      "version": "10.2.0-alpha.0",
+      "resolved": "https://registry.npmjs.org/igniteui-angular/-/igniteui-angular-10.2.0-alpha.0.tgz",
+      "integrity": "sha512-1ZZB0hwKDZTAVh8X6Vz3FHYtbNF7anG2vc8IHqtHCiNrl3tlWEOFM25Z+6bqH4icxCowPhbNYyJf+B2Lf8xMRg==",
       "requires": {
         "@types/hammerjs": "^2.0.36",
         "hammerjs": "^2.0.8",
diff --git a/package.json b/package.json
index a3844a5265..a39a2dc8b9 100644
--- a/package.json
+++ b/package.json
@@ -57,7 +57,7 @@
     "domino": "^2.1.4",
     "file-saver": "^2.0.2",
     "hammerjs": "^2.0.8",
-    "igniteui-angular": "10.1.2",
+    "igniteui-angular": "10.2.0-alpha.0",
     "igniteui-angular-charts": "^9.1.2",
     "igniteui-angular-core": "^9.1.2",
     "igniteui-angular-excel": "^9.1.2",
diff --git a/src/app/grid/grid-export-visualization/grid-export-visualization.component.html b/src/app/grid/grid-export-visualization/grid-export-visualization.component.html
new file mode 100644
index 0000000000..f936cc1b0f
--- /dev/null
+++ b/src/app/grid/grid-export-visualization/grid-export-visualization.component.html
@@ -0,0 +1,23 @@
+<div class="grid__wrapper">
+    <igx-grid igxPreventDocumentScroll [data]="localData" [autoGenerate]="false" height="350px" width="100%" [showToolbar]="true" exportText="Export"
+    [exportExcel]="true" exportExcelText="Export to Excel" [exportCsv]="true" exportCsvText="Export to CSV">
+        <igx-column field="ProductName" header="Product Name" [sortable]="true" [movable]="true" [dataType]="'string'">
+        </igx-column>
+        <igx-column field="QuantityPerUnit" header="Quantity Per Unit" [sortable]="true" [movable]="true" [dataType]="'string'">
+        </igx-column>
+        <igx-column field="UnitPrice" header="Unit Price" [sortable]="true" [movable]="true" dataType="number">
+            <ng-template igxCell let-cell="cell" let-val let-row>
+                {{+val | currency}}
+            </ng-template>
+        </igx-column>
+        <igx-column field="OrderDate" header="Order Date" [sortable]="true" [movable]="true" [dataType]="'date'" [formatter]="formatDate">
+        </igx-column>
+        <igx-column field="Discontinued" header="Discontinued" [sortable]="true" [movable]="true" [dataType]="'boolean'">
+            <ng-template igxCell let-cell="cell" let-val>
+                <img *ngIf="val" src="assets/images/grid/active.png" title="Continued" alt="Continued" />
+                <img *ngIf="!val" src="assets/images/grid/expired.png" title="Discontinued" alt="Discontinued" />
+            </ng-template>
+        </igx-column>
+    </igx-grid>
+
+</div>
diff --git a/src/app/grid/grid-export-visualization/grid-export-visualization.component.scss b/src/app/grid/grid-export-visualization/grid-export-visualization.component.scss
new file mode 100644
index 0000000000..ee7c9cd987
--- /dev/null
+++ b/src/app/grid/grid-export-visualization/grid-export-visualization.component.scss
@@ -0,0 +1,3 @@
+.grid__wrapper {
+    margin: 10px;
+}
diff --git a/src/app/grid/grid-export-visualization/grid-export-visualization.component.ts b/src/app/grid/grid-export-visualization/grid-export-visualization.component.ts
new file mode 100644
index 0000000000..d118211504
--- /dev/null
+++ b/src/app/grid/grid-export-visualization/grid-export-visualization.component.ts
@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+import { DATA } from '../../data/nwindData';
+
+@Component({
+    selector: 'app-grid-export-visualization',
+    templateUrl: './grid-export-visualization.component.html',
+    styleUrls: ['./grid-export-visualization.component.scss']
+})
+export class GridExportVisualizationComponent {
+    public localData = [];
+    constructor() {
+        for (let i = 0; i < 1000; i++) {
+            for (let c = 0; c < DATA.length; c++) {
+                this.localData.push(DATA[c]);
+            }
+        }
+    }
+
+    public formatDate(val) {
+        if (val !== "Select All") {
+            return new Intl.DateTimeFormat("en-US").format(val);
+        } else {
+            return val;
+        }
+    }
+}
diff --git a/src/app/grid/grid-routes-data.ts b/src/app/grid/grid-routes-data.ts
index f98b78bed2..5a66180037 100644
--- a/src/app/grid/grid-routes-data.ts
+++ b/src/app/grid/grid-routes-data.ts
@@ -103,5 +103,6 @@ export const gridsRoutesData = {
     "remote-paging-default-template": { displayName: "Remote Paging with default template", parentName: "Grid" },
     "grid-sample-5": { displayName: "Grid Infinite Scroll", parentName: "Grid" },
     "remote-paging-batch-editing": {displayName: "Remote paging with batch editing", parentName: "Grid"},
-    "grid-sorting-indicators": {displayName: "Grid Sorting Indicators", parentName: "Grid"}
+    "grid-sorting-indicators": {displayName: "Grid Sorting Indicators", parentName: "Grid"},
+    "exporting-visualization": {displayName: "Exporting Visualization", parentName: "Grid"}
 };
diff --git a/src/app/grid/grids-routing.module.ts b/src/app/grid/grids-routing.module.ts
index f94a1dcacb..0a654b993e 100644
--- a/src/app/grid/grids-routing.module.ts
+++ b/src/app/grid/grids-routing.module.ts
@@ -108,6 +108,7 @@ import {
     GridMultiColumnHeadersStylingComponent
 } from "./multi-column-headers-styling/multi-column-headers-styling.component";
 import { GridSortingIndicatorsComponent } from './grid-sorting-indicators/grid-sorting-indicators.component';
+import { GridExportVisualizationComponent } from "./grid-export-visualization/grid-export-visualization.component";
 // tslint:enable:max-line-length
 
 export const gridsRoutes: Routes = [
@@ -620,6 +621,11 @@ export const gridsRoutes: Routes = [
         component: GridSortingIndicatorsComponent,
         data: gridsRoutesData["grid-sorting-indicators"],
         path: "grid-sorting-indicators"
+    },
+    {
+        component: GridExportVisualizationComponent,
+        data: gridsRoutesData["exporting-visualization"],
+        path: "exporting-visualization"
     }
 ];
 
diff --git a/src/app/grid/grids.module.ts b/src/app/grid/grids.module.ts
index e05fbdd149..f23280e775 100644
--- a/src/app/grid/grids.module.ts
+++ b/src/app/grid/grids.module.ts
@@ -117,6 +117,7 @@ import { GridMultiColumnHeaderTemplateComponent } from "./multi-column-header-te
 import { GridMultiColumnHeadersStylingComponent } from "./multi-column-headers-styling/multi-column-headers-styling.component";
 import { GridMultiColumnHeadersComponent } from "./multi-column-headers/multi-column-headers";
 import { GridSortingIndicatorsComponent } from './grid-sorting-indicators/grid-sorting-indicators.component';
+import { GridExportVisualizationComponent } from './grid-export-visualization/grid-export-visualization.component';
 
 @NgModule({
     declarations: [
@@ -224,7 +225,8 @@ import { GridSortingIndicatorsComponent } from './grid-sorting-indicators/grid-s
         GridKeyboardnavGuide,
         RemotePagingDefaultTemplateComponent,
         RemotePagingBatchEditingComponent,
-        GridSortingIndicatorsComponent
+        GridSortingIndicatorsComponent,
+        GridExportVisualizationComponent
     ],
     imports: [
         CommonModule,
diff --git a/src/app/hierarchical-grid/hierarchical-grid-routing.module.ts b/src/app/hierarchical-grid/hierarchical-grid-routing.module.ts
index 2f49cf12c2..6a434fc46c 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-routing.module.ts
+++ b/src/app/hierarchical-grid/hierarchical-grid-routing.module.ts
@@ -83,7 +83,7 @@ import { HGridToolbarCustomSampleComponent } from "./hierarchical-grid-toolbar/h
 import { HGridToolbarOptionsSampleComponent } from "./hierarchical-grid-toolbar/hierarchical-grid-toolbar-options.component";
 import { HGridToolbarTitleSampleComponent } from "./hierarchical-grid-toolbar/hierarchical-grid-toolbar-title.component";
 import { HGridAboutComponent } from "./hierarchical-grid-save-state/about.component";
-import { HierarchicalGridExternalOutletComponent } from "./hierarchical-grid-external-outlet/hierarchical-grid-external-outlet-sample.component"
+import { HierarchicalGridExternalOutletComponent } from "./hierarchical-grid-external-outlet/hierarchical-grid-external-outlet-sample.component";
 
 export const hierarchicalGridRoutes: Routes = [
     {
diff --git a/src/app/tree-grid/tree-grid-export-visualization/tree-grid-export-visualization.component.html b/src/app/tree-grid/tree-grid-export-visualization/tree-grid-export-visualization.component.html
new file mode 100644
index 0000000000..ff80ba8c74
--- /dev/null
+++ b/src/app/tree-grid/tree-grid-export-visualization/tree-grid-export-visualization.component.html
@@ -0,0 +1,18 @@
+<div class="grid__wrapper">
+    <igx-tree-grid igxPreventDocumentScroll [data]="localData" [autoGenerate]="false" primaryKey="ID"
+        foreignKey="ParentID" height="350px" width="100%" primaryKey="ID"
+        [showToolbar]="true" exportText="Export" [exportExcel]="true" exportExcelText="Export To Excel"
+        [exportCsv]="true" exportCsvText="Export To CSV">
+        <igx-column field="ID" header="Product ID" [dataType]="'string'">
+        </igx-column>
+        <igx-column field="Name" header="Product Name" [dataType]="'string'">
+        </igx-column>
+        <igx-column field="UnitPrice" header="Unit Price" dataType="number">
+            <ng-template igxCell let-cell="cell" let-val let-row>
+                {{+val | currency}}
+            </ng-template>
+        </igx-column>
+        <igx-column field="AddedDate" header="Added Date" [dataType]="'date'">
+        </igx-column>
+    </igx-tree-grid>
+</div>
diff --git a/src/app/tree-grid/tree-grid-export-visualization/tree-grid-export-visualization.component.scss b/src/app/tree-grid/tree-grid-export-visualization/tree-grid-export-visualization.component.scss
new file mode 100644
index 0000000000..ee7c9cd987
--- /dev/null
+++ b/src/app/tree-grid/tree-grid-export-visualization/tree-grid-export-visualization.component.scss
@@ -0,0 +1,3 @@
+.grid__wrapper {
+    margin: 10px;
+}
diff --git a/src/app/tree-grid/tree-grid-export-visualization/tree-grid-export-visualization.component.ts b/src/app/tree-grid/tree-grid-export-visualization/tree-grid-export-visualization.component.ts
new file mode 100644
index 0000000000..4ad99b23d6
--- /dev/null
+++ b/src/app/tree-grid/tree-grid-export-visualization/tree-grid-export-visualization.component.ts
@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+import { FOODS_DATA } from '../data/foods';
+
+@Component({
+    selector: 'app-tree-grid-export-visualization',
+    templateUrl: './tree-grid-export-visualization.component.html',
+    styleUrls: ['./tree-grid-export-visualization.component.scss']
+})
+export class TreeGridExportVisualizationComponent {
+    private data = FOODS_DATA();
+    public localData = [];
+    constructor() {
+        for (let i = 0; i < 15000; i += 3) {
+            for (let c = 0; c < this.data.length; c++) {
+                this.localData.push(this.data[c]);
+            }
+        }
+    }
+}
diff --git a/src/app/tree-grid/tree-grid-routes-data.ts b/src/app/tree-grid/tree-grid-routes-data.ts
index 32bf24d275..f501ef1608 100644
--- a/src/app/tree-grid/tree-grid-routes-data.ts
+++ b/src/app/tree-grid/tree-grid-routes-data.ts
@@ -95,15 +95,16 @@ export const treeGridRoutesData = {
     "treegrid-conditional-row-selectors": { displayName: "TreeGrid Conditional Row Selectors", parentName: "TreeGrid" },
     "treegrid-style": { displayName: "TreeGrid Style", parentName: "TreeGrid" },
     "tree-grid-cell-cellStyling": { displayName: "TreeGrid Conditional Cell Styling", parentName: "TreeGrid" },
-    "tree-grid-collapsible-groups": {displayName: "TreeGrid Collapsible Column Groups", parentName: "TreeGrid"},
+    "tree-grid-collapsible-groups": { displayName: "TreeGrid Collapsible Column Groups", parentName: "TreeGrid" },
     "tree-grid-allData-summary": { displayName: "TreeGrid All Data Custom Summaries", parentName: "TreeGrid" },
-    "tree-grid-sample-right-pinning": { displayName: "TreeGrid Right Side Pinning", parentName: "TreeGrid"},
-    "column-selection": { displayName: "TreeGrid Column Selection", parentName: "TreeGrid"},
-    "column-group-selection": { displayName: "TreeGrid Column Group Selection", parentName: "TreeGrid"},
-    "column-selection-styles": { displayName: "TreeGrid Column Selection Style", parentName: "TreeGrid"},
-    "tgrid-keyboardnav-guide": { displayName: "TreeGrid keyboard navigation guide", parentName: "TreeGrid"},
+    "tree-grid-sample-right-pinning": { displayName: "TreeGrid Right Side Pinning", parentName: "TreeGrid" },
+    "column-selection": { displayName: "TreeGrid Column Selection", parentName: "TreeGrid" },
+    "column-group-selection": { displayName: "TreeGrid Column Group Selection", parentName: "TreeGrid" },
+    "column-selection-styles": { displayName: "TreeGrid Column Selection Style", parentName: "TreeGrid" },
+    "tgrid-keyboardnav-guide": { displayName: "TreeGrid keyboard navigation guide", parentName: "TreeGrid" },
     // tslint:disable-next-line:max-line-length
-    "tree-grid-remote-paging-default-template": { displayName: "TreeGrid remote paging with default template", parentName: "TreeGrid"},
+    "tree-grid-remote-paging-default-template": { displayName: "TreeGrid remote paging with default template", parentName: "TreeGrid" },
     "tree-grid-state": { displayName: "TreeGrid Save State", parentName: "TreeGrid" },
-    "tree-grid-state-about": { displayName: "About", parentName: "TreeGrid" }
+    "tree-grid-state-about": { displayName: "About", parentName: "TreeGrid" },
+    "tree-grid-exporting-visualization": { displayName: "Exporting Visualization", parentName: "TreeGrid" }
 };
diff --git a/src/app/tree-grid/tree-grid-routing.module.ts b/src/app/tree-grid/tree-grid-routing.module.ts
index 5e7b6d8bc6..6f76d11cd8 100644
--- a/src/app/tree-grid/tree-grid-routing.module.ts
+++ b/src/app/tree-grid/tree-grid-routing.module.ts
@@ -81,7 +81,7 @@ import { TreeGridAllDataSummaryComponent } from "./treegrid-allData-summary/tree
 import { TGridSaveStateComponent } from './tree-grid-save-state/tGrid-state.component';
 import { TGridAboutComponent } from "./tree-grid-save-state/about.component";
 import { TreeGridExternalOutletComponent } from "./tree-grid-external-outlet/tree-grid-external-outlet-sample.component";
-
+import { TreeGridExportVisualizationComponent } from "./tree-grid-export-visualization/tree-grid-export-visualization.component";
 export const treeGridRoutes: Routes = [
     {
         component: TreeGridRowEditSampleComponent,
@@ -477,6 +477,11 @@ export const treeGridRoutes: Routes = [
         component: TGridAboutComponent,
         data: treeGridRoutesData["tree-grid-about"],
         path: "tree-grid-about"
+    },
+    {
+        component: TreeGridExportVisualizationComponent,
+        data: treeGridRoutesData["tree-grid-exporting-visualization"],
+        path: "tree-grid-exporting-visualization"
     }
 ];
 
diff --git a/src/app/tree-grid/tree-grid.module.ts b/src/app/tree-grid/tree-grid.module.ts
index 014c48d587..fcd6af60ad 100644
--- a/src/app/tree-grid/tree-grid.module.ts
+++ b/src/app/tree-grid/tree-grid.module.ts
@@ -110,6 +110,7 @@ import { TreeGridVirtualizationSampleComponent } from "./tree-grid-virtualizatio
 import { TreeGridAllDataSummaryComponent } from "./treegrid-allData-summary/treegrid-allData-summary.component";
 import { TGridAboutComponent } from "./tree-grid-save-state/about.component";
 import { TreeGridExternalOutletComponent } from './tree-grid-external-outlet/tree-grid-external-outlet-sample.component';
+import { TreeGridExportVisualizationComponent } from './tree-grid-export-visualization/tree-grid-export-visualization.component';
 
 @NgModule({
     declarations: [
@@ -193,7 +194,8 @@ import { TreeGridExternalOutletComponent } from './tree-grid-external-outlet/tre
         TreeGridColumnSelectionStylesComponent,
         TGridKeyboardnavGuide,
         TreeGridRemotePagingDefaultTemplateComponent,
-        TreeGridExternalOutletComponent
+        TreeGridExternalOutletComponent,
+        TreeGridExportVisualizationComponent
     ],
     imports: [
         CommonModule,