Skip to content

Commit 2cee12b

Browse files
skrustevSvetoslav Krastev
skrustev
and
Svetoslav Krastev
authored
Cancel rowEdit on invalid state for Grid Cross Field validation sample. Tweak styles. (#3097)
* Cancel rowEdit on invalid state for Grid Cross Field validation sample. Tweak styles. * Cancel edit event for the Tree Grid in Hierarchical Grid cross field validation samples. * Add cell edit canceliing for cross-field samples * Update hierarchical cross field sample's row islands with new handler. * Remove leftover method. * Tweak Hierarchical Grid cross-field validation styles. * Further tweak and unify cross-field validation sample styles. Co-authored-by: Svetoslav Krastev <SKrastev@infragistics.com>
1 parent d263a81 commit 2cee12b

9 files changed

Lines changed: 138 additions & 76 deletions

‎src/app/grid/grid-validator-service-cross-field/grid-validator-service-cross-field.component.html‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
1+
<div class="top-row">
2+
<igx-switch [(ngModel)]="rowEdit">Row edit</igx-switch>
3+
</div>
14
<div class="grid__wrapper">
2-
<igx-grid #grid1 [data]="transactionData" [width]="'100%'" [height]="'480px'" [autoGenerate]="false" [batchEditing]="true" [rowEditable]="true"
3-
[primaryKey]="'id'" (formGroupCreated)='formCreateHandler($event)'>
5+
<igx-grid #grid1 [data]="transactionData" [width]="'100%'" [height]="'500px'" [autoGenerate]="false" [batchEditing]="true" [rowEditable]="rowEdit"
6+
[primaryKey]="'id'" (formGroupCreated)="formCreateHandler($event)" (cellEdit)="editHandler($event)" (rowEdit)="editHandler($event)">
47
<igx-column field="Avatar" header="Photo" dataType="string" width="80" [editable]="false">
58
<ng-template igxCell let-cell="cell">
69
<div class="cell__inner avatar-cell">
@@ -48,10 +51,10 @@
4851
</igx-column>
4952
<igx-column field="row_valid" header=" " [editable]="false" [pinned]="true" [width]="'50px'">
5053
<ng-template igxCell let-cell="cell">
51-
<div *ngIf="isRowValid(cell)" [igxTooltipTarget]="tooltipRef" style="margin-right: '-10px';">
54+
<div *ngIf="isRowValid(cell)" [igxTooltipTarget]="tooltipRef" class="valid-image">
5255
<img width="18" src="assets/images/grid/active.png"/>
5356
</div>
54-
<div *ngIf="!isRowValid(cell)" [igxTooltipTarget]="tooltipRef" style="margin-right: '-10px';">
57+
<div *ngIf="!isRowValid(cell)" [igxTooltipTarget]="tooltipRef" class="valid-image">
5558
<img width="18" src="assets/images/grid/expired.png"/>
5659
</div>
5760
<div #tooltipRef="tooltip" igxTooltip [style.width]="'max-content'">
@@ -62,6 +65,8 @@
6265
</ng-template>
6366
</igx-column>
6467
</igx-grid>
68+
<div class="buttons-wrapper">
69+
<button igxButton [disabled]="grid1.transactions.getAggregatedChanges(false).length < 1" (click)="commit()">Commit</button>
70+
</div>
6571
</div>
6672

67-
<button igxButton [disabled]="grid1.transactions.getAggregatedChanges(false).length < 1" (click)="commit()">Commit</button>

‎src/app/grid/grid-validator-service-cross-field/grid-validator-service-cross-field.component.scss‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,15 @@
1-
.grid__wrapper {
2-
margin: 0 auto;
1+
.top-row, .grid__wrapper {
32
padding: 16px;
3+
padding-bottom: 0;
4+
}
5+
6+
.valid-image {
7+
margin-left: -5px;
8+
}
9+
10+
.buttons-wrapper {
11+
display: flex;
12+
flex-direction: row;
13+
justify-content: start;
14+
padding: 10px 0;
415
}

‎src/app/grid/grid-validator-service-cross-field/grid-validator-service-cross-field.component.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Component, ViewChild } from '@angular/core';
22
import { AbstractControl, FormGroup, ValidationErrors, ValidatorFn } from '@angular/forms';
3-
import { CellType, IgxGridComponent } from 'igniteui-angular';
3+
import { CellType, IgxGridComponent, IGridEditEventArgs } from 'igniteui-angular';
44
import { IGridFormGroupCreatedEventArgs } from 'igniteui-angular/lib/grids/common/grid.interface';
55
import { employeesData } from '../../data/employeesData';
66

@@ -14,6 +14,7 @@ export class GridValidatorServiceCrossFieldComponent {
1414
@ViewChild('grid1', { read: IgxGridComponent })
1515
public grid: IgxGridComponent;
1616
public transactionData = JSON.parse(JSON.stringify(employeesData));
17+
public rowEdit: boolean = true;
1718

1819
public formCreateHandler(evt: IGridFormGroupCreatedEventArgs) {
1920
const createdOnRecord = evt.formGroup.get('created_on');
@@ -23,6 +24,12 @@ export class GridValidatorServiceCrossFieldComponent {
2324
evt.formGroup.addValidators(this.rowValidator());
2425
}
2526

27+
public editHandler(event: IGridEditEventArgs) {
28+
if (!event.valid) {
29+
event.cancel = true;
30+
}
31+
}
32+
2633
public commit() {
2734
const invalidTransactions = this.grid.validation.getInvalid();
2835
if (invalidTransactions.length > 0 && !confirm('You\'re committing invalid transactions. Are you sure?')) {

‎src/app/hierarchical-grid/hierarchical-grid-cross-field-validation/hierarchical-grid-cross-field-validation.component.html‎

Lines changed: 67 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,80 @@
1+
<div class="top-row">
2+
<igx-switch [(ngModel)]="rowEdit">Row edit</igx-switch>
3+
</div>
14
<div class="grid__wrapper">
2-
<igx-hierarchical-grid (formGroupCreated)='formCreateCustomerHandler($event)' [igxPreventDocumentScroll]="true" [primaryKey]="'CustomerID'" [rowEditable]="true" [batchEditing]='true' #hierarchicalGrid [data]="localdata" [height]="'470px'" [width]="'100%'" displayDensity="compact">
3-
<igx-column field="row_valid" header=" " [editable]="false" [dataType]="'number'" [pinned]="true" [width]="'50px'">
4-
<ng-template igxCell let-cell="cell">
5-
<div *ngIf="isRowValid(cell)" [igxTooltipTarget]="tooltipRef"
6-
>
7-
<img width="18" src="assets/images/grid/active.png"/>
8-
</div>
9-
<div *ngIf="!isRowValid(cell)" [igxTooltipTarget]="tooltipRef"
10-
>
11-
<img width="18" src="assets/images/grid/expired.png"/>
12-
</div>
13-
<div #tooltipRef="tooltip" igxTooltip [style.width]="'max-content'">
14-
<div *ngFor="let message of stateMessage(cell)">
15-
{{message}}
16-
</div>
17-
</div>
18-
</ng-template>
19-
</igx-column>
20-
<igx-column field="CustomerID" [hidden]='true'></igx-column>
21-
<igx-column field="ContactName" [editable]="true" required></igx-column>
22-
<igx-column field="ContactTitle" [editable]="true" required></igx-column>
23-
<igx-column field="City" [editable]="true">
24-
<ng-template igxCellEditor let-cell="cell" let-value let-fc='formControl'>
25-
<igx-select [formControl]="fc" [igxFocus]="true">
26-
<igx-select-item *ngFor="let city of cities" [value]="city">
27-
{{ city }}
28-
</igx-select-item>
29-
</igx-select>
30-
</ng-template>
31-
</igx-column>
32-
<igx-column field="Country" [editable]="true">
33-
<ng-template igxCellEditor let-cell="cell" let-value let-fc='formControl'>
34-
<igx-select [formControl]="fc" [igxFocus]="true">
35-
<igx-select-item *ngFor="let country of countries" [value]="country">
36-
{{ country }}
37-
</igx-select-item>
38-
</igx-select>
39-
</ng-template>
40-
</igx-column>
41-
42-
<igx-column field="PostalCode" [editable]="true" required></igx-column>
43-
<igx-column field="Phone" [editable]="true" required></igx-column>
44-
<igx-row-island (formGroupCreated)='formCreateOrderHandler($event)' [primaryKey]="'OrderID'" [height]="null" [key]="'Orders'" [autoGenerate]="false" [rowEditable]="true">
45-
<igx-grid-toolbar [grid]="grid" *igxGridToolbar="let grid">
46-
<button igxButton [disabled]="grid.transactions.getAggregatedChanges(false).length < 1" (click)="commit(grid)">Commit</button>
47-
</igx-grid-toolbar>
48-
<igx-column field="OrderID" [hidden]='true'></igx-column>
49-
<igx-column field="EmployeeID" [hidden]='true'></igx-column>
5+
<igx-hierarchical-grid [igxPreventDocumentScroll]="true" [primaryKey]="'CustomerID'" [rowEditable]="rowEdit" [batchEditing]="true"
6+
#hierarchicalGrid [data]="localdata" [height]="'500px'" [width]="'100%'" displayDensity="compact"
7+
(formGroupCreated)="formCreateCustomerHandler($event)" (cellEdit)="editHandler($event)" (rowEdit)="editHandler($event)">
508
<igx-column field="row_valid" header=" " [editable]="false" [dataType]="'number'" [pinned]="true" [width]="'50px'">
519
<ng-template igxCell let-cell="cell">
52-
<div *ngIf="isRowValid(cell)" [igxTooltipTarget]="tooltipRef"
53-
>
10+
<div *ngIf="isRowValid(cell)" [igxTooltipTarget]="tooltipRef">
5411
<img width="18" src="assets/images/grid/active.png"/>
5512
</div>
56-
<div *ngIf="!isRowValid(cell)" [igxTooltipTarget]="tooltipRef"
57-
>
13+
<div *ngIf="!isRowValid(cell)" [igxTooltipTarget]="tooltipRef">
5814
<img width="18" src="assets/images/grid/expired.png"/>
5915
</div>
6016
<div #tooltipRef="tooltip" igxTooltip [style.width]="'max-content'">
61-
<div *ngFor="let message of stateMessage(cell)">
62-
{{message}}
63-
</div>
17+
<div *ngFor="let message of stateMessage(cell)">
18+
{{message}}
19+
</div>
6420
</div>
6521
</ng-template>
6622
</igx-column>
67-
<igx-column field="OrderDate" [dataType]="'date'" [editable]="true" required></igx-column>
68-
<igx-column field="ShippedDate" [dataType]="'date'" [editable]="true" required></igx-column>
69-
<igx-column field="ShipVia" [editable]="true" required></igx-column>
70-
<igx-column field="Freight" [editable]="true" required></igx-column>
71-
<igx-column field="ShipName" [editable]="true" required></igx-column>
72-
</igx-row-island>
73-
</igx-hierarchical-grid>
74-
<button igxButton [disabled]="hierarchicalGrid.transactions.getAggregatedChanges(false).length < 1" (click)="commit(hierarchicalGrid)">Commit</button>
23+
<igx-column field="CustomerID" [hidden]="true"></igx-column>
24+
<igx-column field="ContactName" [editable]="true" required></igx-column>
25+
<igx-column field="ContactTitle" [editable]="true" required></igx-column>
26+
<igx-column field="City" [editable]="true">
27+
<ng-template igxCellEditor let-cell="cell" let-value let-fc='formControl'>
28+
<igx-select [formControl]="fc" [igxFocus]="true">
29+
<igx-select-item *ngFor="let city of cities" [value]="city">
30+
{{ city }}
31+
</igx-select-item>
32+
</igx-select>
33+
</ng-template>
34+
</igx-column>
35+
<igx-column field="Country" [editable]="true">
36+
<ng-template igxCellEditor let-cell="cell" let-value let-fc='formControl'>
37+
<igx-select [formControl]="fc" [igxFocus]="true">
38+
<igx-select-item *ngFor="let country of countries" [value]="country">
39+
{{ country }}
40+
</igx-select-item>
41+
</igx-select>
42+
</ng-template>
43+
</igx-column>
44+
45+
<igx-column field="PostalCode" [editable]="true" required></igx-column>
46+
<igx-column field="Phone" [editable]="true" required></igx-column>
47+
<igx-row-island [primaryKey]="'OrderID'" [height]="null" [key]="'Orders'" [autoGenerate]="false" [rowEditable]="rowEdit"
48+
(formGroupCreated)='formCreateOrderHandler($event)' (cellEdit)="editHandler($event)" (rowEdit)="editHandler($event)">
49+
<igx-grid-toolbar [grid]="grid" *igxGridToolbar="let grid">
50+
<button igxButton [disabled]="grid.transactions.getAggregatedChanges(false).length < 1" (click)="commit(grid)">Commit</button>
51+
</igx-grid-toolbar>
52+
<igx-column field="OrderID" [hidden]="true"></igx-column>
53+
<igx-column field="EmployeeID" [hidden]="true"></igx-column>
54+
<igx-column field="row_valid" header=" " [editable]="false" [dataType]="'number'" [pinned]="true" [width]="'50px'">
55+
<ng-template igxCell let-cell="cell">
56+
<div *ngIf="isRowValid(cell)" [igxTooltipTarget]="tooltipRef">
57+
<img width="18" src="assets/images/grid/active.png"/>
58+
</div>
59+
<div *ngIf="!isRowValid(cell)" [igxTooltipTarget]="tooltipRef">
60+
<img width="18" src="assets/images/grid/expired.png"/>
61+
</div>
62+
<div #tooltipRef="tooltip" igxTooltip [style.width]="'max-content'">
63+
<div *ngFor="let message of stateMessage(cell)">
64+
{{message}}
65+
</div>
66+
</div>
67+
</ng-template>
68+
</igx-column>
69+
<igx-column field="OrderDate" [dataType]="'date'" [editable]="true" required></igx-column>
70+
<igx-column field="ShippedDate" [dataType]="'date'" [editable]="true" required></igx-column>
71+
<igx-column field="ShipVia" [editable]="true" required></igx-column>
72+
<igx-column field="Freight" [editable]="true" required></igx-column>
73+
<igx-column field="ShipName" [editable]="true" required></igx-column>
74+
</igx-row-island>
75+
</igx-hierarchical-grid>
76+
<div class="buttons-wrapper">
77+
<button igxButton [disabled]="hierarchicalGrid.transactions.getAggregatedChanges(false).length < 1" (click)="commit(hierarchicalGrid)">Commit</button>
78+
</div>
7579
</div>
7680

‎src/app/hierarchical-grid/hierarchical-grid-cross-field-validation/hierarchical-grid-cross-field-validation.component.scss‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
11

2-
.grid__wrapper {
2+
.top-row, .grid__wrapper {
33
padding: 16px;
4+
padding-bottom: 0;
5+
}
6+
7+
.buttons-wrapper {
8+
display: flex;
9+
flex-direction: row;
10+
justify-content: start;
11+
padding: 10px 0;
412
}

‎src/app/hierarchical-grid/hierarchical-grid-cross-field-validation/hierarchical-grid-cross-field-validation.component.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Component, OnInit, ViewChild } from '@angular/core';
22
import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
3-
import { CellType, IgxHierarchicalGridComponent } from 'igniteui-angular';
3+
import { CellType, IgxHierarchicalGridComponent, IGridEditEventArgs } from 'igniteui-angular';
44
import { IGridFormGroupCreatedEventArgs } from 'igniteui-angular/lib/grids/common/grid.interface';
55
import { CUSTOMERS } from '../../data/hierarchical-data';
66

@@ -11,6 +11,7 @@ import { CUSTOMERS } from '../../data/hierarchical-data';
1111
})
1212

1313
export class HierarchicalGridValidatorServiceCrossCellComponent implements OnInit {
14+
public rowEdit: boolean = true;
1415
public localdata;
1516
public countryData: Map<string, object>;
1617
public countries = [];
@@ -34,6 +35,12 @@ export class HierarchicalGridValidatorServiceCrossCellComponent implements OnIni
3435
this.cities = [...new Set(this.localdata.map(x => x.City))];
3536
}
3637

38+
public editHandler(event: IGridEditEventArgs) {
39+
if (!event.valid) {
40+
event.cancel = true;
41+
}
42+
}
43+
3744
public formCreateCustomerHandler(event: IGridFormGroupCreatedEventArgs) {
3845
const formGroup = event.formGroup;
3946
formGroup.addValidators(this.addressValidator());

‎src/app/tree-grid/tree-grid-validator-service-cross-field/tree-grid-validator-service-cross-field.component.html‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1+
<div class="top-row">
2+
<igx-switch [(ngModel)]="rowEdit">Row edit</igx-switch>
3+
</div>
14
<div class="grid__wrapper">
25
<igx-tree-grid [igxPreventDocumentScroll]="true" #treeGrid [batchEditing]="true" [data]="data" primaryKey="ID"
36
foreignKey="ParentID" [width]="'100%'" [height]="'500px'" [rowEditable]="true" [pinning]="pinningConfig"
4-
(formGroupCreated)="formCreateHandler($event)">
7+
(formGroupCreated)="formCreateHandler($event)" (cellEdit)="editHandler($event)" (rowEdit)="editHandler($event)">
58
<igx-column field="ID" header="ID" dataType="number" [editable]="false"></igx-column>
69
<igx-column field="Age" header="Age" dataType="number" [editable]="true" required min="18" max="99"></igx-column>
710
<igx-column field="Name" header="Full Name" dataType="string" [editable]="true" required></igx-column>
@@ -42,6 +45,8 @@
4245
</ng-template>
4346
</igx-column>
4447
</igx-tree-grid>
48+
<div class="buttons-wrapper">
49+
<button igxButton [disabled]="treeGrid.transactions.getAggregatedChanges(false).length < 1" (click)="commit()">Commit</button>
50+
</div>
4551
</div>
4652

47-
<button igxButton [disabled]="treeGrid.transactions.getAggregatedChanges(false).length < 1" (click)="commit()">Commit</button>

‎src/app/tree-grid/tree-grid-validator-service-cross-field/tree-grid-validator-service-cross-field.component.scss‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
11
.top-row, .grid__wrapper {
2-
margin: 15px;
2+
padding: 16px;
3+
padding-bottom: 0;
4+
}
5+
6+
.buttons-wrapper {
7+
display: flex;
8+
flex-direction: row;
9+
justify-content: start;
10+
padding: 10px 0;
311
}

‎src/app/tree-grid/tree-grid-validator-service-cross-field/tree-grid-validator-service-cross-field.component.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { FormGroup, ValidationErrors, ValidatorFn } from '@angular/forms';
44
import {
55
ColumnPinningPosition,
66
CellType,
7+
IGridEditEventArgs,
78
IgxTreeGridComponent,
89
IPinningConfig
910
} from 'igniteui-angular';
@@ -39,6 +40,12 @@ export class TreeGridValidatorServiceCrossFieldComponent implements OnInit {
3940
this.cities = [...new Set(this.data.map(x => x.City))];
4041
}
4142

43+
public editHandler(event: IGridEditEventArgs) {
44+
if (!event.valid) {
45+
event.cancel = true;
46+
}
47+
}
48+
4249
public formCreateHandler(evt: IGridFormGroupCreatedEventArgs) {
4350
evt.formGroup.addValidators(this.rowValidator());
4451
}

0 commit comments

Comments
 (0)