Skip to content

Commit 17688f2

Browse files
author
Konstantin Dinev
authored
Merge branch 'vNext' into VDyulgerov/missing-httpClientModule-vnext
2 parents 20b7513 + 4285471 commit 17688f2

25 files changed

Lines changed: 440 additions & 194 deletions

‎live-editing/configs/GridConfigGenerator.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -473,6 +473,16 @@ export class GridConfigGenerator implements IConfigGenerator {
473473
})
474474
}));
475475

476+
configs.push(new Config({
477+
component: 'GridExcelStyleEditingComponent',
478+
additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/data/nwindData.ts'],
479+
appModuleConfig: new AppModuleConfig({
480+
imports: ['GridExcelStyleEditingComponent', 'IgxGridModule', 'IgxPreventDocumentScrollModule'],
481+
ngDeclarations: ['GridExcelStyleEditingComponent'],
482+
ngImports: ['IgxPreventDocumentScrollModule', 'IgxGridModule']
483+
})
484+
}));
485+
476486
configs.push(new Config({
477487
component: 'GridEditingStyleSampleComponent',
478488
additionalFiles: ['/src/app/directives/prevent-scroll.directive.ts', '/src/app/data/nwindData.ts'],

‎src/app/grid/grid-action-strip/grid-action-strip-sample.html‎

Lines changed: 30 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,43 @@
11
<div class="grid__wrapper">
2-
<igx-grid igxPreventDocumentScroll #gridRowEditTransaction [batchEditing]="true" [data]="data" width="100%"
3-
height="500px" [rowEditable]="true" [allowFiltering]="true" (onDataPreLoad)="actionstrip.hide()">
2+
<igx-grid igxPreventDocumentScroll #grid [data]="data" [primaryKey]="'ProductID'" width="100%"
3+
height="500px" [rowEditable]="true" [batchEditing]="true" [allowFiltering]="true">
44
<igx-column field="ProductID" header="Product ID" [pinned]="true" [hidden]='true' [filterable]="false">
55
</igx-column>
6-
<igx-column field="ProductName" header="Product Name" [dataType]="'string'" [sortable]="true"></igx-column>
7-
<igx-column field="UnitPrice" header="Unit Price" [dataType]="'string'" [sortable]="true"></igx-column>
6+
<igx-column field="ProductName" header="Product Name" dataType="string" [sortable]="true"></igx-column>
7+
<igx-column field="UnitPrice" header="Unit Price" dataType="currency" [sortable]="true"></igx-column>
88
<igx-column field="UnitsOnOrder" header="Units On Order" dataType="number" [editable]="false"
99
[filterable]="false"></igx-column>
10-
<igx-column field="UnitsInStock" header="Units In Stock" dataType="number" [sortable]="true">
11-
<ng-template igxCellEditor let-cell="cell">
12-
<input name="units" [igxFocus]="true" [(ngModel)]="cell.editValue"
13-
style="color: black; width: 30px;" />
14-
</ng-template>
15-
</igx-column>
16-
<igx-column field="QuantityPerUnit" header="Quantity Per Unit" [dataType]="'string'" [filterable]="false">
10+
<igx-column field="UnitsInStock" header="Units In Stock" dataType="number" [sortable]="true"></igx-column>
11+
<igx-column field="QuantityPerUnit" header="Quantity Per Unit" dataType="string" [filterable]="false">
1712
</igx-column>
1813
<igx-column field="ReorderLevel" header="Reorder Level" dataType="number" [filterable]="false"></igx-column>
19-
<igx-column field="Discontinued" header="Discontinued" [dataType]="'boolean'" [filterable]="false">
14+
<igx-column field="Discontinued" header="Discontinued" dataType="boolean" [filterable]="false">
2015
</igx-column>
2116
<igx-action-strip #actionstrip>
2217
<igx-grid-pinning-actions></igx-grid-pinning-actions>
23-
<button title="Edit" igxButton="icon" igxRipple
24-
(click)='startEdit(actionstrip.context)'>
25-
<igx-icon>edit</igx-icon>
26-
</button>
27-
<button title="Undo All" igxButton="icon" igxRipple *ngIf='isDirty(actionstrip.context)'
28-
(click)='undo(actionstrip.context)'>
29-
<igx-icon>undo</igx-icon>
30-
</button>
31-
<button title="Redo All" igxButton="icon" igxRipple
32-
*ngIf='!isDirty(actionstrip.context) && hasDiscardedTransactions(actionstrip.context)'
33-
(click)='redo(actionstrip.context)'>
34-
<igx-icon>redo</igx-icon>
35-
</button>
36-
<button title='Save' igxButton="icon" igxRipple *ngIf='isDirty(actionstrip.context)'
37-
(click)='commit(actionstrip.context)'>
38-
<igx-icon>save</igx-icon>
39-
</button>
40-
<button title="Delete" igxButton="icon" igxRipple *ngIf='!isDeleted(actionstrip.context)'
41-
(click)='actionstrip.context.delete()'>
42-
<igx-icon>delete</igx-icon>
43-
</button>
18+
<ng-container *ngIf="!inEditMode(actionstrip.context)">
19+
<button title="Edit" igxButton="icon" igxRipple
20+
(click)='startEdit(actionstrip.context)'>
21+
<igx-icon>edit</igx-icon>
22+
</button>
23+
<button title="Undo All" igxButton="icon" igxRipple *ngIf='isDirty(actionstrip.context)'
24+
(click)='undo(actionstrip.context)'>
25+
<igx-icon>undo</igx-icon>
26+
</button>
27+
<button title="Redo All" igxButton="icon" igxRipple
28+
*ngIf='!isDirty(actionstrip.context) && hasDiscardedTransactions(actionstrip.context)'
29+
(click)='redo(actionstrip.context)'>
30+
<igx-icon>redo</igx-icon>
31+
</button>
32+
<button title='Save' igxButton="icon" igxRipple *ngIf='isDirty(actionstrip.context)'
33+
(click)='commit(actionstrip.context)'>
34+
<igx-icon>save</igx-icon>
35+
</button>
36+
<button title="Delete" igxButton="icon" igxRipple *ngIf='!isDeleted(actionstrip.context)'
37+
(click)='actionstrip.context.delete()'>
38+
<igx-icon>delete</igx-icon>
39+
</button>
40+
</ng-container>
4441
</igx-action-strip>
4542
</igx-grid>
4643
</div>

‎src/app/grid/grid-action-strip/grid-action-strip-sample.scss‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,3 @@
11
.grid__wrapper {
22
margin: 15px;
33
}
4-
5-
h4 {
6-
text-align: center;
7-
padding-top: 2%;
8-
padding-bottom: 2%;
9-
}

‎src/app/grid/grid-action-strip/grid-action-strip-sample.ts‎

Lines changed: 13 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,7 @@ import { DATA } from '../../data/nwindData';
88
templateUrl: 'grid-action-strip-sample.html'
99
})
1010
export class GridActionStripSampleComponent {
11-
@ViewChild('gridRowEditTransaction', { read: IgxGridComponent, static: true }) public grid: IgxGridComponent;
12-
13-
public currentActiveGrid: { id: string; transactions: any[] } = { id: '', transactions: [] };
11+
@ViewChild('grid', { read: IgxGridComponent, static: true }) public grid: IgxGridComponent;
1412

1513
public data: any[];
1614
public discardedTransactionsPerRecord: Map<number, Transaction[]> = new Map<number, Transaction[]>();
@@ -19,31 +17,27 @@ export class GridActionStripSampleComponent {
1917
this.data = DATA;
2018
}
2119

22-
public stateFormatter(value: string) {
23-
return JSON.stringify(value);
24-
}
25-
26-
public typeFormatter(value: string) {
27-
return value.toUpperCase();
28-
}
29-
3020
public isDirty(rowContext: RowType) {
31-
return rowContext && rowContext.deleted;
21+
const isRowEdited = this.grid.transactions.getAggregatedChanges(true).find(x => x.id === rowContext?.key);
22+
return rowContext && (rowContext.deleted || isRowEdited);
3223
}
3324

3425
public isDeleted(rowContext: RowType) {
3526
return rowContext && rowContext.deleted;
3627
}
3728

38-
public startEdit(row?): void {
39-
const firstEditable = row.cells.filter(cell => cell.editable)[0];
40-
const grid = row.grid;
29+
public inEditMode(rowContext: RowType) {
30+
return rowContext && rowContext.inEditMode;
31+
}
32+
33+
public startEdit(rowContext: RowType): void {
34+
const firstEditable = rowContext.cells.filter(cell => cell.editable)[0];
35+
const grid = rowContext.grid;
4136

42-
if (grid.rowList.filter(r => r === row).length !== 0) {
43-
grid.gridAPI.crudService.enterEditMode(firstEditable, event);
44-
firstEditable.activate();
37+
if (grid.rowList.filter(r => r === rowContext).length !== 0) {
38+
grid.gridAPI.crudService.enterEditMode(firstEditable);
39+
firstEditable.activate(null);
4540
}
46-
row.hide();
4741
}
4842

4943
public commit(rowContext: RowType) {

‎src/app/grid/grid-editing-excel-style/grid-editing-excel-style.component.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<div class="grid__wrapper">
2+
<igx-grid
3+
igxPreventDocumentScroll
4+
#grid
5+
[data]="data"
6+
[primaryKey]="'ProductID'"
7+
width="100%"
8+
height="500px"
9+
(keydown)="keydownHandler($event)"
10+
(activeNodeChange)="activeNodeChange()"
11+
>
12+
<igx-column
13+
field="ProductID"
14+
header="Product ID"
15+
[editable]="true"
16+
[groupable]="true"
17+
[hidden]="true"
18+
></igx-column>
19+
<igx-column
20+
field="ProductName"
21+
header="Product Name"
22+
[groupable]="true"
23+
[dataType]="'string'"
24+
[editable]="true"
25+
></igx-column>
26+
<igx-column
27+
field="UnitPrice"
28+
header="Unit Price"
29+
[groupable]="true"
30+
[dataType]="'string'"
31+
[editable]="true"
32+
></igx-column>
33+
<igx-column
34+
field="QuantityPerUnit"
35+
header="Quantity Per Unit"
36+
[groupable]="true"
37+
[dataType]="'string'"
38+
[editable]="true"
39+
></igx-column>
40+
<igx-column
41+
field="ReorderLevel"
42+
header="Reorder Level"
43+
dataType="number"
44+
[groupable]="true"
45+
[editable]="true"
46+
></igx-column>
47+
</igx-grid>
48+
</div>

‎src/app/grid/grid-editing-excel-style/grid-editing-excel-style.component.scss‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
.grid__wrapper {
2+
padding: 16px;
3+
}
4+
5+
h4 {
6+
text-align: center;
7+
padding-top: 2%;
8+
padding-bottom: 2%;
9+
}
10+
.buttons-row {
11+
display: flex;
12+
flex-direction: row;
13+
justify-content: space-between;
14+
padding: 5px;
15+
}
16+
.buttons-wrapper {
17+
display: flex;
18+
flex-direction: row;
19+
justify-content: center;
20+
padding: 10px 0;
21+
}
22+
23+
.transaction--update, .transaction--delete, .transaction--add {
24+
font-weight: 600;
25+
}
26+
.transaction--add {
27+
color: #6b3;
28+
}
29+
.transaction--update {
30+
color: #4a71b9;
31+
}
32+
.transaction--delete {
33+
color: #ee4920;
34+
}
35+
.transaction-log {
36+
word-wrap: none;
37+
}

‎src/app/grid/grid-editing-excel-style/grid-editing-excel-style.component.ts‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import { ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
2+
import {
3+
IgxDialogComponent,
4+
IgxGridComponent,
5+
Transaction
6+
} from 'igniteui-angular';
7+
import { DATA } from './../../data/nwindData';
8+
9+
@Component({
10+
selector: 'app-grid-excel-style-editing-sample',
11+
styleUrls: [`grid-editing-excel-style.component.scss`],
12+
templateUrl: 'grid-editing-excel-style.component.html'
13+
})
14+
export class GridExcelStyleEditingComponent implements OnInit {
15+
@ViewChild('grid', { read: IgxGridComponent, static: true })
16+
public grid: IgxGridComponent;
17+
18+
public data: any[];
19+
20+
public ngOnInit(): void {
21+
this.data = DATA;
22+
}
23+
24+
constructor(private cdr:ChangeDetectorRef){}
25+
26+
public keydownHandler(event) {
27+
const key = event.keyCode;
28+
const grid = this.grid;
29+
const activeElem = grid.navigation.activeNode;
30+
31+
if (
32+
(key >= 48 && key <= 57) ||
33+
(key >= 65 && key <= 90) ||
34+
(key >= 97 && key <= 122)
35+
) {
36+
// Number or Alphabet upper case or Alphabet lower case
37+
38+
const columnName = grid.getColumnByVisibleIndex(activeElem.column).field;
39+
const cell = grid.getCellByColumn(activeElem.row, columnName);
40+
if (cell && !grid.crudService.cellInEditMode) {
41+
grid.crudService.enterEditMode(cell);
42+
cell.editValue = event.key;
43+
}
44+
}
45+
46+
if (key == 13) {
47+
let thisRow = activeElem.row;
48+
const column = activeElem.column;
49+
const rowInfo = grid.dataView;
50+
51+
let nextRow = this.getNextEditableRowIndex(thisRow, rowInfo, event.shiftKey);
52+
53+
this.grid.navigateTo(nextRow, column, (obj) => {
54+
obj.target.activate();
55+
this.grid.clearCellSelection();
56+
this.cdr.detectChanges();
57+
});
58+
}
59+
}
60+
61+
public activeNodeChange() {
62+
this.grid.clearCellSelection();
63+
this.grid.endEdit();
64+
}
65+
66+
public getNextEditableRowIndex(currentRowIndex, dataView, previous){
67+
if (currentRowIndex < 0 || (currentRowIndex === 0 && previous) || (currentRowIndex >= dataView.length - 1 && !previous)) {
68+
return currentRowIndex;
69+
}
70+
if(previous){
71+
return dataView.findLastIndex((rec, index) => index < currentRowIndex && this.isEditableDataRecordAtIndex(index, dataView));
72+
}
73+
return dataView.findIndex((rec, index) => index > currentRowIndex && this.isEditableDataRecordAtIndex(index, dataView));
74+
}
75+
76+
private isEditableDataRecordAtIndex(dataViewIndex, dataView) {
77+
const rec = dataView[dataViewIndex];
78+
return !rec.expression && !rec.summaries && !rec.childGridsData && !rec.detailsData
79+
}
80+
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export const gridsRoutesData = {
88
'grid-groupby-summary': { displayName: 'Grid GroupBy Summary', parentName: 'Grid' },
99
'grid-groupby-summary-styling': { displayName: 'Grid GroupBy Summary Styling', parentName: 'Grid' },
1010
'grid-editing': { displayName: 'Grid Editing', parentName: 'Grid' },
11+
'grid-editing-excel-style': { displayName: 'Grid Excel Style Editing', parentName: 'Grid' },
1112
'grid-editing-events': { displayName: 'Grid Editing Events', parentName: 'Grid' },
1213
'grid-editing-style': { displayName: 'Grid Editing Style', parentName: 'Grid' },
1314
'grid-row-editing': { displayName: 'Grid Row Editing', parentName: 'Grid' },

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,21 @@
4949
</igx-grid>
5050
</div>
5151

52+
<igx-snackbar #snackbarRowCount actionText="Got it. Thanks!" (clicked)="snackbarRowCount.close()">
53+
<div class="container">
54+
<igx-icon>notification_important</igx-icon>
55+
<ng-container *ngIf="selectionMode === 'multiple'">
56+
<p>Number of selected rows: {{selectedRowsCount}}</p>
57+
</ng-container>
58+
<ng-container *ngIf="selectionMode === 'single' && this.selectedRowIndex !== undefined">
59+
<p>Currently selected row index: {{selectedRowIndex}}</p>
60+
</ng-container>
61+
<ng-container *ngIf="selectionMode === 'single' && this.selectedRowIndex === undefined">
62+
<p>There is no currently selected row.</p>
63+
</ng-container>
64+
</div>
65+
</igx-snackbar>
66+
5267
<igx-snackbar #snackbar actionText="Got it. Thanks!" (clicked)="snackbar.close()">
5368
<div class="container">
5469
<igx-icon>notification_important</igx-icon>

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,3 +58,7 @@ ul {
5858
margin: 20px;
5959
}
6060
}
61+
62+
.container p {
63+
margin-top: 20px;
64+
}

0 commit comments

Comments
 (0)