sample(grid): Add export visualiuzation sample

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;
     }
 }

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],

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;
     }
 }

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",

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>

src/app/grid/grid-export-visualization/grid-export-visualization.component.scss

@@ -0,0 +1,3 @@
+.grid__wrapper {
+    margin: 10px;
+}

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;
+        }
+    }
+}

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"}
 };

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"
     }
 ];
 

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,

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 = [
     {

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>

src/app/tree-grid/tree-grid-export-visualization/tree-grid-export-visualization.component.scss

@@ -0,0 +1,3 @@
+.grid__wrapper {
+    margin: 10px;
+}

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]);
+            }
+        }
+    }
+}