Skip to content

Commit 9a3156c

Browse files
dkamburovsimeonoff
dkamburov
and
simeonoff
authored
docs(validator): Add sample for styling the grid validator (#3082)
* docs(validator): Add sample for styling the grid validator * docs(validator): improve style and add initial draft of hgrid sample * docs(validator): fix styles and take the errors from the cells * docs(validator): Add live-editing config and polish the sample * docs(validation): Polish hierarchical grid sample and live-editing * docs(validation): Add tree grid validation styles sample * docs(validation): Add border for invalid cells * refactor(styles): improve style samples * docs(validation): Update api of the styling sample * docs(validation): remove row selection for tree grid validation styles * docs(validation): apply workaround for treegrid status getter * docs(validator): set specific value workaround for but with tooltip Co-authored-by: Simeon Simeonoff <sim.simeonoff@gmail.com>
1 parent 674dccd commit 9a3156c

21 files changed

Lines changed: 308 additions & 5 deletions

‎live-editing/configs/GridConfigGenerator.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1386,6 +1386,16 @@ export class GridConfigGenerator implements IConfigGenerator {
13861386
})
13871387
}));
13881388

1389+
configs.push(new Config({
1390+
component: 'GridValidationStyleComponent',
1391+
additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/data/nwindData.ts'],
1392+
appModuleConfig: new AppModuleConfig({
1393+
imports: ['IgxGridModule', 'GridValidationStyleComponent', 'IgxPreventDocumentScrollModule'],
1394+
ngDeclarations: ['GridValidationStyleComponent'],
1395+
ngImports: ['IgxPreventDocumentScrollModule', 'IgxGridModule']
1396+
})
1397+
}));
1398+
13891399
return configs;
13901400
}
13911401
}

‎live-editing/configs/HierarchicalGridConfigGenerator.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -973,6 +973,17 @@ export class HierarchicalGridConfigGenerator implements IConfigGenerator {
973973
})
974974
}));
975975

976+
configs.push(new Config({
977+
additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/data/singersData.ts',
978+
'/src/app/hierarchical-grid/models.ts'],
979+
appModuleConfig: new AppModuleConfig({
980+
imports: ['IgxHierarchicalGridModule', 'HGridValidationStyleComponent', 'IgxPreventDocumentScrollModule'],
981+
ngDeclarations: ['HGridValidationStyleComponent'],
982+
ngImports: ['IgxPreventDocumentScrollModule', 'IgxHierarchicalGridModule']
983+
}),
984+
component: 'HGridValidationStyleComponent'
985+
}));
986+
976987
return configs;
977988
}
978989
}

‎live-editing/configs/TreeGridConfigGenerator.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1174,6 +1174,18 @@ export class TreeGridConfigGenerator implements IConfigGenerator {
11741174
})
11751175
}));
11761176

1177+
// TreeGrid Validation Style
1178+
configs.push(new Config({
1179+
additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/tree-grid/data/employees-flat.ts'],
1180+
appModuleConfig: new AppModuleConfig({
1181+
imports: ['IgxPreventDocumentScrollModule', 'IgxTreeGridModule', 'TreeGridValidationStyleComponent'],
1182+
ngDeclarations: ['TreeGridValidationStyleComponent'],
1183+
ngImports: ['IgxPreventDocumentScrollModule', 'IgxTreeGridModule']
1184+
}),
1185+
component: 'TreeGridValidationStyleComponent',
1186+
shortenComponentPathBy: '/tree-grid/'
1187+
}));
1188+
11771189
return configs;
11781190
}
11791191
}

‎src/app/grid/grid-routes-data.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -120,5 +120,6 @@ export const gridsRoutesData = {
120120
'grid-columnAutoResizing-sample': { displayName: 'Grid Column Autoresizing', parentName: 'Grid'},
121121
'grid-with-rating': { displayName: 'Grid with Rating', parentName: 'Rating' },
122122
'grid-validator-service': { displayName: 'Grid Validator Service', parentName: 'Grid' },
123-
'grid-cross-field-validator-service': { displayName: 'Grid Cross Field Validator Service ', parentName: 'Grid' }
123+
'grid-cross-field-validator-service': { displayName: 'Grid Cross Field Validator Service ', parentName: 'Grid' },
124+
'grid-validation-style': { displayName: 'Grid with Validation Styles', parentName: 'Grid' }
124125
};

‎src/app/grid/grid-validation-style/grid-validation-style.component.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<div class="sample-wrapper">
2+
<igx-grid igxPreventDocumentScroll #grid [data]="data" [primaryKey]="'ProductID'" width="100%" height="500px"
3+
[rowEditable]="true" [rowStyles]="rowStyles">
4+
<igx-column field="ProductID" header="Product ID"></igx-column>
5+
<igx-column field="ReorderLevel" header="ReorderLever" required [cellClasses]="cellStyles">
6+
<ng-template igxCellValidationError let-cell='cell' let-defaultErr='defaultErrorTemplate'>
7+
<div class="validator-container">
8+
<ng-container *ngTemplateOutlet="defaultErr">
9+
</ng-container>
10+
</div>
11+
</ng-template>
12+
</igx-column>
13+
<igx-column field="ProductName" header="ProductName" [dataType]="'string'" required [cellClasses]="cellStyles">
14+
<ng-template igxCellValidationError let-cell='cell' let-defaultErr='defaultErrorTemplate'>
15+
<div class="validator-container">
16+
<ng-container *ngTemplateOutlet="defaultErr">
17+
</ng-container>
18+
</div>
19+
</ng-template>
20+
</igx-column>
21+
<igx-column field="UnitsInStock" header="UnitsInStock" [dataType]="'number'" required [cellClasses]="cellStyles">
22+
<ng-template igxCellValidationError let-cell='cell' let-defaultErr='defaultErrorTemplate'>
23+
<div class="validator-container">
24+
<ng-container *ngTemplateOutlet="defaultErr">
25+
</ng-container>
26+
</div>
27+
</ng-template>
28+
</igx-column>
29+
</igx-grid>
30+
</div>

‎src/app/grid/grid-validation-style/grid-validation-style.component.scss‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
@use '../../../variables' as *;
2+
3+
.sample-wrapper {
4+
margin: 0 auto;
5+
padding: 16px;
6+
}
7+
8+
.validator-container {
9+
color: hsl(34, 80%, 63%);
10+
}
11+
12+
:host ::ng-deep {
13+
--igx-error-500: 34deg, 80%, 63%;
14+
15+
.invalid-cell {
16+
box-shadow: inset 0 0 0 0.125rem color($color: error);
17+
}
18+
}

‎src/app/grid/grid-validation-style/grid-validation-style.component.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { Component, ViewChild } from '@angular/core';
2+
import { DATA } from '../../data/nwindData';
3+
import { IgxGridComponent, RowType } from 'igniteui-angular';
4+
5+
@Component({
6+
selector: 'app-grid-validation-style',
7+
styleUrls: [`grid-validation-style.component.scss`],
8+
templateUrl: 'grid-validation-style.component.html'
9+
})
10+
export class GridValidationStyleComponent {
11+
@ViewChild('grid', { read: IgxGridComponent, static: true }) public grid: IgxGridComponent;
12+
public data: any[];
13+
public rowStyles = {
14+
background: (row: RowType) => row.validation.status === 'INVALID' ? '#FF000033' : '#00000000'
15+
};
16+
public cellStyles = {
17+
'invalid-cell': (rowData, columnKey) => {
18+
const pKey = this.grid.primaryKey;
19+
const cell = this.grid.getCellByKey(rowData[pKey], columnKey);
20+
return cell && cell.validation.status === 'INVALID';
21+
}
22+
}
23+
24+
constructor() {
25+
this.data = DATA;
26+
}
27+
}

‎src/app/grid/grids-routing.module.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,7 @@ import { GridColumnAutosizingComponent } from './grid-column-autosizing/grid-col
126126
import { GridWithRatingComponent } from './grid-with-rating/grid-with-rating.component';
127127
import { GridValidatorServiceComponent } from './grid-validator-service/grid-validator-service.component';
128128
import { GridValidatorServiceCrossFieldComponent } from './grid-validator-service-cross-field/grid-validator-service-cross-field.component';
129+
import { GridValidationStyleComponent } from './grid-validation-style/grid-validation-style.component';
129130
// tslint:enable:max-line-length
130131

131132
export const gridsRoutes: Routes = [
@@ -728,6 +729,11 @@ export const gridsRoutes: Routes = [
728729
component: GridValidatorServiceCrossFieldComponent,
729730
data: gridsRoutesData['grid-validator-service-cross-field'],
730731
path: 'grid-cross-field-validator-service'
732+
},
733+
{
734+
component: GridValidationStyleComponent,
735+
data: gridsRoutesData['grid-validation-style'],
736+
path: 'grid-validation-style'
731737
}
732738
];
733739

‎src/app/grid/grids.module.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,7 @@ import { GridColumnAutosizingComponent } from './grid-column-autosizing/grid-col
135135
import { GridWithRatingComponent } from './grid-with-rating/grid-with-rating.component';
136136
import { GridValidatorServiceComponent } from './grid-validator-service/grid-validator-service.component';
137137
import { GridValidatorServiceCrossFieldComponent } from './grid-validator-service-cross-field/grid-validator-service-cross-field.component';
138+
import { GridValidationStyleComponent } from './grid-validation-style/grid-validation-style.component';
138139

139140
@NgModule({
140141
declarations: [
@@ -259,7 +260,8 @@ import { GridValidatorServiceCrossFieldComponent } from './grid-validator-servic
259260
GridColumnAutosizingComponent,
260261
GridWithRatingComponent,
261262
GridValidatorServiceComponent,
262-
GridValidatorServiceCrossFieldComponent
263+
GridValidatorServiceCrossFieldComponent,
264+
GridValidationStyleComponent
263265
],
264266
imports: [
265267
CommonModule,

‎src/app/hierarchical-grid/hierarchical-grid-routes-data.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ export const hierarchicalGridRoutesData = {
6464
'hierarchical-grid-conditional-row-selectors': { displayName: 'HGrid Conditional Row Selectors', parentName: 'Hierarchical Grid' },
6565
'hierarchical-grid-collapsible-column-groups': { displayName: 'HGrid Collapsible Column Grous', parentName: 'Hierarchical Grid' },
6666
'hierarchical-grid-allData-summary': {displayName: 'HGrid All Data Custom Summaries', parentName: 'Hierarchical Grid'},
67+
'hierarchical-grid-validation-style': { displayName: 'Hierarchical Grid Validation Style', parentName: 'Hierarchical Grid' },
6768
'hgrid-summary-template': {displayName: 'HGrid Summary Template', parentName: 'Hierarchical Grid'},
6869
'hierarchical-grid-sample-right-pinning': { displayName: 'Hierarchical Grid Right Side Pinning', parentName: 'Hierarchical Grid' },
6970
'column-selection': { displayName: 'HGrid Column Selection', parentName: 'Hierarchical Grid' },

0 commit comments

Comments
 (0)