From ccfef052784d5b008ec93ce26839cb030ca09f3e Mon Sep 17 00:00:00 2001 From: Viktor Slavov Date: Thu, 18 Jul 2019 14:17:24 +0300 Subject: [PATCH] feat(grid): add row editing styling samples #1248 --- live-editing/configs/GridConfigGenerator.ts | 14 ++++ .../HierarchicalGridConfigGenerator.ts | 16 ++++- .../configs/TreeGridConfigGenerator.ts | 13 ++++ src/app/grid/grid-routes-data.ts | 1 + .../grid-row-editing-style.component.html | 33 +++++++++ .../grid-row-editing-style.component.scss | 64 +++++++++++++++++ .../grid-row-editing-style.component.ts | 19 +++++ src/app/grid/grids-routing.module.ts | 6 ++ src/app/grid/grids.module.ts | 2 + .../hierarchical-grid-routes-data.ts | 1 + .../hierarchical-grid-routing.module.ts | 7 ++ ...rchical-grid-row-edit-style.component.html | 49 +++++++++++++ ...rchical-grid-row-edit-style.component.scss | 69 +++++++++++++++++++ ...rarchical-grid-row-edit-style.component.ts | 24 +++++++ .../hierarchical-grid.module.ts | 2 + src/app/tree-grid/tree-grid-routes-data.ts | 1 + src/app/tree-grid/tree-grid-routing.module.ts | 6 ++ .../tree-grid-row-edit-style.component.html | 24 +++++++ .../tree-grid-row-edit-style.component.scss | 64 +++++++++++++++++ .../tree-grid-row-edit-style.component.ts | 27 ++++++++ src/app/tree-grid/tree-grid.module.ts | 2 + 21 files changed, 442 insertions(+), 2 deletions(-) create mode 100644 src/app/grid/grid-row-editing-style/grid-row-editing-style.component.html create mode 100644 src/app/grid/grid-row-editing-style/grid-row-editing-style.component.scss create mode 100644 src/app/grid/grid-row-editing-style/grid-row-editing-style.component.ts create mode 100644 src/app/hierarchical-grid/hierarchical-grid-row-edit-style/hierarchical-grid-row-edit-style.component.html create mode 100644 src/app/hierarchical-grid/hierarchical-grid-row-edit-style/hierarchical-grid-row-edit-style.component.scss create mode 100644 src/app/hierarchical-grid/hierarchical-grid-row-edit-style/hierarchical-grid-row-edit-style.component.ts create mode 100644 src/app/tree-grid/tree-grid-row-edit-style/tree-grid-row-edit-style.component.html create mode 100644 src/app/tree-grid/tree-grid-row-edit-style/tree-grid-row-edit-style.component.scss create mode 100644 src/app/tree-grid/tree-grid-row-edit-style/tree-grid-row-edit-style.component.ts diff --git a/live-editing/configs/GridConfigGenerator.ts b/live-editing/configs/GridConfigGenerator.ts index 97071eb5ec..e2df7fa036 100644 --- a/live-editing/configs/GridConfigGenerator.ts +++ b/live-editing/configs/GridConfigGenerator.ts @@ -110,6 +110,9 @@ import { PlanetComponent } from "../../src/app/grid/grid-row-drag/planet/planet. import { GridRowEditSampleComponent } from "../../src/app/grid/grid-row-editing-sample/grid-row-editing-sample.component"; +import { + GridRowEditStyleComponent +} from "../../src/app/grid/grid-row-editing-style/grid-row-editing-style.component"; import { GridRowReorderComponent } from "../../src/app/grid/grid-row-reorder-sample/grid-row-reorder"; import { FinancialSampleComponent, LocalService } from "../../src/app/grid/grid-sample-2/grid-sample-2.component"; import { GridSample3Component } from "../../src/app/grid/grid-sample-3/grid-sample-3.component"; @@ -555,6 +558,17 @@ export class GridConfigGenerator implements IConfigGenerator { }) })); + // Grid Row Editing Styling + configs.push(new Config({ + component: GridRowEditStyleComponent, + additionalFiles: ["/src/app/data/nwindData.ts"], + appModuleConfig: new AppModuleConfig({ + imports: [GridRowEditStyleComponent, IgxGridModule, IgxFocusModule, IgxIconModule], + ngDeclarations: [GridRowEditStyleComponent], + ngImports: [IgxGridModule, IgxFocusModule, IgxIconModule] + }) + })); + configs.push(new Config({ component: GridCustomFilteringComponent, additionalFiles: ["/src/app/data/nwindData.ts"], diff --git a/live-editing/configs/HierarchicalGridConfigGenerator.ts b/live-editing/configs/HierarchicalGridConfigGenerator.ts index c40b006c6a..d203d5c0b0 100644 --- a/live-editing/configs/HierarchicalGridConfigGenerator.ts +++ b/live-editing/configs/HierarchicalGridConfigGenerator.ts @@ -52,6 +52,7 @@ import { } from "../../src/app/hierarchical-grid/hierarchical-grid-resize-line-styling/hierarchical-grid-resize-line-styling.component"; import { HGridRowDragBaseComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-row-drag-base/hierarchical-row-drag-base.component"; import { HGridDragSampleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-row-drag/hierarchical-grid-row-drag.component"; +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 { HGridRowReorderComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-row-reorder/hierarchical-grid-row-reorder.component"; import { HGridSelectionSampleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-selection/hierarchical-grid-selection.component"; @@ -87,13 +88,24 @@ export class HierarchicalGridConfigGenerator implements IConfigGenerator { configs.push(new Config({ additionalFiles: ["/src/app/hierarchical-grid/data.ts"], appModuleConfig: new AppModuleConfig({ - imports: [IgxHierarchicalGridModule, HGridRowEditingSampleComponent, IgxDatePickerModule], + imports: [IgxHierarchicalGridModule, HGridRowEditingSampleComponent], ngDeclarations: [HGridRowEditingSampleComponent], - ngImports: [IgxHierarchicalGridModule, IgxDatePickerModule] + ngImports: [IgxHierarchicalGridModule] }), component: HGridRowEditingSampleComponent })); + configs.push(new Config({ + additionalFiles: ["/src/app/hierarchical-grid/data.ts"], + appModuleConfig: new AppModuleConfig({ + imports: [IgxHierarchicalGridModule, HGridRowEditStyleComponent, IgxIconModule], + ngDeclarations: [HGridRowEditStyleComponent], + ngImports: [IgxHierarchicalGridModule, IgxIconModule] + }), + component: HGridRowEditStyleComponent + + })); + configs.push(new Config({ additionalFiles: ["/src/app/hierarchical-grid/data.ts"], appModuleConfig: new AppModuleConfig({ diff --git a/live-editing/configs/TreeGridConfigGenerator.ts b/live-editing/configs/TreeGridConfigGenerator.ts index f1ff65c4d6..2f897868c9 100644 --- a/live-editing/configs/TreeGridConfigGenerator.ts +++ b/live-editing/configs/TreeGridConfigGenerator.ts @@ -61,6 +61,7 @@ import { TreeGridRemotePagingSampleComponent } from "../../src/app/tree-grid/tre import { TreeGridResizeLineStylingSampleComponent } from "../../src/app/tree-grid/tree-grid-resize-line-styling-sample/tree-grid-resize-line-styling-sample.component"; import { TreeGridRowDragBase } from "../../src/app/tree-grid/tree-grid-row-drag-base/tree-grid-row-drag-base.component"; import { TreeGridRowDrag } from "../../src/app/tree-grid/tree-grid-row-drag/tree-grid-row-drag.component"; +import { TreeGridRowEditStyleComponent } from "../../src/app/tree-grid/tree-grid-row-edit-style/tree-grid-row-edit-style.component"; import { TreeGridRowEditSampleComponent } from "../../src/app/tree-grid/tree-grid-row-edit/tree-grid-row-editing-sample.component"; import { TreeGridRowReorderComponent } from "../../src/app/tree-grid/tree-grid-row-reorder/tree-grid-row-reorder.component"; import { TreeGridSearchSampleComponent } from "../../src/app/tree-grid/tree-grid-search-sample/tree-grid-search-sample.component"; @@ -120,6 +121,18 @@ export class TreeGridConfigGenerator implements IConfigGenerator { shortenComponentPathBy: "/tree-grid/" })); + // TreeGrid Row Edit Style + configs.push(new Config({ + additionalFiles: ["/src/app/tree-grid/data/employees-flat.ts"], + appModuleConfig: new AppModuleConfig({ + imports: [IgxTreeGridModule, TreeGridRowEditStyleComponent, IgxIconModule], + ngDeclarations: [TreeGridRowEditStyleComponent], + ngImports: [IgxTreeGridModule, IgxIconModule] + }), + component: TreeGridRowEditStyleComponent, + shortenComponentPathBy: "/tree-grid/" + })); + // TreeGrid Virtualization sample configs.push(new Config({ additionalFiles: ["/src/app/grid/services/financialData.ts"], diff --git a/src/app/grid/grid-routes-data.ts b/src/app/grid/grid-routes-data.ts index 42274b57f8..8ce020aa83 100644 --- a/src/app/grid/grid-routes-data.ts +++ b/src/app/grid/grid-routes-data.ts @@ -54,6 +54,7 @@ export const gridsRoutesData = { "custom-grid-paging-style": { displayName: "Custom Grid Paging Style", parentName: "Grid" }, "grid-nested-data-binding": { displayName: "Grid Nested Data Binding", parentName: "Grid" }, "grid-composite-data-binding": { displayName: "Grid Composite Data Binding", parentName: "Grid" }, + "grid-row-edit-style" : { displayName: "Grid Row Edit Style", parentName: "Grid" }, "grid-contextmenu-sample": { displayName: "Grid Context Menu", parentName: "Grid" }, "grid-column-hiding-style": { displayName: "Grid Column Hiding Style", parentName: "Grid" }, "multi-column-header-template": { displayName: "Grid Multi Column Header Template", parentName: "Grid" }, diff --git a/src/app/grid/grid-row-editing-style/grid-row-editing-style.component.html b/src/app/grid/grid-row-editing-style/grid-row-editing-style.component.html new file mode 100644 index 0000000000..7b579292da --- /dev/null +++ b/src/app/grid/grid-row-editing-style/grid-row-editing-style.component.html @@ -0,0 +1,33 @@ +
+ + + + + + + + + + + + + + + + Changes: {{rowChangesCount}} + + + + + + + + + + + +
\ No newline at end of file diff --git a/src/app/grid/grid-row-editing-style/grid-row-editing-style.component.scss b/src/app/grid/grid-row-editing-style/grid-row-editing-style.component.scss new file mode 100644 index 0000000000..c35c352332 --- /dev/null +++ b/src/app/grid/grid-row-editing-style/grid-row-editing-style.component.scss @@ -0,0 +1,64 @@ +@import '~igniteui-angular/lib/core/styles/themes/index'; + +$button-color: igx-color($default-palette, "primary", 400); +$changes-color: igx-color($default-palette, "primary", 400); +$banner-color: igx-color($default-palette, "primary", 400); +$editing-color: igx-contrast($default-palette, "primary", 200); +$success: igx-color($default-palette, "success", 500); +$failure: igx-color($default-palette, "error", 500); + +$my-success-error-palette: igx-palette($primary: $success, $secondary: $failure); + +$custom-grid: igx-grid-theme( + $cell-editing-background: igx-color($default-palette, "primary", 200) +); + +.sample-wrapper { + margin: 0 auto; + padding: 5px; +} + +$input-group: igx-input-group-theme( + $filled-text-color: $editing-color, + $focused-text-color: $editing-color, + $idle-text-color: $editing-color +); + +$banner-theme: igx-banner-theme( + $banner-background: igx-color($default-palette, "primary", 100), + $banner-message-color: igx-contrast($default-palette, "primary", 100), + $banner-border-color: igx-color($default-palette, "second", 800) +); + +$button-theme-success: igx-button-theme( + $icon-color: igx-contrast($my-success-error-palette, "primary", 200), + $icon-hover-color: igx-contrast($my-success-error-palette, "primary", 600), + $icon-focus-color: igx-contrast($my-success-error-palette, "primary", 300), + $icon-background: igx-color($my-success-error-palette, "primary", 200), + $icon-hover-background: igx-color($my-success-error-palette, "primary", 600), + $icon-focus-background: igx-color($my-success-error-palette, "primary", 300) +); +$button-theme-failure: igx-button-theme( + $icon-color: igx-contrast($my-success-error-palette, "secondary", 200), + $icon-hover-color: igx-contrast($my-success-error-palette, "secondary", 600), + $icon-focus-color: igx-contrast($my-success-error-palette, "secondary", 300), + $icon-background: igx-color($my-success-error-palette, "secondary", 200), + $icon-hover-background: igx-color($my-success-error-palette, "secondary", 600), + $icon-focus-background: igx-color($my-success-error-palette, "secondary", 300) +); + +.custom-failure { + @include igx-button($button-theme-failure); + } + +.custom-success { + @include igx-button($button-theme-success); + } + +::ng-deep { + .sample-wrapper { + @include igx-grid($custom-grid); + @include igx-input-group($input-group); + @include igx-banner($banner-theme); + } +} \ No newline at end of file diff --git a/src/app/grid/grid-row-editing-style/grid-row-editing-style.component.ts b/src/app/grid/grid-row-editing-style/grid-row-editing-style.component.ts new file mode 100644 index 0000000000..8e883857a4 --- /dev/null +++ b/src/app/grid/grid-row-editing-style/grid-row-editing-style.component.ts @@ -0,0 +1,19 @@ +import { Component, ViewChild } from "@angular/core"; +import { DATA } from "../../data/nwindData"; + +import { IgxGridComponent } from "igniteui-angular"; + +@Component({ + selector: "app-grid-row-edit-style", + styleUrls: [`grid-row-editing-style.component.scss`], + templateUrl: "grid-row-editing-style.component.html" +}) +export class GridRowEditStyleComponent { + @ViewChild("gridRowEdit", { read: IgxGridComponent, static: true }) public gridRowEdit: IgxGridComponent; + + public data: any[]; + + constructor() { + this.data = DATA; + } +} diff --git a/src/app/grid/grids-routing.module.ts b/src/app/grid/grids-routing.module.ts index ad4e432c36..387aa4a64f 100644 --- a/src/app/grid/grids-routing.module.ts +++ b/src/app/grid/grids-routing.module.ts @@ -38,6 +38,7 @@ import { GridDragBaseSampleComponent } from "./grid-row-drag-base/grid-row-drag- import { GridDragToGridSampleComponent } from "./grid-row-drag-to-grid/grid-row-drag-to-grid.component"; import { GridDragSampleComponent } from "./grid-row-drag/grid-row-drag.component"; import { GridRowEditSampleComponent } from "./grid-row-editing-sample/grid-row-editing-sample.component"; +import { GridRowEditStyleComponent } from "./grid-row-editing-style/grid-row-editing-style.component"; import { GridRowReorderComponent } from "./grid-row-reorder-sample/grid-row-reorder"; import { FinancialSampleComponent } from "./grid-sample-2/grid-sample-2.component"; import { GridSample3Component } from "./grid-sample-3/grid-sample-3.component"; @@ -99,6 +100,11 @@ export const gridsRoutes: Routes = [ data: gridsRoutesData["grid-row-editing"], path: "grid-row-editing" }, + { + component: GridRowEditStyleComponent, + data: gridsRoutesData["grid-row-editing-style"], + path: "grid-row-edit-style" + }, { component: GridDragSampleComponent, data: gridsRoutesData["grid-row-drag"], diff --git a/src/app/grid/grids.module.ts b/src/app/grid/grids.module.ts index 464525ade3..6666acbbd0 100644 --- a/src/app/grid/grids.module.ts +++ b/src/app/grid/grids.module.ts @@ -49,6 +49,7 @@ import { GridDragToGridSampleComponent } from "./grid-row-drag-to-grid/grid-row- import { GridDragSampleComponent } from "./grid-row-drag/grid-row-drag.component"; import { PlanetComponent } from "./grid-row-drag/planet/planet.component"; import { GridRowEditSampleComponent } from "./grid-row-editing-sample/grid-row-editing-sample.component"; +import { GridRowEditStyleComponent } from "./grid-row-editing-style/grid-row-editing-style.component"; import { GridRowReorderComponent } from "./grid-row-reorder-sample/grid-row-reorder"; import { FinancialSampleComponent } from "./grid-sample-2/grid-sample-2.component"; import { GridSample3Component } from "./grid-sample-3/grid-sample-3.component"; @@ -102,6 +103,7 @@ import { GridResizeLineStylingSampleComponent } from "./grid-resize-line-styling ResizingSampleComponent, GridResizeLineStylingSampleComponent, GridRowEditSampleComponent, + GridRowEditStyleComponent, GridEditingStyleSample, FinancialSampleComponent, GridSample3Component, diff --git a/src/app/hierarchical-grid/hierarchical-grid-routes-data.ts b/src/app/hierarchical-grid/hierarchical-grid-routes-data.ts index 7a7416ac8c..717ca56679 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-routes-data.ts +++ b/src/app/hierarchical-grid/hierarchical-grid-routes-data.ts @@ -37,5 +37,6 @@ export const hierarchicalGridRoutesData = { "hierarchical-grid-paging-style": { displayName: "HGrid Paging Style", parentName: "Hierarchical Grid" }, "hierarchical-grid-column-hiding-style": { displayName: "HGrid Column Hiding Style", parentName: "Hierarchical Grid" }, "hierarchical-grid-multi-column-template": { displayName: "Hierarchical Grid Multi Column Header Template", parentName: "Hierarchical Grid" }, + "hierarchical-grid-row-edit-style": { displayName: "HGrid Row Edit Style", parentName: "Hierarchical Grid" }, "hierarchical-grid-toolbar-style": { displayName: "HGrid Toolbar Style", parentName: "Hierarchical Grid" } }; diff --git a/src/app/hierarchical-grid/hierarchical-grid-routing.module.ts b/src/app/hierarchical-grid/hierarchical-grid-routing.module.ts index 10d8fa4aa2..8faf95afc5 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-routing.module.ts +++ b/src/app/hierarchical-grid/hierarchical-grid-routing.module.ts @@ -37,6 +37,7 @@ import { HGridResizeLineStylingComponent } from "./hierarchical-grid-resize-line import { hierarchicalGridRoutesData } from "./hierarchical-grid-routes-data"; import { HGridRowDragBaseComponent } from "./hierarchical-grid-row-drag-base/hierarchical-row-drag-base.component"; import { HGridDragSampleComponent } from "./hierarchical-grid-row-drag/hierarchical-grid-row-drag.component"; +import { HGridRowEditStyleComponent } from "./hierarchical-grid-row-edit-style/hierarchical-grid-row-edit-style.component"; import { HGridRowEditingSampleComponent } from "./hierarchical-grid-row-editing/hierarchical-grid-row-editing.component"; import { HGridRowReorderComponent } from "./hierarchical-grid-row-reorder/hierarchical-grid-row-reorder.component"; import { HGridSelectionSampleComponent } from "./hierarchical-grid-selection/hierarchical-grid-selection.component"; @@ -197,6 +198,12 @@ export const hierarchicalGridRoutes: Routes = [ data: hierarchicalGridRoutesData["hierarchical-grid-row-editing"], path: "hierarchical-grid-row-editing" }, + { + component: HGridRowEditStyleComponent, + // tslint:disable-next-line:no-string-literal + data: hierarchicalGridRoutesData["hierarchical-grid-row-edit-style"], + path: "hierarchical-grid-row-edit-style" + }, { component: HGridDragSampleComponent, data: hierarchicalGridRoutesData["hierarchical-grid-row-drag"], diff --git a/src/app/hierarchical-grid/hierarchical-grid-row-edit-style/hierarchical-grid-row-edit-style.component.html b/src/app/hierarchical-grid/hierarchical-grid-row-edit-style/hierarchical-grid-row-edit-style.component.html new file mode 100644 index 0000000000..21220c9ddc --- /dev/null +++ b/src/app/hierarchical-grid/hierarchical-grid-row-edit-style/hierarchical-grid-row-edit-style.component.html @@ -0,0 +1,49 @@ + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + Changes: {{rowChangesCount}} + + + + + + + + + + \ No newline at end of file diff --git a/src/app/hierarchical-grid/hierarchical-grid-row-edit-style/hierarchical-grid-row-edit-style.component.scss b/src/app/hierarchical-grid/hierarchical-grid-row-edit-style/hierarchical-grid-row-edit-style.component.scss new file mode 100644 index 0000000000..aacb96187a --- /dev/null +++ b/src/app/hierarchical-grid/hierarchical-grid-row-edit-style/hierarchical-grid-row-edit-style.component.scss @@ -0,0 +1,69 @@ + +@import '~igniteui-angular/lib/core/styles/themes/index'; + +.photo { + vertical-align: middle; + max-height: 62px; +} +.cell__inner_2 { + margin: 1px +} + +$button-color: igx-color($default-palette, "primary", 400); +$changes-color: igx-color($default-palette, "primary", 400); +$banner-color: igx-color($default-palette, "primary", 400); +$editing-color: igx-contrast($default-palette, "primary", 100); +$success: igx-color($default-palette, "success", 500); +$failure: igx-color($default-palette, "error", 500); + +$my-success-error-palette: igx-palette($primary: $success, $secondary: $failure); + +$custom-grid: igx-grid-theme( + $cell-editing-background: igx-color($default-palette, "primary", 200) +); + + +$input-group: igx-input-group-theme( + $filled-text-color: $editing-color, + $focused-text-color: $editing-color, + $idle-text-color: $editing-color +); + +$banner-theme: igx-banner-theme( + $banner-background: igx-color($default-palette, "primary", 100), + $banner-message-color: igx-contrast($default-palette, "primary", 100), + $banner-border-color: igx-color($default-palette, "second", 800) +); + +$button-theme-success: igx-button-theme( + $icon-color: igx-contrast($my-success-error-palette, "primary", 200), + $icon-hover-color: igx-contrast($my-success-error-palette, "primary", 600), + $icon-focus-color: igx-contrast($my-success-error-palette, "primary", 300), + $icon-background: igx-color($my-success-error-palette, "primary", 200), + $icon-hover-background: igx-color($my-success-error-palette, "primary", 600), + $icon-focus-background: igx-color($my-success-error-palette, "primary", 300) +); +$button-theme-failure: igx-button-theme( + $icon-color: igx-contrast($my-success-error-palette, "secondary", 200), + $icon-hover-color: igx-contrast($my-success-error-palette, "secondary", 600), + $icon-focus-color: igx-contrast($my-success-error-palette, "secondary", 300), + $icon-background: igx-color($my-success-error-palette, "secondary", 200), + $icon-hover-background: igx-color($my-success-error-palette, "secondary", 600), + $icon-focus-background: igx-color($my-success-error-palette, "secondary", 300) +); + +.custom-failure { + @include igx-button($button-theme-failure); + } + +.custom-success { + @include igx-button($button-theme-success); + } + +:host { + ::ng-deep { + @include igx-grid($custom-grid); + @include igx-input-group($input-group); + @include igx-banner($banner-theme); + } +} diff --git a/src/app/hierarchical-grid/hierarchical-grid-row-edit-style/hierarchical-grid-row-edit-style.component.ts b/src/app/hierarchical-grid/hierarchical-grid-row-edit-style/hierarchical-grid-row-edit-style.component.ts new file mode 100644 index 0000000000..4712700b9e --- /dev/null +++ b/src/app/hierarchical-grid/hierarchical-grid-row-edit-style/hierarchical-grid-row-edit-style.component.ts @@ -0,0 +1,24 @@ +import { Component, OnInit, ViewChild } from "@angular/core"; +import { IgxHierarchicalGridComponent } from "igniteui-angular"; +import { SINGERS } from "../data"; + +@Component({ + selector: "hierarchical-grid-row-edit-style", + styleUrls: ["./hierarchical-grid-row-edit-style.component.scss"], + templateUrl: "hierarchical-grid-row-edit-style.component.html" +}) + +export class HGridRowEditStyleComponent implements OnInit { + public localdata; + + @ViewChild("hierarchicalGrid", { static: true }) + private hierarchicalGrid: IgxHierarchicalGridComponent; + + constructor() { + this.localdata = SINGERS; + } + public ngOnInit(): void { + + } + +} diff --git a/src/app/hierarchical-grid/hierarchical-grid.module.ts b/src/app/hierarchical-grid/hierarchical-grid.module.ts index a618896f91..2743626348 100644 --- a/src/app/hierarchical-grid/hierarchical-grid.module.ts +++ b/src/app/hierarchical-grid/hierarchical-grid.module.ts @@ -45,6 +45,7 @@ import { HGridResizeLineStylingComponent } from "./hierarchical-grid-resize-line import { HierarchicalGridRoutingModule } from "./hierarchical-grid-routing.module"; import { HGridRowDragBaseComponent } from "./hierarchical-grid-row-drag-base/hierarchical-row-drag-base.component"; import { HGridDragSampleComponent } from "./hierarchical-grid-row-drag/hierarchical-grid-row-drag.component"; +import { HGridRowEditStyleComponent } from "./hierarchical-grid-row-edit-style/hierarchical-grid-row-edit-style.component"; import { HGridRowEditingSampleComponent } from "./hierarchical-grid-row-editing/hierarchical-grid-row-editing.component"; import { HGridRowReorderComponent } from "./hierarchical-grid-row-reorder/hierarchical-grid-row-reorder.component"; import { HGridSelectionSampleComponent } from "./hierarchical-grid-selection/hierarchical-grid-selection.component"; @@ -80,6 +81,7 @@ import { HGridToolbarTitleSampleComponent } from "./hierarchical-grid-toolbar/hi HGridToolbarOptionsSampleComponent, HGridToolbarCustomSampleComponent, HGridRowEditingSampleComponent, + HGridRowEditStyleComponent, HGridEditingSampleComponent, HGridEditingStyleComponent, HGridBatchEditingSampleComponent, diff --git a/src/app/tree-grid/tree-grid-routes-data.ts b/src/app/tree-grid/tree-grid-routes-data.ts index d87a9ac944..a6fd24ce0e 100644 --- a/src/app/tree-grid/tree-grid-routes-data.ts +++ b/src/app/tree-grid/tree-grid-routes-data.ts @@ -6,6 +6,7 @@ export const treeGridRoutesData = { "treegrid-childdatakey": { displayName: "TreeGrid ChildDataKey", parentName: "TreeGrid" }, "treegrid-primaryforeignkey": { displayName: "TreeGrid Primary/Foreign key", parentName: "TreeGrid" }, "treegrid-row-edit": { displayName: "TreeGrid Row Editing", parentName: "TreeGrid" }, + "treegrid-row-edit-style": { displayName: "TreeGrid Row Edit Style", parentName: "TreeGrid"}, "treegrid-batchediting": { displayName: "TreeGrid Batch Editing", parentName: "TreeGrid" }, "treegrid-employees": { displayName: "TreeGrid Employees", parentName: "TreeGrid" }, "treegrid-search": { displayName: "TreeGrid Search", parentName: "TreeGrid" }, diff --git a/src/app/tree-grid/tree-grid-routing.module.ts b/src/app/tree-grid/tree-grid-routing.module.ts index 7d22f644c9..f166e11e41 100644 --- a/src/app/tree-grid/tree-grid-routing.module.ts +++ b/src/app/tree-grid/tree-grid-routing.module.ts @@ -88,6 +88,7 @@ import { import { treeGridRoutesData } from "./tree-grid-routes-data"; import { TreeGridRowDragBase } from "./tree-grid-row-drag-base/tree-grid-row-drag-base.component"; import { TreeGridRowDrag } from "./tree-grid-row-drag/tree-grid-row-drag.component"; +import { TreeGridRowEditStyleComponent } from "./tree-grid-row-edit-style/tree-grid-row-edit-style.component"; import { TreeGridRowEditSampleComponent } from "./tree-grid-row-edit/tree-grid-row-editing-sample.component"; import { TreeGridRowReorderComponent } from "./tree-grid-row-reorder/tree-grid-row-reorder.component"; import { TreeGridSearchSampleComponent } from "./tree-grid-search-sample/tree-grid-search-sample.component"; @@ -128,6 +129,11 @@ export const treeGridRoutes: Routes = [ data: treeGridRoutesData["treegrid-row-edit"], path: "treegrid-row-edit" }, + { + component: TreeGridRowEditStyleComponent, + data: treeGridRoutesData["treegrid-row-edit-style"], + path: "treegrid-row-edit-style" + }, { component: TreeGridBatchEditingSampleComponent, data: treeGridRoutesData["treegrid-batchediting"], diff --git a/src/app/tree-grid/tree-grid-row-edit-style/tree-grid-row-edit-style.component.html b/src/app/tree-grid/tree-grid-row-edit-style/tree-grid-row-edit-style.component.html new file mode 100644 index 0000000000..b8039b2ae0 --- /dev/null +++ b/src/app/tree-grid/tree-grid-row-edit-style/tree-grid-row-edit-style.component.html @@ -0,0 +1,24 @@ +
+ + + + + Changes: {{rowChangesCount}} + + + + + + + + + + +
\ No newline at end of file diff --git a/src/app/tree-grid/tree-grid-row-edit-style/tree-grid-row-edit-style.component.scss b/src/app/tree-grid/tree-grid-row-edit-style/tree-grid-row-edit-style.component.scss new file mode 100644 index 0000000000..b614858dc5 --- /dev/null +++ b/src/app/tree-grid/tree-grid-row-edit-style/tree-grid-row-edit-style.component.scss @@ -0,0 +1,64 @@ +@import '~igniteui-angular/lib/core/styles/themes/index'; + +$button-color: igx-color($default-palette, "primary", 400); +$changes-color: igx-color($default-palette, "primary", 400); +$banner-color: igx-color($default-palette, "primary", 400); +$editing-color: igx-contrast($default-palette, "primary", 200); +$success: igx-color($default-palette, "success", 500); +$failure: igx-color($default-palette, "error", 500); + +$my-success-error-palette: igx-palette($primary: $success, $secondary: $failure); + +$custom-grid: igx-grid-theme( + $cell-editing-background: igx-color($default-palette, "primary", 200) +); + +.grid__wrapper { + margin: 0 auto; + padding: 5px; +} + +$input-group: igx-input-group-theme( + $filled-text-color: $editing-color, + $focused-text-color: $editing-color, + $idle-text-color: $editing-color +); + +$banner-theme: igx-banner-theme( + $banner-background: igx-color($default-palette, "primary", 100), + $banner-message-color: igx-contrast($default-palette, "primary", 100), + $banner-border-color: igx-color($default-palette, "second", 800) +); + +$button-theme-success: igx-button-theme( + $icon-color: igx-contrast($my-success-error-palette, "primary", 200), + $icon-hover-color: igx-contrast($my-success-error-palette, "primary", 600), + $icon-focus-color: igx-contrast($my-success-error-palette, "primary", 300), + $icon-background: igx-color($my-success-error-palette, "primary", 200), + $icon-hover-background: igx-color($my-success-error-palette, "primary", 600), + $icon-focus-background: igx-color($my-success-error-palette, "primary", 300) +); +$button-theme-failure: igx-button-theme( + $icon-color: igx-contrast($my-success-error-palette, "secondary", 200), + $icon-hover-color: igx-contrast($my-success-error-palette, "secondary", 600), + $icon-focus-color: igx-contrast($my-success-error-palette, "secondary", 300), + $icon-background: igx-color($my-success-error-palette, "secondary", 200), + $icon-hover-background: igx-color($my-success-error-palette, "secondary", 600), + $icon-focus-background: igx-color($my-success-error-palette, "secondary", 300) +); + +.custom-failure { + @include igx-button($button-theme-failure); + } + +.custom-success { + @include igx-button($button-theme-success); + } + +::ng-deep { + .grid__wrapper { + @include igx-grid($custom-grid); + @include igx-input-group($input-group); + @include igx-banner($banner-theme); + } +} \ No newline at end of file diff --git a/src/app/tree-grid/tree-grid-row-edit-style/tree-grid-row-edit-style.component.ts b/src/app/tree-grid/tree-grid-row-edit-style/tree-grid-row-edit-style.component.ts new file mode 100644 index 0000000000..99c7797737 --- /dev/null +++ b/src/app/tree-grid/tree-grid-row-edit-style/tree-grid-row-edit-style.component.ts @@ -0,0 +1,27 @@ +import { Component, OnInit, ViewChild } from "@angular/core"; +import { IgxTreeGridComponent } from "igniteui-angular"; +import { generateEmployeeFlatData, IEmployee } from "../data/employees-flat"; + +@Component({ + selector: "app-tree-grid-row-edit-style", + styleUrls: ["tree-grid-row-edit-style.component.scss"], + templateUrl: "tree-grid-row-edit-style.component.html" +}) +export class TreeGridRowEditStyleComponent implements OnInit { + + public data: IEmployee[]; + public columns: any[]; + + @ViewChild("treeGrid", { static: true }) public treeGrid1: IgxTreeGridComponent; + public ngOnInit(): void { + this.data = generateEmployeeFlatData(); + + this.columns = [ + // tslint:disable:max-line-length + { field: "Name", label: "Full Name", resizable: true, movable: true, sortable: true, filterable: true, editable: true, dataType: "string" }, + { field: "Age", label: "Age", resizable: false, movable: false, sortable: false, filterable: false, editable: true, dataType: "number" }, + { field: "Title", label: "Title", resizable: true, movable: true, sortable: true, filterable: true, editable: true, dataType: "string" }, + { field: "HireDate", label: "Hire Date", resizable: true, movable: true, sortable: true, filterable: true, editable: true, dataType: "date" } + ]; + } +} diff --git a/src/app/tree-grid/tree-grid.module.ts b/src/app/tree-grid/tree-grid.module.ts index 69edefcad7..9a8564b3fa 100644 --- a/src/app/tree-grid/tree-grid.module.ts +++ b/src/app/tree-grid/tree-grid.module.ts @@ -105,6 +105,7 @@ import { import { TreeGridRoutingModule } from "./tree-grid-routing.module"; import { TreeGridRowDragBase } from "./tree-grid-row-drag-base/tree-grid-row-drag-base.component"; import { TreeGridRowDrag } from "./tree-grid-row-drag/tree-grid-row-drag.component"; +import { TreeGridRowEditStyleComponent } from "./tree-grid-row-edit-style/tree-grid-row-edit-style.component"; import { TreeGridRowEditSampleComponent } from "./tree-grid-row-edit/tree-grid-row-editing-sample.component"; import { TreeGridRowReorderComponent } from "./tree-grid-row-reorder/tree-grid-row-reorder.component"; import { TreeGridSearchSampleComponent } from "./tree-grid-search-sample/tree-grid-search-sample.component"; @@ -137,6 +138,7 @@ import { TreeGridChilddatakeySampleComponent, TreeGridPrimaryforeignkeySampleComponent, TreeGridRowEditSampleComponent, + TreeGridRowEditStyleComponent, TreeGridBatchEditingSampleComponent, TreeGridEmployeesSampleComponent, TreeGridPagingStyleSampleComponent,