From a30c219b767e8357f988415b53476291b0567cf8 Mon Sep 17 00:00:00 2001 From: Radoslav Karaivanov Date: Mon, 9 Nov 2020 14:06:44 +0200 Subject: [PATCH 01/11] refactor(*): Fix toolbar titles samples --- .../grid-toolbar-sample-1.component.html | 7 +++-- .../grid-toolbar-sample-1.component.ts | 8 ++--- ...archical-grid-toolbar-title.component.html | 30 ++++++++++++------- ...erarchical-grid-toolbar-title.component.ts | 16 +++------- .../tree-grid-toolbar-sample-4.component.html | 15 +++++----- .../tree-grid-toolbar-sample-4.component.ts | 6 ++-- 6 files changed, 41 insertions(+), 41 deletions(-) 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/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-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(); } } From 358526da588fbcfb24baa65050e7edb18a5e9115 Mon Sep 17 00:00:00 2001 From: Radoslav Karaivanov Date: Mon, 9 Nov 2020 14:37:49 +0200 Subject: [PATCH 02/11] refactor: toolbar options samples --- .../grid-toolbar-sample-2.component.html | 30 ++++++++++----- .../grid-toolbar-sample-2.component.scss | 5 +++ .../grid-toolbar-sample-2.component.ts | 12 ++++-- ...chical-grid-toolbar-options.component.html | 31 +++++++++++---- ...chical-grid-toolbar-options.component.scss | 8 +++- ...archical-grid-toolbar-options.component.ts | 21 ++++------ .../tree-grid-toolbar-sample-1.component.html | 38 ++++++++++++------- .../tree-grid-toolbar-sample-1.component.scss | 5 +++ .../tree-grid-toolbar-sample-1.component.ts | 12 ++++-- 9 files changed, 109 insertions(+), 53 deletions(-) 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/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/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(); } } From 643cedcf4a8af2adf22631371bcd1df189b930b9 Mon Sep 17 00:00:00 2001 From: Radoslav Karaivanov Date: Mon, 9 Nov 2020 14:50:18 +0200 Subject: [PATCH 03/11] refactor: toolbar exporter samples --- .../grid-toolbar-sample-3.component.html | 18 ++++++------- .../grid-toolbar-sample-3.component.ts | 12 ++++----- .../tree-grid-toolbar-sample-2.component.html | 25 +++++++++---------- .../tree-grid-toolbar-sample-2.component.ts | 8 +++--- 4 files changed, 29 insertions(+), 34 deletions(-) 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/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"; From 34f672f41b776680d707e553598ecb8cb81ec5c0 Mon Sep 17 00:00:00 2001 From: Radoslav Karaivanov Date: Mon, 9 Nov 2020 15:12:22 +0200 Subject: [PATCH 04/11] refactor: toolbar progress indicator samples --- .../grid-export-visualization.component.html | 12 +++++++++--- .../grid-export-visualization.component.ts | 7 ++++++- .../tree-grid-export-visualization.component.html | 12 +++++++++--- .../tree-grid-export-visualization.component.ts | 8 +++++++- 4 files changed, 31 insertions(+), 8 deletions(-) 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/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); + } } From 1fadf77f4a8f4765a9c368045669bfdb2ca2ab27 Mon Sep 17 00:00:00 2001 From: Radoslav Karaivanov Date: Mon, 9 Nov 2020 16:43:21 +0200 Subject: [PATCH 05/11] refactor: toolbar custom content --- .../grid-toolbar-sample-4.component.html | 11 +++++++---- .../grid-toolbar-sample-4.component.ts | 9 +++------ ...rchical-grid-toolbar-custom.component.html | 17 +++++++---------- ...rarchical-grid-toolbar-custom.component.ts | 16 ++++------------ .../tree-grid-toolbar-sample-3.component.html | 19 +++++++++++-------- .../tree-grid-toolbar-sample-3.component.ts | 6 +++--- 6 files changed, 35 insertions(+), 43 deletions(-) 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/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..d95c64d5dc 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,11 @@
- + - + Singers - @@ -18,24 +16,23 @@
- + - + - + Albums - - + @@ -47,7 +44,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/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(); } } From 88579202c2f5e83557614352ae5fc4987d30885f Mon Sep 17 00:00:00 2001 From: Radoslav Karaivanov Date: Mon, 9 Nov 2020 16:51:20 +0200 Subject: [PATCH 06/11] refactor: toolbar custom style --- .../grid-toolbar-style.component.html | 20 ++++++------- .../grid-toolbar-style.component.ts | 6 ++-- ...archical-grid-toolbar-style.component.html | 28 +++++++++++-------- ...erarchical-grid-toolbar-style.component.ts | 11 +++----- .../tree-grid-toolbar-style.component.html | 20 ++++++------- .../tree-grid-toolbar-style.component.ts | 6 ++-- 6 files changed, 47 insertions(+), 44 deletions(-) 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/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(); } } From 92315b4f9bab361aaf22a4c11ef9e049c6a80aa1 Mon Sep 17 00:00:00 2001 From: Radoslav Karaivanov Date: Tue, 10 Nov 2020 16:46:23 +0200 Subject: [PATCH 07/11] refactor: lob toolbar demos --- .../grid-crm/grid-crm/grid-crm.component.html | 73 +++++++++++-------- .../grid-crm/grid-crm/grid-crm.component.ts | 26 +++---- .../grid-finjs/grid-finjs-demo.component.html | 36 +++++---- .../grid-finjs/grid-finjs-demo.component.ts | 5 +- .../tree-grid-finjs-sample.component.html | 21 ++++-- .../tree-grid-finjs-sample.component.ts | 5 +- 6 files changed, 94 insertions(+), 72 deletions(-) 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 }} { From 5e0fb569b95ead34481e4847cfb38e1b013047d4 Mon Sep 17 00:00:00 2001 From: Zdravko Kolev Date: Tue, 10 Nov 2020 17:48:23 +0200 Subject: [PATCH 08/11] build(gh-actions): add github actions app-lob --- .github/workflows/build-app-lob.yml | 34 +++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 .github/workflows/build-app-lob.yml diff --git a/.github/workflows/build-app-lob.yml b/.github/workflows/build-app-lob.yml new file mode 100644 index 0000000000..edb79ba7b9 --- /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 ] + pull_request: + branches: [ master, vNext ] + +# 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 + env: + NODE_OPTIONS: "--max_old_space_size=4096" From d38b4e18a9d760444e49749c83ce0488dbfcd392 Mon Sep 17 00:00:00 2001 From: Zdravko Kolev Date: Tue, 10 Nov 2020 17:48:48 +0200 Subject: [PATCH 09/11] chore(*): Add IgxSwitchModule to all grids --- live-editing/configs/GridConfigGenerator.ts | 4 ++-- live-editing/configs/HierarchicalGridConfigGenerator.ts | 4 ++-- live-editing/configs/TreeGridConfigGenerator.ts | 4 ++-- .../hierarchical-grid-toolbar-custom.component.html | 8 +++++++- 4 files changed, 13 insertions(+), 7 deletions(-) diff --git a/live-editing/configs/GridConfigGenerator.ts b/live-editing/configs/GridConfigGenerator.ts index 71b6f1d3b9..05a071c210 100644 --- a/live-editing/configs/GridConfigGenerator.ts +++ b/live-editing/configs/GridConfigGenerator.ts @@ -404,10 +404,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 a636099437..58be245d08 100644 --- a/live-editing/configs/TreeGridConfigGenerator.ts +++ b/live-editing/configs/TreeGridConfigGenerator.ts @@ -396,9 +396,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/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 d95c64d5dc..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 @@ -2,10 +2,13 @@ Singers - + + + @@ -29,6 +32,9 @@ clear Clear Sort + + + From bdb4653f45500e0be2ee269c4e5d413e5ef0cc69 Mon Sep 17 00:00:00 2001 From: Zdravko Kolev Date: Tue, 10 Nov 2020 17:54:51 +0200 Subject: [PATCH 10/11] chore(*): test gh actions --- .github/workflows/build-app-lob.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/build-app-lob.yml b/.github/workflows/build-app-lob.yml index edb79ba7b9..1bd6aae09b 100644 --- a/.github/workflows/build-app-lob.yml +++ b/.github/workflows/build-app-lob.yml @@ -6,9 +6,9 @@ name: CI # events but only for the master branch on: push: - branches: [ master, vNext ] + branches: [ master, vNext, rkaraivanov/toolbar-samples ] pull_request: - branches: [ master, vNext ] + 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: From 6063345d75e130c468db21709143e59f7d18312f Mon Sep 17 00:00:00 2001 From: Zdravko Kolev Date: Tue, 10 Nov 2020 18:07:32 +0200 Subject: [PATCH 11/11] build(ci): update run with app-lob --- .github/workflows/build-app-lob.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/build-app-lob.yml b/.github/workflows/build-app-lob.yml index 1bd6aae09b..cfa6e0bb4e 100644 --- a/.github/workflows/build-app-lob.yml +++ b/.github/workflows/build-app-lob.yml @@ -29,6 +29,6 @@ jobs: run: npm run lint - name: 'Generate live editing and build samples' - run: npm run build + run: npm run build:app-lob env: NODE_OPTIONS: "--max_old_space_size=4096"