feat(grid): add row editing styling samples #1248

IgniteUI · Jul 18, 2019 · ccfef05 · ccfef05
1 parent 24891b6
commit ccfef05
Show file tree

Hide file tree

Showing 21 changed files with 442 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,33 @@
+<div class="sample-wrapper">
+    <igx-grid #gridRowEdit [data]="data" [primaryKey]="'ProductID'" width="100%" height="500px" [rowEditable]="true">
+        <igx-column field="ProductID" header="Product ID"></igx-column>
+        <igx-column field="ReorderLevel" header="ReorderLever" [dataType]="'number'"></igx-column>
+        <igx-column field="ProductName" header="ProductName" [dataType]="'string'"></igx-column>
+        <igx-column field="UnitsInStock" header="UnitsInStock" [dataType]="'number'">
+            <!--The following template can be omitted (grid handles this internally) but it is here as an example of custom cell editor.-->
+            <ng-template igxCellEditor let-cell="cell">
+                <igx-input-group>
+                    <input igxInput [igxFocus]='true' name="units" [(ngModel)]="cell.value" style="color: black" />
+                </igx-input-group>
+            </ng-template>
+        </igx-column>
+        <igx-column field="OrderDate" [dataType]="'date'"></igx-column>
+        <igx-column field="Discontinued" header="Discontinued" [dataType]="'boolean'"></igx-column>
+        <ng-template igxRowEditText let-rowChangesCount>
+            <span class="changes"> Changes: {{rowChangesCount}}</span>
+
+        </ng-template>
+        <ng-template igxRowEditActions let-endRowEdit>
+            <span class="custom-failure">
+                <button igxButton="icon" class="custom-button" igxRowEditTabStop (click)="endRowEdit(false)">
+                    <igx-icon>clear</igx-icon>
+                </button>
+            </span>
+            <span class="custom-success">
+                <button igxButton="icon" class="custom-button" igxRowEditTabStop (click)="endRowEdit(true)">
+                    <igx-icon>check</igx-icon>
+                </button>
+            </span>
+        </ng-template>
+    </igx-grid>
+</div>
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
@@ -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);
+    }
+}
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/...cal-grid/hierarchical-grid-row-edit-style/hierarchical-grid-row-edit-style.component.html b/...cal-grid/hierarchical-grid-row-edit-style/hierarchical-grid-row-edit-style.component.html
@@ -0,0 +1,49 @@
+<igx-hierarchical-grid #hierarchicalGrid class="hgrid" [data]="localdata" [primaryKey]="'Photo'" [autoGenerate]="false"
+    [height]="'500px'" [width]="'100%'" [rowHeight]="'65px'" [rowEditable]="true">
+    <igx-column field="Artist"></igx-column>
+    <igx-column field="Photo" [editable]="false">
+        <ng-template igxCell let-cell="cell">
+            <div class="cell__inner_2">
+                <img [src]="cell.value" class="photo" />
+            </div>
+        </ng-template>
+    </igx-column>
+    <igx-column field="Debut"></igx-column>
+    <igx-column field="Grammy Nominations" [dataType]="'number'"></igx-column>
+    <igx-column field="Grammy Awards" [dataType]="'number'"></igx-column>
+
+    <igx-row-island [key]="'Albums'" [autoGenerate]="false" [primaryKey]="'Album'" [rowEditable]="true">
+        <igx-column field="Album"></igx-column>
+        <igx-column field="Launch Date" [dataType]="'date'"></igx-column>
+        <igx-column field="Billboard Review"></igx-column>
+        <igx-column field="US Billboard 200"></igx-column>
+        <igx-row-island [key]="'Songs'" [autoGenerate]="false">
+            <igx-column field="No."></igx-column>
+            <igx-column field="Title"></igx-column>
+            <igx-column field="Released"></igx-column>
+            <igx-column field="Genre"></igx-column>
+        </igx-row-island>
+    </igx-row-island>
+
+    <igx-row-island [key]="'Tours'" [autoGenerate]="false">
+        <igx-column field="Tour"></igx-column>
+        <igx-column field="Started on"></igx-column>
+        <igx-column field="Location"></igx-column>
+        <igx-column field="Headliner"></igx-column>
+    </igx-row-island>
+    <ng-template igxRowEditText let-rowChangesCount>
+        <span class="changes"> Changes: {{rowChangesCount}}</span>
+    </ng-template>
+    <ng-template igxRowEditActions let-endRowEdit>
+        <span class="custom-failure">
+            <button igxButton="icon" class="custom-button" igxRowEditTabStop (click)="endRowEdit(false)">
+                <igx-icon>clear</igx-icon>
+            </button>
+        </span>
+        <span class="custom-success">
+            <button igxButton="icon" class="custom-button" igxRowEditTabStop (click)="endRowEdit(true)">
+                <igx-icon>check</igx-icon>
+            </button>
+        </span>
+    </ng-template>
+</igx-hierarchical-grid>