Skip to content

Commit 2e2599d

Browse files
hanastasovhanastasov
authored
Merge pull request #3186 from IgniteUI/vNext
Merging vNext to master
2 parents e450f2b + cd44ad3 commit 2e2599d

39 files changed

Lines changed: 461 additions & 210 deletions

File tree

‎live-editing/configs/GridConfigGenerator.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1356,9 +1356,9 @@ export class GridConfigGenerator implements IConfigGenerator {
13561356

13571357
],
13581358
appModuleConfig: new AppModuleConfig({
1359-
imports: ['GridValidatorServiceComponent', 'IgxGridModule', 'IgxFocusModule', 'IgxPreventDocumentScrollModule'],
1359+
imports: ['GridValidatorServiceComponent', 'IgxGridModule', 'IgxFocusModule', 'IgxPreventDocumentScrollModule', 'IgxSwitchModule'],
13601360
ngDeclarations: ['GridValidatorServiceComponent'],
1361-
ngImports: ['IgxPreventDocumentScrollModule', 'IgxGridModule', 'IgxFocusModule']
1361+
ngImports: ['IgxPreventDocumentScrollModule', 'IgxGridModule', 'IgxFocusModule', 'IgxSwitchModule']
13621362
})
13631363
}));
13641364

‎live-editing/configs/HierarchicalGridConfigGenerator.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -342,7 +342,7 @@ export class HierarchicalGridConfigGenerator implements IConfigGenerator {
342342
}));
343343

344344
configs.push(new Config({
345-
additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/data/hierarchical-data.ts'],
345+
additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/data/hierarchical-data.ts', '/src/app/services/svgIcons.ts'],
346346
appModuleConfig: new AppModuleConfig({
347347
imports: ['IgxHierarchicalGridModule', 'HGridPinningSampleComponent', 'IgxPreventDocumentScrollModule'],
348348
ngDeclarations: ['HGridPinningSampleComponent'],
@@ -942,9 +942,9 @@ export class HierarchicalGridConfigGenerator implements IConfigGenerator {
942942
'/src/app/data/hierarchical-data.ts'
943943
],
944944
appModuleConfig: new AppModuleConfig({
945-
imports: ['HierarchicalGridValidatorServiceComponent', 'IgxHierarchicalGridModule', 'IgxPreventDocumentScrollModule'],
945+
imports: ['HierarchicalGridValidatorServiceComponent', 'IgxHierarchicalGridModule', 'IgxPreventDocumentScrollModule', 'IgxSwitchModule'],
946946
ngDeclarations: ['HierarchicalGridValidatorServiceComponent'],
947-
ngImports: ['IgxPreventDocumentScrollModule', 'IgxHierarchicalGridModule']
947+
ngImports: ['IgxPreventDocumentScrollModule', 'IgxHierarchicalGridModule', 'IgxSwitchModule']
948948
})
949949
}));
950950

‎live-editing/configs/TreeGridConfigGenerator.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -221,7 +221,7 @@ export class TreeGridConfigGenerator implements IConfigGenerator {
221221

222222
// TreeGrid Column Pinning sample
223223
configs.push(new Config({
224-
additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/tree-grid/data/employees-flat-detailed.ts'],
224+
additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/tree-grid/data/employees-flat-detailed.ts', '/src/app/services/svgIcons.ts'],
225225
appModuleConfig: new AppModuleConfig({
226226
imports: ['IgxPreventDocumentScrollModule', 'IgxTreeGridModule', 'TreeGridColumnPinningSampleComponent', 'IgxIconModule'],
227227
ngDeclarations: ['TreeGridColumnPinningSampleComponent'],
@@ -1155,9 +1155,9 @@ export class TreeGridConfigGenerator implements IConfigGenerator {
11551155
],
11561156
appModuleConfig: new AppModuleConfig({
11571157
imports: ['IgxPreventDocumentScrollModule', 'IgxTreeGridModule', 'TreeGridValidatorServiceComponent',
1158-
'IgxButtonModule'],
1158+
'IgxButtonModule', 'IgxSwitchModule'],
11591159
ngDeclarations: ['TreeGridValidatorServiceComponent'],
1160-
ngImports: ['IgxPreventDocumentScrollModule', 'IgxTreeGridModule', 'IgxButtonModule']
1160+
ngImports: ['IgxPreventDocumentScrollModule', 'IgxTreeGridModule', 'IgxButtonModule', 'IgxSwitchModule']
11611161
})
11621162
}));
11631163

‎src/app/grid/grid-column-data-types-sample/grid-column-data-types-sample.component.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,8 @@
8282
<igx-column field="ProductName" [width]="'120px'" header="Prod. Name" [sortable]="true" [hasSummary]="true"
8383
[editable]="true" [dataType]="'string'" [resizable]="true">
8484
</igx-column>
85+
<igx-column field="ProductImage" [width]="'60px'" header="Image" [dataType]="'image'" [resizable]="true">
86+
</igx-column>
8587
<igx-column field="UnitPrice" [width]="'100px'" header="Unit Price" [sortable]="true" [hasSummary]="true" [editable]="true"
8688
[pipeArgs]="formatOptions" [dataType]="'number'" [resizable]="true">
8789
</igx-column>

‎src/app/grid/grid-column-data-types-sample/grid-column-data-types-sample.component.ts‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,17 @@
11
/*eslint-disable*/
2-
import { Component, OnInit, ViewChild } from "@angular/core";
2+
import { Component, OnInit } from "@angular/core";
33
import { registerLocaleData} from "@angular/common";
44
import localeBG from '@angular/common/locales/bg';
55
import localeDE from '@angular/common/locales/de';
66
import localeFR from '@angular/common/locales/fr';
77
import localeJA from '@angular/common/locales/ja';
8-
import { IgxGridComponent } from "igniteui-angular";
98

109
@Component({
1110
selector: "grid-column-data-types-sample",
1211
styleUrls: ["./grid-column-data-types-sample.component.scss"],
1312
templateUrl: "grid-column-data-types-sample.component.html"
1413
})
1514
export class GridColumnDataTypesSampleComponent implements OnInit {
16-
@ViewChild("grid1", { read: IgxGridComponent, static: true })
17-
public grid1: IgxGridComponent;
1815

1916
public digitsInfoMessage: string = 'Applicable to number, currency and percent type columns';
2017

@@ -85,6 +82,7 @@ export class GridColumnDataTypesSampleComponent implements OnInit {
8582
SupplierID: 1,
8683
CategoryID: 1,
8784
QuantityPerUnit: "10 boxes x 20 bags",
85+
ProductImage: "/assets/images/products/chai.jpg",
8886
UnitPrice: 18.0000,
8987
UnitsInStock: 39,
9088
UnitsOnOrder: 0.030,
@@ -96,6 +94,7 @@ export class GridColumnDataTypesSampleComponent implements OnInit {
9694
}, {
9795
ProductID: 2,
9896
ProductName: "Chang",
97+
ProductImage: "/assets/images/products/chang.jpg",
9998
SupplierID: 1,
10099
CategoryID: 1,
101100
QuantityPerUnit: "24 - 12 oz bottles",
@@ -110,6 +109,7 @@ export class GridColumnDataTypesSampleComponent implements OnInit {
110109
}, {
111110
ProductID: 3,
112111
ProductName: "Aniseed Syrup",
112+
ProductImage: "/assets/images/products/aniseed.jpg",
113113
SupplierID: 1,
114114
CategoryID: 2,
115115
QuantityPerUnit: "12 - 550 ml bottles",
@@ -124,6 +124,7 @@ export class GridColumnDataTypesSampleComponent implements OnInit {
124124
}, {
125125
ProductID: 4,
126126
ProductName: "Chef Antons Cajun Seasoning",
127+
ProductImage: "/assets/images/products/cajun-seasoning.jpg",
127128
SupplierID: 2,
128129
CategoryID: 2,
129130
QuantityPerUnit: "48 - 6 oz jars",
@@ -138,6 +139,7 @@ export class GridColumnDataTypesSampleComponent implements OnInit {
138139
}, {
139140
ProductID: 5,
140141
ProductName: "Chef Antons Gumbo Mix",
142+
ProductImage: "/assets/images/products/chef-antons-gumbo-mix.jpg",
141143
SupplierID: 2,
142144
CategoryID: 2,
143145
QuantityPerUnit: "36 boxes",
@@ -152,6 +154,7 @@ export class GridColumnDataTypesSampleComponent implements OnInit {
152154
}, {
153155
ProductID: 6,
154156
ProductName: "Grandmas Boysenberry Spread",
157+
ProductImage: "/assets/images/products/grandmas-boysenberry-spread.jpg",
155158
SupplierID: 3,
156159
CategoryID: 2,
157160
QuantityPerUnit: "12 - 8 oz jars",
@@ -166,6 +169,7 @@ export class GridColumnDataTypesSampleComponent implements OnInit {
166169
}, {
167170
ProductID: 7,
168171
ProductName: "Uncle Bobs Organic Dried Pears",
172+
ProductImage: "/assets/images/products/uncle-bobs-organic-dried-pears.jpg",
169173
SupplierID: 3,
170174
CategoryID: 7,
171175
QuantityPerUnit: "12 - 1 lb pkgs.",
@@ -180,6 +184,7 @@ export class GridColumnDataTypesSampleComponent implements OnInit {
180184
}, {
181185
ProductID: 8,
182186
ProductName: "Northwoods Cranberry Sauce",
187+
ProductImage: "/assets/images/products/cranberry-sauce.jpg",
183188
SupplierID: 3,
184189
CategoryID: 2,
185190
QuantityPerUnit: "12 - 12 oz jars",
@@ -194,6 +199,7 @@ export class GridColumnDataTypesSampleComponent implements OnInit {
194199
}, {
195200
ProductID: 9,
196201
ProductName: "Mishi Kobe Niku",
202+
ProductImage: "/assets/images/products/mishi-kobe-niku.jpg",
197203
SupplierID: 4,
198204
CategoryID: 6,
199205
QuantityPerUnit: "18 - 500 g pkgs.",

‎src/app/grid/grid-sample-pinning/grid-pinning.component.html‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
<div class="grid__wrapper" style='width: 100%;'>
22
<igx-grid [igxPreventDocumentScroll]="true" #grid1 [data]="data" [width]="'100%'" [height]="'480px'">
3-
<igx-column #col *ngFor="let c of columns" [field]="c.field" [header]="c.header" [width]="c.width" [pinned]='c.pinned'
4-
[hidden]='c.hidden' [headerClasses]="'customHeaderSyle'">
3+
<igx-column #col *ngFor="let c of columns" [field]="c.field" [header]="c.header" [width]="c.width"
4+
[pinned]='c.pinned' [hidden]='c.hidden' [headerClasses]="'customHeaderSyle'">
55
<ng-template igxHeader>
66
<div class="title-inner">
7-
<span style="float:left">{{col.header}}</span>
8-
<igx-icon class="pin-icon" family="filtering-icons" name="{{col.pinned ? 'unpin' : 'pin'}}" (click)="toggleColumn(col)"></igx-icon>
7+
<span class="header-text">{{col.header}}</span>
8+
<igx-icon class="pin-icon" [class.pinned]="col.pinned" [class.unpinned]="!col.pinned"
9+
family="filtering-icons" name="{{col.pinned ? 'unpin' : 'pin'}}" (click)="toggleColumn(col)">
10+
</igx-icon>
911
</div>
1012
</ng-template>
1113
</igx-column>
1214
</igx-grid>
13-
</div>
15+
</div>

‎src/app/grid/grid-sample-pinning/grid-pinning.component.scss‎

Lines changed: 20 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,39 @@
1-
@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fontawesome.css");
2-
@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-regular.css");
3-
@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-solid.css");
4-
5-
.header-icon {
6-
font-size: 1.1em;
7-
width: 1.1em;
8-
height: 1.1em;
9-
float: right;
10-
cursor: pointer;
1+
.grid__wrapper {
2+
margin: 0 auto;
3+
padding: 16px;
114
}
125

13-
.header {
14-
height: 100%;
6+
.title-inner {
7+
display: flex;
8+
justify-content: space-between;
9+
align-items: center;
1510
}
1611

17-
:host ::ng-deep .title {
18-
width: 100%;
12+
.header-text {
13+
white-space: nowrap;
14+
overflow: hidden;
15+
text-overflow: ellipsis;
1916
}
2017

2118
.pin-icon {
2219
margin-left: 8px;
23-
font-size: 14px;
2420
cursor: pointer;
2521
display: flex;
2622
align-items: center;
27-
color: #999;
23+
}
24+
25+
.pinned {
26+
color: #444;
2827

2928
&:hover {
30-
color: #444
29+
color: #999;
3130
}
3231
}
3332

34-
.igx-grid__th--pinned {
35-
.pin-icon {
36-
color: #444;
33+
.unpinned {
34+
color: #999;
3735

38-
&:hover {
39-
color: #999
40-
}
36+
&:hover {
37+
color: #444;
4138
}
4239
}
43-
44-
.title-inner {
45-
display: flex;
46-
justify-content: space-between;
47-
align-items: center;
48-
}
49-
50-
.grid__wrapper {
51-
margin: 0 auto;
52-
padding: 16px;
53-
}

‎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?')) {

0 commit comments

Comments
 (0)