diff --git a/.github/workflows/build-app-lob.yml b/.github/workflows/build-app-lob.yml new file mode 100644 index 0000000000..cfa6e0bb4e --- /dev/null +++ b/.github/workflows/build-app-lob.yml @@ -0,0 +1,34 @@ +# This is a basic workflow to help you get started with Actions + +name: CI + +# Controls when the action will run. Triggers the workflow on push or pull request +# events but only for the master branch +on: + push: + branches: [ master, vNext, rkaraivanov/toolbar-samples ] + pull_request: + branches: [ master, vNext, rkaraivanov/toolbar-samples ] + +# A workflow run is made up of one or more jobs that can run sequentially or in parallel +jobs: + # This workflow contains a single job called "build" + build: + # The type of runner that the job will run on + runs-on: ubuntu-latest + + # Steps represent a sequence of tasks that will be executed as part of the job + steps: + # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it + - uses: actions/checkout@v2 + + - name: Install dependencies + run: npm ci + + - name: Run lint + run: npm run lint + + - name: 'Generate live editing and build samples' + run: npm run build:app-lob + env: + NODE_OPTIONS: "--max_old_space_size=4096" diff --git a/live-editing/configs/GridConfigGenerator.ts b/live-editing/configs/GridConfigGenerator.ts index 7395cac26a..db8eedb67e 100644 --- a/live-editing/configs/GridConfigGenerator.ts +++ b/live-editing/configs/GridConfigGenerator.ts @@ -402,10 +402,10 @@ export class GridConfigGenerator implements IConfigGenerator { component: 'GridToolbarSample2Component', additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts", "/src/app/grid/services/data.ts"], appModuleConfig: new AppModuleConfig({ - imports: ['GridToolbarSample2Component', 'IgxAvatarModule', 'IgxGridModule', + imports: ['GridToolbarSample2Component', 'IgxAvatarModule', 'IgxGridModule', 'IgxSwitchModule', 'IgxExcelExporterService', 'IgxCsvExporterService', 'IgxPreventDocumentScrollModule'], ngDeclarations: ['GridToolbarSample2Component'], - ngImports: ['IgxPreventDocumentScrollModule', 'IgxAvatarModule', 'IgxGridModule'], + ngImports: ['IgxPreventDocumentScrollModule', 'IgxAvatarModule', 'IgxGridModule', 'IgxSwitchModule'], ngProviders: ['IgxExcelExporterService', 'IgxCsvExporterService'] }) })); diff --git a/live-editing/configs/HierarchicalGridConfigGenerator.ts b/live-editing/configs/HierarchicalGridConfigGenerator.ts index c602935bf2..cb8bfb6205 100644 --- a/live-editing/configs/HierarchicalGridConfigGenerator.ts +++ b/live-editing/configs/HierarchicalGridConfigGenerator.ts @@ -412,9 +412,9 @@ export class HierarchicalGridConfigGenerator implements IConfigGenerator { configs.push(new Config({ additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts", "/src/app/hierarchical-grid/data.ts"], appModuleConfig: new AppModuleConfig({ - imports: ['IgxHierarchicalGridModule', 'HGridToolbarOptionsSampleComponent', 'IgxPreventDocumentScrollModule'], + imports: ['IgxHierarchicalGridModule', 'HGridToolbarOptionsSampleComponent', 'IgxPreventDocumentScrollModule', 'IgxSwitchModule'], ngDeclarations: ['HGridToolbarOptionsSampleComponent'], - ngImports: ['IgxPreventDocumentScrollModule', 'IgxHierarchicalGridModule'] + ngImports: ['IgxPreventDocumentScrollModule', 'IgxHierarchicalGridModule', 'IgxSwitchModule'] }), component: 'HGridToolbarOptionsSampleComponent' })); diff --git a/live-editing/configs/TreeGridConfigGenerator.ts b/live-editing/configs/TreeGridConfigGenerator.ts index 35e1a47669..bc7ddad403 100644 --- a/live-editing/configs/TreeGridConfigGenerator.ts +++ b/live-editing/configs/TreeGridConfigGenerator.ts @@ -395,9 +395,9 @@ export class TreeGridConfigGenerator implements IConfigGenerator { additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts", "/src/app/tree-grid/data/employees-flat-avatars.ts"], appModuleConfig: new AppModuleConfig({ imports: ['IgxPreventDocumentScrollModule', 'IgxTreeGridModule', 'TreeGridToolbarSample1Component', 'IgxAvatarModule', - 'IgxExcelExporterService', 'IgxCsvExporterService'], + 'IgxExcelExporterService', 'IgxCsvExporterService', 'IgxSwitchModule'], ngDeclarations: ['TreeGridToolbarSample1Component'], - ngImports: ['IgxPreventDocumentScrollModule', 'IgxTreeGridModule', 'IgxAvatarModule'], + ngImports: ['IgxPreventDocumentScrollModule', 'IgxTreeGridModule', 'IgxAvatarModule', 'IgxSwitchModule'], ngProviders: ['IgxExcelExporterService', 'IgxCsvExporterService'] }), component: 'TreeGridToolbarSample1Component', diff --git a/projects/app-lob/src/app/grid-crm/grid-crm/grid-crm/grid-crm.component.html b/projects/app-lob/src/app/grid-crm/grid-crm/grid-crm/grid-crm.component.html index 99430d82d5..34aa867929 100644 --- a/projects/app-lob/src/app/grid-crm/grid-crm/grid-crm/grid-crm.component.html +++ b/projects/app-lob/src/app/grid-crm/grid-crm/grid-crm/grid-crm.component.html @@ -1,13 +1,16 @@
- + - + + + + +
- + Business Propeller
@@ -15,10 +18,13 @@ search - clear + clear + - +
@@ -31,15 +37,18 @@
-
- -
@@ -53,8 +62,8 @@ - + - + - +
- + +
- + - + - + - + - + @@ -134,7 +142,8 @@ - + @@ -150,8 +159,8 @@ - + { + if (args.field === 'Deals') { args.cancel = true; } + }; + + this.excelExporter.onColumnExport.subscribe(exporterCb); + this.csvExporter.onColumnExport.subscribe(exporterCb); + } public ngOnInit() { const employees = data; @@ -147,19 +158,6 @@ export class GridCRMComponent implements OnInit, AfterViewInit { this.cols = this.grid1.columnList; this.hiddenColsLength = this.cols.filter((col) => col.hidden).length; this.pinnedColsLength = this.cols.filter((col) => col.pinned).length; - this.grid1.toolbar.columnPinningDropdown.width = "250px"; - - this.grid1.toolbar.excelExporter.onColumnExport.subscribe((args: IColumnExportingEventArgs) => { - if (args.field === "Deals") { - args.cancel = true; - } - }); - - this.grid1.toolbar.csvExporter.onColumnExport.subscribe((args: IColumnExportingEventArgs) => { - if (args.field === "Deals") { - args.cancel = true; - } - }); } public toggleVisibility(col: IgxColumnComponent) { diff --git a/projects/app-lob/src/app/grid-finjs/grid-finjs-demo.component.html b/projects/app-lob/src/app/grid-finjs/grid-finjs-demo.component.html index 23db213518..c147ecbdb8 100644 --- a/projects/app-lob/src/app/grid-finjs/grid-finjs-demo.component.html +++ b/projects/app-lob/src/app/grid-finjs/grid-finjs-demo.component.html @@ -6,11 +6,12 @@ Dark
- + Grouped
- Toolbar
@@ -20,13 +21,13 @@
- +
- +
@@ -36,14 +37,17 @@ ~{{volume/5}} records updated.
- - + + + + + + + @@ -64,7 +68,8 @@ - + + @@ -72,7 +77,8 @@ - + + { diff --git a/projects/app-lob/src/app/treegrid-finjs/tree-grid-finjs-sample.component.html b/projects/app-lob/src/app/treegrid-finjs/tree-grid-finjs-sample.component.html index c9b1bf09f6..01460aa94f 100644 --- a/projects/app-lob/src/app/treegrid-finjs/tree-grid-finjs-sample.component.html +++ b/projects/app-lob/src/app/treegrid-finjs/tree-grid-finjs-sample.component.html @@ -7,8 +7,8 @@ Dark
- Toolbar + + Toolbar
@@ -36,9 +36,15 @@ - + [primaryKey]="primaryKey" [childDataKey]="childDataKey" hiddenColumnsText="Hidden" + [rowSelection]="selectionMode" [allowFiltering]="true" [filterMode]="'excelStyleFilter'"> + + + + + + + @@ -50,7 +56,8 @@ - + + @@ -60,7 +67,7 @@ - {{ cell.value | date }} + {{ cell.value | date }} { 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 index 91c77347b6..3db7a66c9e 100644 --- a/src/app/grid/grid-export-visualization/grid-export-visualization.component.html +++ b/src/app/grid/grid-export-visualization/grid-export-visualization.component.html @@ -1,7 +1,13 @@
- - + + + + + + + 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 index d118211504..98f6caac27 100644 --- a/src/app/grid/grid-export-visualization/grid-export-visualization.component.ts +++ b/src/app/grid/grid-export-visualization/grid-export-visualization.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component } from '@angular/core'; import { DATA } from '../../data/nwindData'; @Component({ @@ -23,4 +23,9 @@ export class GridExportVisualizationComponent { return val; } } + + longRunning(toolbar: any) { + toolbar.showProgress = true; + setTimeout(() => toolbar.showProgress = false, 5000); + } } diff --git a/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-1.component.html b/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-1.component.html index 64855653bd..231c322c89 100644 --- a/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-1.component.html +++ b/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-1.component.html @@ -1,8 +1,9 @@
- - + + + Grid Toolbar + diff --git a/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-1.component.ts b/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-1.component.ts index 2bf55ae4f4..5b458dafe1 100644 --- a/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-1.component.ts +++ b/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-1.component.ts @@ -1,5 +1,4 @@ -import { Component, OnInit, ViewChild } from "@angular/core"; -import { IgxGridComponent } from "igniteui-angular"; +import { Component} from "@angular/core"; import { athletesData } from "../services/data"; @Component({ @@ -7,12 +6,11 @@ import { athletesData } from "../services/data"; styleUrls: ["./grid-toolbar-sample-1.component.scss"], templateUrl: "./grid-toolbar-sample-1.component.html" }) -export class GridToolbarSample1Component implements OnInit { +export class GridToolbarSample1Component { - @ViewChild("grid1", { static: true }) public grid: IgxGridComponent; public data: any[]; - public ngOnInit() { + constructor() { this.data = athletesData; } } diff --git a/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-2.component.html b/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-2.component.html index cf87512e37..3fc02486c4 100644 --- a/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-2.component.html +++ b/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-2.component.html @@ -1,14 +1,24 @@
- - +
+ + + + +
+ Column hiding + Column pinning + Exporting +
+
+ + + {{ toolbarTitle }} + + + + + + diff --git a/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-2.component.scss b/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-2.component.scss index 82fecc7636..c001cbfd88 100644 --- a/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-2.component.scss +++ b/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-2.component.scss @@ -2,6 +2,11 @@ margin: 15px; } +.control_panel { + width: 700px; + margin-bottom: 10px; +} + .cell__inner { display: flex; align-items: center; diff --git a/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-2.component.ts b/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-2.component.ts index 0f920352ee..e35235b870 100644 --- a/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-2.component.ts +++ b/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-2.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, ViewChild } from "@angular/core"; +import { Component } from "@angular/core"; import { athletesData } from "../services/data"; @Component({ @@ -6,11 +6,15 @@ import { athletesData } from "../services/data"; styleUrls: ["./grid-toolbar-sample-2.component.scss"], templateUrl: "./grid-toolbar-sample-2.component.html" }) -export class GridToolbarSample2Component implements OnInit { +export class GridToolbarSample2Component { - public data: any[]; + data: any[]; + toolbarTitle = 'Grid toolbar'; + enableHiding = true; + enablePinning = true; + enableExport = true; - public ngOnInit() { + constructor() { this.data = athletesData; } } diff --git a/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-3.component.html b/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-3.component.html index b252a85845..176f6919b7 100644 --- a/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-3.component.html +++ b/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-3.component.html @@ -1,15 +1,13 @@
- + (onToolbarExporting)="configureExport($event)" + > + + Grid toolbar + + + + diff --git a/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-3.component.ts b/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-3.component.ts index 65d7f03c94..9a06fd36c1 100644 --- a/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-3.component.ts +++ b/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-3.component.ts @@ -1,12 +1,11 @@ -import { Component, OnInit, ViewChild } from "@angular/core"; +import { Component } from "@angular/core"; import { CsvFileTypes, IColumnExportingEventArgs, IGridToolbarExportEventArgs, IgxCsvExporterOptions, IgxExcelExporterOptions, - IgxExporterOptionsBase, - IgxGridComponent + IgxExporterOptionsBase } from "igniteui-angular"; import { athletesData } from "../services/data"; @@ -15,16 +14,15 @@ import { athletesData } from "../services/data"; styleUrls: ["./grid-toolbar-sample-3.component.scss"], templateUrl: "./grid-toolbar-sample-3.component.html" }) -export class GridToolbarSample3Component implements OnInit { +export class GridToolbarSample3Component { - @ViewChild("grid1", { static: true }) public grid: IgxGridComponent; public data: any[]; - public ngOnInit() { + constructor() { this.data = athletesData; } - public toolbarExportingHandler(args: IGridToolbarExportEventArgs) { + public configureExport(args: IGridToolbarExportEventArgs) { // You can customize the exporting from this event const options: IgxExporterOptionsBase = args.options ; options.fileName = "Custom Title"; diff --git a/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-4.component.html b/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-4.component.html index 66cc1d94e6..1fded1b6ca 100644 --- a/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-4.component.html +++ b/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-4.component.html @@ -1,15 +1,18 @@
- + + Athletes - + + + +
diff --git a/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-4.component.ts b/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-4.component.ts index 595e401c6f..2e4b6f255a 100644 --- a/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-4.component.ts +++ b/src/app/grid/grid-toolbar-sample/grid-toolbar-sample-4.component.ts @@ -1,5 +1,4 @@ -import { Component, OnInit, ViewChild } from "@angular/core"; -import { IgxGridComponent} from "igniteui-angular"; +import { Component } from "@angular/core"; import { athletesData } from "../services/data"; @Component({ @@ -7,12 +6,10 @@ import { athletesData } from "../services/data"; styleUrls: ["./grid-toolbar-sample-4.component.scss"], templateUrl: "./grid-toolbar-sample-4.component.html" }) -export class GridToolbarSample4Component implements OnInit { - - @ViewChild("grid1", { static: true }) public grid: IgxGridComponent; +export class GridToolbarSample4Component { public data: any[]; - public ngOnInit() { + constructor() { this.data = athletesData; } diff --git a/src/app/grid/grid-toolbar-style/grid-toolbar-style.component.html b/src/app/grid/grid-toolbar-style/grid-toolbar-style.component.html index cf87512e37..9e37711266 100644 --- a/src/app/grid/grid-toolbar-style/grid-toolbar-style.component.html +++ b/src/app/grid/grid-toolbar-style/grid-toolbar-style.component.html @@ -1,14 +1,14 @@
- - + + + + Grid Toolbar + + + + + + diff --git a/src/app/grid/grid-toolbar-style/grid-toolbar-style.component.ts b/src/app/grid/grid-toolbar-style/grid-toolbar-style.component.ts index fbc7969887..31f732a255 100644 --- a/src/app/grid/grid-toolbar-style/grid-toolbar-style.component.ts +++ b/src/app/grid/grid-toolbar-style/grid-toolbar-style.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, ViewChild } from "@angular/core"; +import { Component } from "@angular/core"; import { athletesData } from "../services/data"; @Component({ @@ -6,11 +6,11 @@ import { athletesData } from "../services/data"; styleUrls: ["./grid-toolbar-style.component.scss"], templateUrl: "./grid-toolbar-style.component.html" }) -export class GridToolbarStyleComponent implements OnInit { +export class GridToolbarStyleComponent { public data: any[]; - public ngOnInit() { + constructor() { this.data = athletesData; } } diff --git a/src/app/hierarchical-grid/hierarchical-grid-toolbar-style/hierarchical-grid-toolbar-style.component.html b/src/app/hierarchical-grid/hierarchical-grid-toolbar-style/hierarchical-grid-toolbar-style.component.html index 7dc44eb516..d4fb8eb0c3 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-toolbar-style/hierarchical-grid-toolbar-style.component.html +++ b/src/app/hierarchical-grid/hierarchical-grid-toolbar-style/hierarchical-grid-toolbar-style.component.html @@ -1,7 +1,13 @@
- - + + + Singers + + + + + @@ -20,20 +26,20 @@ - + + - - - - - - - + + + + + +
diff --git a/src/app/hierarchical-grid/hierarchical-grid-toolbar-style/hierarchical-grid-toolbar-style.component.ts b/src/app/hierarchical-grid/hierarchical-grid-toolbar-style/hierarchical-grid-toolbar-style.component.ts index 4a3a324a31..2bcd4216c5 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-toolbar-style/hierarchical-grid-toolbar-style.component.ts +++ b/src/app/hierarchical-grid/hierarchical-grid-toolbar-style/hierarchical-grid-toolbar-style.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from "@angular/core"; +import { Component } from "@angular/core"; import { SINGERS } from "../data"; @Component({ @@ -6,13 +6,10 @@ import { SINGERS } from "../data"; styleUrls: ["./hierarchical-grid-toolbar-style.component.scss"], templateUrl: "./hierarchical-grid-toolbar-style.component.html" }) -export class HierarchicalGridToolbarStyleComponent implements OnInit { - public localdata; +export class HierarchicalGridToolbarStyleComponent { + public data: any[]; constructor() { - this.localdata = SINGERS; - } - - public ngOnInit(): void { + this.data = SINGERS; } } diff --git a/src/app/hierarchical-grid/hierarchical-grid-toolbar/hierarchical-grid-toolbar-custom.component.html b/src/app/hierarchical-grid/hierarchical-grid-toolbar/hierarchical-grid-toolbar-custom.component.html index 31e46e98f2..03d813f3a0 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-toolbar/hierarchical-grid-toolbar-custom.component.html +++ b/src/app/hierarchical-grid/hierarchical-grid-toolbar/hierarchical-grid-toolbar-custom.component.html @@ -1,13 +1,14 @@
- + - - - + + + @@ -18,24 +19,26 @@
- + - + - + Albums - + + + - + @@ -47,7 +50,7 @@ - + diff --git a/src/app/hierarchical-grid/hierarchical-grid-toolbar/hierarchical-grid-toolbar-custom.component.ts b/src/app/hierarchical-grid/hierarchical-grid-toolbar/hierarchical-grid-toolbar-custom.component.ts index 2c5aea34e7..e294e69fee 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-toolbar/hierarchical-grid-toolbar-custom.component.ts +++ b/src/app/hierarchical-grid/hierarchical-grid-toolbar/hierarchical-grid-toolbar-custom.component.ts @@ -1,5 +1,4 @@ -import { Component, OnInit, ViewChild } from "@angular/core"; -import { IgxHierarchicalGridComponent } from "igniteui-angular"; +import { Component } from "@angular/core"; import { SINGERS } from "../data"; @Component({ @@ -8,17 +7,10 @@ import { SINGERS } from "../data"; templateUrl: "hierarchical-grid-toolbar-custom.component.html" }) -export class HGridToolbarCustomSampleComponent implements OnInit { - public localdata; - - @ViewChild("hierarchicalGrid", { static: true }) - private hierarchicalGrid: IgxHierarchicalGridComponent; +export class HGridToolbarCustomSampleComponent { + public data: any[]; constructor() { - this.localdata = SINGERS; - } - public ngOnInit(): void { - + this.data = SINGERS; } - public formatter = (a) => a; } diff --git a/src/app/hierarchical-grid/hierarchical-grid-toolbar/hierarchical-grid-toolbar-options.component.html b/src/app/hierarchical-grid/hierarchical-grid-toolbar/hierarchical-grid-toolbar-options.component.html index 93abc30a81..882a89df23 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-toolbar/hierarchical-grid-toolbar-options.component.html +++ b/src/app/hierarchical-grid/hierarchical-grid-toolbar/hierarchical-grid-toolbar-options.component.html @@ -1,7 +1,24 @@
- - +
+ + + + +
+ Column hiding + Column pinning + Exporting +
+
+ + + {{ toolbarTitle }} + + + + + + @@ -11,16 +28,16 @@
- + - + - + @@ -28,7 +45,7 @@ - + diff --git a/src/app/hierarchical-grid/hierarchical-grid-toolbar/hierarchical-grid-toolbar-options.component.scss b/src/app/hierarchical-grid/hierarchical-grid-toolbar/hierarchical-grid-toolbar-options.component.scss index ca6f0e0957..b194d34512 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-toolbar/hierarchical-grid-toolbar-options.component.scss +++ b/src/app/hierarchical-grid/hierarchical-grid-toolbar/hierarchical-grid-toolbar-options.component.scss @@ -1,10 +1,16 @@ .hgrid__wrapper { margin: 15px; } + +.control_panel { + width: 700px; + margin-bottom: 10px; +} + .photo { vertical-align: middle; max-height: 62px; } .cell__inner_2 { margin: 1px -} \ No newline at end of file +} diff --git a/src/app/hierarchical-grid/hierarchical-grid-toolbar/hierarchical-grid-toolbar-options.component.ts b/src/app/hierarchical-grid/hierarchical-grid-toolbar/hierarchical-grid-toolbar-options.component.ts index 7c2130856c..466cfef107 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-toolbar/hierarchical-grid-toolbar-options.component.ts +++ b/src/app/hierarchical-grid/hierarchical-grid-toolbar/hierarchical-grid-toolbar-options.component.ts @@ -1,5 +1,4 @@ -import { Component, OnInit, ViewChild } from "@angular/core"; -import { IgxHierarchicalGridComponent } from "igniteui-angular"; +import { Component } from "@angular/core"; import { SINGERS } from "../data"; @Component({ @@ -8,18 +7,14 @@ import { SINGERS } from "../data"; templateUrl: "hierarchical-grid-toolbar-options.component.html" }) -export class HGridToolbarOptionsSampleComponent implements OnInit { - public localdata; - - @ViewChild("hierarchicalGrid", { static: true }) - private hierarchicalGrid: IgxHierarchicalGridComponent; +export class HGridToolbarOptionsSampleComponent { + public data: any[]; + toolbarTitle = 'Singers'; + enableHiding = true; + enablePinning = true; + enableExport = true; constructor() { - this.localdata = SINGERS; - } - public ngOnInit(): void { - + this.data = SINGERS; } - - public formatter = (a) => a; } diff --git a/src/app/hierarchical-grid/hierarchical-grid-toolbar/hierarchical-grid-toolbar-title.component.html b/src/app/hierarchical-grid/hierarchical-grid-toolbar/hierarchical-grid-toolbar-title.component.html index 53b9bad322..95005e2ee8 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-toolbar/hierarchical-grid-toolbar-title.component.html +++ b/src/app/hierarchical-grid/hierarchical-grid-toolbar/hierarchical-grid-toolbar-title.component.html @@ -1,7 +1,8 @@
- - + + + Singers + @@ -11,19 +12,24 @@
- + - - + + + Albums + - + - - + + + + Songs + @@ -32,8 +38,10 @@ - - + + + Tours + diff --git a/src/app/hierarchical-grid/hierarchical-grid-toolbar/hierarchical-grid-toolbar-title.component.ts b/src/app/hierarchical-grid/hierarchical-grid-toolbar/hierarchical-grid-toolbar-title.component.ts index 4c4c6b76db..5ce03dde52 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-toolbar/hierarchical-grid-toolbar-title.component.ts +++ b/src/app/hierarchical-grid/hierarchical-grid-toolbar/hierarchical-grid-toolbar-title.component.ts @@ -1,5 +1,4 @@ -import { Component, OnInit, ViewChild } from "@angular/core"; -import { IgxHierarchicalGridComponent } from "igniteui-angular"; +import { Component } from "@angular/core"; import { SINGERS } from "../data"; @Component({ @@ -8,18 +7,11 @@ import { SINGERS } from "../data"; templateUrl: "hierarchical-grid-toolbar-title.component.html" }) -export class HGridToolbarTitleSampleComponent implements OnInit { - public localdata; +export class HGridToolbarTitleSampleComponent { - @ViewChild("hierarchicalGrid", { static: true }) - private hierarchicalGrid: IgxHierarchicalGridComponent; + public data: any[]; constructor() { - this.localdata = SINGERS; + this.data = SINGERS; } - public ngOnInit(): void { - - } - - public formatter = (a) => a; } 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 index 636de01e3b..a677e66d53 100644 --- 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 @@ -1,8 +1,14 @@
- + foreignKey="ParentID" height="350px" width="100%" primaryKey="ID"> + + + + + + 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 index 4ad99b23d6..f3b04f21e5 100644 --- 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 @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component } from '@angular/core'; import { FOODS_DATA } from '../data/foods'; @Component({ @@ -9,6 +9,7 @@ import { FOODS_DATA } from '../data/foods'; 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++) { @@ -16,4 +17,9 @@ export class TreeGridExportVisualizationComponent { } } } + + longRunning(toolbar: any) { + toolbar.showProgress = true; + setTimeout(() => toolbar.showProgress = false, 5000); + } } diff --git a/src/app/tree-grid/tree-grid-toolbar-sample-1/tree-grid-toolbar-sample-1.component.html b/src/app/tree-grid/tree-grid-toolbar-sample-1/tree-grid-toolbar-sample-1.component.html index 29a546082e..f22673b433 100644 --- a/src/app/tree-grid/tree-grid-toolbar-sample-1/tree-grid-toolbar-sample-1.component.html +++ b/src/app/tree-grid/tree-grid-toolbar-sample-1/tree-grid-toolbar-sample-1.component.html @@ -1,14 +1,24 @@
- - +
+ + + + +
+ Column hiding + Column pinning + Exporting +
+
+ + + {{ toolbarTitle }} + + + + + + @@ -18,9 +28,9 @@
- - - - + + + +
diff --git a/src/app/tree-grid/tree-grid-toolbar-sample-1/tree-grid-toolbar-sample-1.component.scss b/src/app/tree-grid/tree-grid-toolbar-sample-1/tree-grid-toolbar-sample-1.component.scss index e99df11bac..247901ab59 100644 --- a/src/app/tree-grid/tree-grid-toolbar-sample-1/tree-grid-toolbar-sample-1.component.scss +++ b/src/app/tree-grid/tree-grid-toolbar-sample-1/tree-grid-toolbar-sample-1.component.scss @@ -2,6 +2,11 @@ margin: 10px; } +.control_panel { + width: 700px; + margin-bottom: 10px; +} + .cell__inner { display: flex; align-items: center; diff --git a/src/app/tree-grid/tree-grid-toolbar-sample-1/tree-grid-toolbar-sample-1.component.ts b/src/app/tree-grid/tree-grid-toolbar-sample-1/tree-grid-toolbar-sample-1.component.ts index 995caa3d4f..5cffb4e914 100644 --- a/src/app/tree-grid/tree-grid-toolbar-sample-1/tree-grid-toolbar-sample-1.component.ts +++ b/src/app/tree-grid/tree-grid-toolbar-sample-1/tree-grid-toolbar-sample-1.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from "@angular/core"; +import { Component } from "@angular/core"; import { EMPLOYEE_FLAT_AVATARS_DATA } from "../data/employees-flat-avatars"; @Component({ @@ -6,11 +6,15 @@ import { EMPLOYEE_FLAT_AVATARS_DATA } from "../data/employees-flat-avatars"; styleUrls: ["./tree-grid-toolbar-sample-1.component.scss"], templateUrl: "./tree-grid-toolbar-sample-1.component.html" }) -export class TreeGridToolbarSample1Component implements OnInit { +export class TreeGridToolbarSample1Component { - public data: any[]; + data: any[]; + toolbarTitle = 'Tree grid toolbar'; + enableHiding = true; + enablePinning = true; + enableExport = true; - public ngOnInit() { + constructor() { this.data = EMPLOYEE_FLAT_AVATARS_DATA(); } } diff --git a/src/app/tree-grid/tree-grid-toolbar-sample-2/tree-grid-toolbar-sample-2.component.html b/src/app/tree-grid/tree-grid-toolbar-sample-2/tree-grid-toolbar-sample-2.component.html index e7d0fd5c53..fd1a30327e 100644 --- a/src/app/tree-grid/tree-grid-toolbar-sample-2/tree-grid-toolbar-sample-2.component.html +++ b/src/app/tree-grid/tree-grid-toolbar-sample-2/tree-grid-toolbar-sample-2.component.html @@ -1,13 +1,12 @@
- - + + + Grid toolbar + + + + @@ -17,9 +16,9 @@
- - - - + + + +
diff --git a/src/app/tree-grid/tree-grid-toolbar-sample-2/tree-grid-toolbar-sample-2.component.ts b/src/app/tree-grid/tree-grid-toolbar-sample-2/tree-grid-toolbar-sample-2.component.ts index c0e1dfa852..408ed832d8 100644 --- a/src/app/tree-grid/tree-grid-toolbar-sample-2/tree-grid-toolbar-sample-2.component.ts +++ b/src/app/tree-grid/tree-grid-toolbar-sample-2/tree-grid-toolbar-sample-2.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from "@angular/core"; +import { Component } from "@angular/core"; import { CsvFileTypes, IColumnExportingEventArgs, @@ -14,15 +14,15 @@ import { EMPLOYEE_FLAT_AVATARS_DATA } from "../data/employees-flat-avatars"; styleUrls: ["./tree-grid-toolbar-sample-2.component.scss"], templateUrl: "./tree-grid-toolbar-sample-2.component.html" }) -export class TreeGridToolbarSample2Component implements OnInit { +export class TreeGridToolbarSample2Component { public data: any[]; - public ngOnInit() { + constructor() { this.data = EMPLOYEE_FLAT_AVATARS_DATA(); } - public toolbarExportingHandler(args: IGridToolbarExportEventArgs) { + public configureExport(args: IGridToolbarExportEventArgs) { // You can customize the exporting from this event const options: IgxExporterOptionsBase = args.options; options.fileName = "Custom Title"; diff --git a/src/app/tree-grid/tree-grid-toolbar-sample-3/tree-grid-toolbar-sample-3.component.html b/src/app/tree-grid/tree-grid-toolbar-sample-3/tree-grid-toolbar-sample-3.component.html index 7ef10f98c7..bc8cc4c464 100644 --- a/src/app/tree-grid/tree-grid-toolbar-sample-3/tree-grid-toolbar-sample-3.component.html +++ b/src/app/tree-grid/tree-grid-toolbar-sample-3/tree-grid-toolbar-sample-3.component.html @@ -1,14 +1,17 @@
- + + Tree Grid Toolbar - + + + @@ -19,10 +22,10 @@
- - - - + + + + diff --git a/src/app/tree-grid/tree-grid-toolbar-sample-3/tree-grid-toolbar-sample-3.component.ts b/src/app/tree-grid/tree-grid-toolbar-sample-3/tree-grid-toolbar-sample-3.component.ts index 53f40c035b..665e59f4a0 100644 --- a/src/app/tree-grid/tree-grid-toolbar-sample-3/tree-grid-toolbar-sample-3.component.ts +++ b/src/app/tree-grid/tree-grid-toolbar-sample-3/tree-grid-toolbar-sample-3.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from "@angular/core"; +import { Component } from "@angular/core"; import { EMPLOYEE_FLAT_AVATARS_DATA } from "../data/employees-flat-avatars"; @Component({ @@ -6,11 +6,11 @@ import { EMPLOYEE_FLAT_AVATARS_DATA } from "../data/employees-flat-avatars"; styleUrls: ["./tree-grid-toolbar-sample-3.component.scss"], templateUrl: "./tree-grid-toolbar-sample-3.component.html" }) -export class TreeGridToolbarSample3Component implements OnInit { +export class TreeGridToolbarSample3Component { public data: any[]; - public ngOnInit() { + constructor() { this.data = EMPLOYEE_FLAT_AVATARS_DATA(); } } diff --git a/src/app/tree-grid/tree-grid-toolbar-sample-4/tree-grid-toolbar-sample-4.component.html b/src/app/tree-grid/tree-grid-toolbar-sample-4/tree-grid-toolbar-sample-4.component.html index 2b622e6ff3..d4a94780c2 100644 --- a/src/app/tree-grid/tree-grid-toolbar-sample-4/tree-grid-toolbar-sample-4.component.html +++ b/src/app/tree-grid/tree-grid-toolbar-sample-4/tree-grid-toolbar-sample-4.component.html @@ -1,7 +1,8 @@
- - + + + Tree Grid Toolbar + @@ -11,9 +12,9 @@
- - - - + + + +
diff --git a/src/app/tree-grid/tree-grid-toolbar-sample-4/tree-grid-toolbar-sample-4.component.ts b/src/app/tree-grid/tree-grid-toolbar-sample-4/tree-grid-toolbar-sample-4.component.ts index 5fa27ec429..d99d180343 100644 --- a/src/app/tree-grid/tree-grid-toolbar-sample-4/tree-grid-toolbar-sample-4.component.ts +++ b/src/app/tree-grid/tree-grid-toolbar-sample-4/tree-grid-toolbar-sample-4.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from "@angular/core"; +import { Component } from "@angular/core"; import { EMPLOYEE_FLAT_AVATARS_DATA } from "../data/employees-flat-avatars"; @Component({ @@ -6,11 +6,11 @@ import { EMPLOYEE_FLAT_AVATARS_DATA } from "../data/employees-flat-avatars"; styleUrls: ["./tree-grid-toolbar-sample-4.component.scss"], templateUrl: "./tree-grid-toolbar-sample-4.component.html" }) -export class TreeGridToolbarSample4Component implements OnInit { +export class TreeGridToolbarSample4Component { public data: any[]; - public ngOnInit() { + constructor() { this.data = EMPLOYEE_FLAT_AVATARS_DATA(); } } diff --git a/src/app/tree-grid/tree-grid-toolbar-style/tree-grid-toolbar-style.component.html b/src/app/tree-grid/tree-grid-toolbar-style/tree-grid-toolbar-style.component.html index 29a546082e..dd863e2dcd 100644 --- a/src/app/tree-grid/tree-grid-toolbar-style/tree-grid-toolbar-style.component.html +++ b/src/app/tree-grid/tree-grid-toolbar-style/tree-grid-toolbar-style.component.html @@ -1,14 +1,14 @@
- - + + + Tree Grid Toolbar + + + + + + diff --git a/src/app/tree-grid/tree-grid-toolbar-style/tree-grid-toolbar-style.component.ts b/src/app/tree-grid/tree-grid-toolbar-style/tree-grid-toolbar-style.component.ts index 8e9e3a37da..9d388c136a 100644 --- a/src/app/tree-grid/tree-grid-toolbar-style/tree-grid-toolbar-style.component.ts +++ b/src/app/tree-grid/tree-grid-toolbar-style/tree-grid-toolbar-style.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from "@angular/core"; +import { Component } from "@angular/core"; import { EMPLOYEE_FLAT_AVATARS_DATA } from "../data/employees-flat-avatars"; @Component({ @@ -6,11 +6,11 @@ import { EMPLOYEE_FLAT_AVATARS_DATA } from "../data/employees-flat-avatars"; styleUrls: ["./tree-grid-toolbar-style.component.scss"], templateUrl: "./tree-grid-toolbar-style.component.html" }) -export class TreeGridToolbarStyleComponent implements OnInit { +export class TreeGridToolbarStyleComponent { public data: any[]; - public ngOnInit() { + constructor() { this.data = EMPLOYEE_FLAT_AVATARS_DATA(); } }