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,