Skip to content

Commit e791499

Browse files
DiyanDimitrovDiyanDimitrov
authored
Merge branch 'master' into astaev/issue6519-master
2 parents 98f550c + ec89e0e commit e791499

File tree

7 files changed

+164
-22
lines changed

7 files changed

+164
-22
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -155,5 +155,6 @@
155155

156156
%igx-navbar-title {
157157
@include igx-type-style($type-scale, $title);
158+
margin-bottom: 0;
158159
}
159160
}

‎projects/igniteui-angular/src/lib/grids/grid/row-pinning.spec.ts‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -699,6 +699,50 @@ describe('Row Pinning #grid', () => {
699699
verifyDOMMatchesLayoutSettings(gridUnpinnedRow, fix.componentInstance.colGroups);
700700
});
701701
});
702+
describe(' Hiding', () => {
703+
beforeEach(fakeAsync(() => {
704+
fix = TestBed.createComponent(GridRowPinningComponent);
705+
fix.detectChanges();
706+
grid = fix.componentInstance.instance;
707+
tick();
708+
fix.detectChanges();
709+
}));
710+
711+
it('should hide columns in pinned and unpinned area', () => {
712+
// pin 2nd data row
713+
grid.pinRow(fix.componentInstance.data[1]);
714+
fix.detectChanges();
715+
const hiddenCol = grid.columns[1];
716+
hiddenCol.hidden = true;
717+
fix.detectChanges();
718+
719+
const pinnedCells = grid.pinnedRows[0].cells;
720+
expect(pinnedCells.filter(cell => cell.column.field === hiddenCol.field).length).toBe(0);
721+
722+
const unpinnedCells = grid.rowList.first.cells;
723+
expect(unpinnedCells.filter(cell => cell.column.field === hiddenCol.field).length).toBe(0);
724+
725+
expect(pinnedCells.length).toBe(unpinnedCells.length);
726+
727+
const headerCells = grid.headerCellList;
728+
expect(headerCells.filter(cell => cell.column.field === hiddenCol.field).length).toBe(0);
729+
730+
expect(grid.pinnedRows.length).toBe(1);
731+
const pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER));
732+
expect(pinRowContainer.length).toBe(1);
733+
expect(pinRowContainer[0].children.length).toBe(1);
734+
expect(pinRowContainer[0].children[0].context.rowID).toBe(fix.componentInstance.data[1]);
735+
expect(pinRowContainer[0].children[0].nativeElement).toBe(grid.getRowByIndex(0).nativeElement);
736+
737+
expect(grid.getRowByIndex(1).rowID).toBe(fix.componentInstance.data[0]);
738+
expect(grid.getRowByIndex(2).rowID).toBe(fix.componentInstance.data[2]);
739+
740+
// 1 records pinned + 2px border
741+
expect(grid.pinnedRowHeight).toBe(grid.renderedRowHeight + 2);
742+
const expectedHeight = parseInt(grid.height, 10) - grid.pinnedRowHeight - 18 - grid.theadRow.nativeElement.offsetHeight;
743+
expect(grid.calcHeight - expectedHeight).toBeLessThanOrEqual(1);
744+
});
745+
});
702746
});
703747

704748
@Component({

‎projects/igniteui-angular/src/lib/grids/state.directive.spec.ts‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ describe('IgxGridState - input properties #grid', () => {
7272

7373
it('getState should return corect JSON string', () => {
7474
// tslint:disable-next-line:max-line-length
75-
const initialGridState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ProductID","width":"150px","header":"Product ID","resizable":true,"searchable":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Prodyct Name","resizable":true,"searchable":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"InStock","width":"140px","header":"In Stock","resizable":true,"searchable":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"OrderDate","width":"110px","header":"Date ordered","resizable":false,"searchable":true}],"filtering":{"filteringOperands":[],"operator":0},"sorting":[],"groupBy":{"expressions":[],"expansion":[],"defaultExpanded":true},"paging":{"index":0,"recordsPerPage":15,"metadata":{"countPages":1,"countRecords":10,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[]}';
75+
const initialGridState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ProductID","width":"150px","header":"Product ID","resizable":true,"searchable":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Prodyct Name","resizable":true,"searchable":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"InStock","width":"140px","header":"In Stock","resizable":true,"searchable":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"OrderDate","width":"110px","header":"Date ordered","resizable":false,"searchable":true}],"filtering":{"filteringOperands":[],"operator":0},"sorting":[],"groupBy":{"expressions":[],"expansion":[],"defaultExpanded":true},"paging":{"index":0,"recordsPerPage":15,"metadata":{"countPages":1,"countRecords":10,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[]}';
7676
const fix = TestBed.createComponent(IgxGridStateComponent);
7777
fix.detectChanges();
7878

@@ -392,6 +392,30 @@ describe('IgxGridState - input properties #grid', () => {
392392
expect(gridState).toBe(rowSelectionState);
393393
});
394394

395+
it('setState should correctly restore grid row pinning state from object', () => {
396+
const fix = TestBed.createComponent(IgxGridStateComponent);
397+
fix.detectChanges();
398+
const grid = fix.componentInstance.grid;
399+
grid.primaryKey = 'ProductID';
400+
fix.detectChanges();
401+
const state = fix.componentInstance.state;
402+
const rowPinState = '{"rowPinning":[1,3]}';
403+
const initialState = '{"rowPinning":[]}';
404+
const rowPinStateObject = JSON.parse(rowPinState);
405+
406+
let gridState = state.getState(true, 'rowPinning');
407+
expect(gridState).toBe(initialState);
408+
409+
state.setState(rowPinStateObject);
410+
fix.detectChanges();
411+
412+
expect(grid.pinnedRows.length).toBe(2);
413+
expect(grid.pinnedRows[0].rowID).toBe(1);
414+
expect(grid.pinnedRows[1].rowID).toBe(3);
415+
gridState = state.getState(true, 'rowPinning');
416+
expect(gridState).toBe(rowPinState);
417+
});
418+
395419
it('setState should correctly restore grid cell selection state from string', () => {
396420
const fix = TestBed.createComponent(IgxGridStateComponent);
397421
fix.detectChanges();

‎projects/igniteui-angular/src/lib/grids/state.directive.ts‎

Lines changed: 42 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { GridSelectionRange } from './selection/selection.service';
1212
import { IGroupByExpandState } from '../data-operations/groupby-expand-state.interface';
1313
import { IGroupingState } from '../data-operations/groupby-state.interface';
1414
import { IgxGridComponent } from './grid/grid.component';
15+
import { IPinningConfig } from './common/grid.interface';
1516

1617
export interface IGridState {
1718
columns?: IColumnState[];
@@ -23,6 +24,8 @@ export interface IGridState {
2324
cellSelection?: GridSelectionRange[];
2425
rowSelection?: any[];
2526
columnSelection?: string[];
27+
rowPinning?: any[];
28+
pinningConfig?: IPinningConfig;
2629
}
2730

2831
export interface IGridStateOptions {
@@ -35,6 +38,8 @@ export interface IGridStateOptions {
3538
cellSelection?: boolean;
3639
rowSelection?: boolean;
3740
columnSelection?: boolean;
41+
rowPinning?: boolean;
42+
pinningConfig?: boolean;
3843
}
3944

4045
export interface IColumnState {
@@ -66,6 +71,8 @@ const SORTING = 'sorting';
6671
const GROUPBY = 'groupBy';
6772
const PAGING = 'paging';
6873
const ROW_SELECTION = 'rowSelection';
74+
const ROW_PINNING = 'rowPinning';
75+
const PINNING_CONFIG = 'pinningConfig';
6976
const CELL_SELECTION = 'cellSelection';
7077
const COLUMN_SELECTION = 'columnSelection';
7178

@@ -83,7 +90,8 @@ export class IgxGridStateDirective {
8390
paging: true,
8491
cellSelection: true,
8592
rowSelection: true,
86-
columnSelection: true
93+
columnSelection: true,
94+
rowPinning: true
8795
};
8896

8997
private state: IGridState;
@@ -216,6 +224,14 @@ export class IgxGridStateDirective {
216224
this.restoreRowSelection(state as any[]);
217225
break;
218226
}
227+
case ROW_PINNING: {
228+
this.restoreRowPinning(state as any[]);
229+
break;
230+
}
231+
case PINNING_CONFIG: {
232+
this.restorePinningConfig(state as IPinningConfig);
233+
break;
234+
}
219235
case CELL_SELECTION: {
220236
this.restoreCellSelection(state as GridSelectionRange[]);
221237
break;
@@ -279,6 +295,14 @@ export class IgxGridStateDirective {
279295
Object.assign(state, this.getRowSelection());
280296
break;
281297
}
298+
case ROW_PINNING: {
299+
Object.assign(state, this.getRowPinning());
300+
break;
301+
}
302+
case PINNING_CONFIG: {
303+
Object.assign(state, this.getPinningConfig());
304+
break;
305+
}
282306
case CELL_SELECTION: {
283307
Object.assign(state, this.getCellSelection());
284308
break;
@@ -360,6 +384,15 @@ export class IgxGridStateDirective {
360384
return { rowSelection: selection };
361385
}
362386

387+
private getRowPinning(): IGridState {
388+
const pinned = this.grid.pinnedRows.map(x => x.rowID);
389+
return { rowPinning: pinned };
390+
}
391+
392+
private getPinningConfig(): IGridState {
393+
return { pinningConfig: this.grid.pinning };
394+
}
395+
363396
private getColumnSelection(): IGridState {
364397
const selection = this.grid.selectedColumns().map(c => c.field);
365398
return { columnSelection: selection };
@@ -444,6 +477,14 @@ export class IgxGridStateDirective {
444477
this.grid.selectRows(state);
445478
}
446479

480+
private restoreRowPinning(state: any[]) {
481+
state.forEach(rowID => this.grid.pinRow(rowID));
482+
}
483+
484+
private restorePinningConfig(state: IPinningConfig) {
485+
this.grid.pinning = state;
486+
}
487+
447488
private restoreColumnSelection(state: string[]) {
448489
this.grid.selectColumns(state);
449490
}

‎src/app/grid-column-pinning/grid-column-pinning.sample.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ export class GridColumnPinningSampleComponent implements OnInit {
103103

104104
togglePinRow(index) {
105105
const rec = this.data[index];
106-
this.grid1.isRecordPinned(rec) ?
106+
!this.grid1.isRecordPinned(rec) ?
107107
this.grid1.pinRow(rec) :
108108
this.grid1.unpinRow(rec)
109109
}

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

Lines changed: 25 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,27 +5,34 @@
55
<button (click)="grid1.addRow({'ID': 'TEST', 'CompanyName': 'Test'})">Add Row</button>
66
<div class="sample-content">
77
<div class="sample-column">
8+
<div class="sample-buttons">
9+
<button igxButton="raised" (click)="saveGridState()">Save state</button>
10+
<button igxButton="raised" (click)="restoreGridState()">Restore state</button>
11+
</div>
812
<div class="sample-switches">
913
<igx-switch (change)='onRowChange()' style="padding-left: 10px"> Bottom Row Pinning toggle</igx-switch>
1014
<igx-switch (change)='onChange()' style="padding-left: 10px"> Right Column Pinning toggle</igx-switch>
1115
</div>
12-
<igx-grid [allowFiltering]='true' [primaryKey]='"ID"' [pinning]="pinningConfig" [showToolbar]='true' [columnPinning]='true' #grid1 [data]="data" [width]="'800px'" [height]="'500px'" [rowSelectable]="false">
13-
<igx-column width='70px' [filterable]='false'>
14-
<ng-template igxCell let-cell="cell" let-val>
15-
<igx-icon class="pin-icon" (mousedown)="togglePining(cell.row, $event)">
16-
{{cell.row.pinned ? 'lock' : 'lock_open'}}
17-
</igx-icon>
18-
</ng-template>
19-
</igx-column>
20-
<igx-column width='100px' [filterable]='false'>
21-
<ng-template igxCell let-cell="cell" let-val>
22-
<button (click)="grid1.deleteRow(cell.row.rowID)">Delete</button>
23-
</ng-template>
24-
</igx-column>
25-
<igx-column *ngFor="let c of columns" [sortable]="true" [field]="c.field" [header]="c.field" [width]="c.width" [pinned]='c.pinned' [groupable]='c.groupable'
26-
[hidden]='c.hidden' [editable]='true'>
27-
</igx-column>
28-
</igx-grid>
16+
<igx-grid [igxGridState]="options" [allowFiltering]='true' [primaryKey]='"ID"' [pinning]="pinningConfig"
17+
[columnHiding]='true' [showToolbar]='true' [columnPinning]='true' #grid1 [data]="data" [width]="'800px'"
18+
[height]="'500px'" [rowSelectable]="false">
19+
<igx-column width='70px' [filterable]='false'>
20+
<ng-template igxCell let-cell="cell" let-val>
21+
<igx-icon class="pin-icon" (mousedown)="togglePining(cell.row, $event)">
22+
{{cell.row.pinned ? 'lock' : 'lock_open'}}
23+
</igx-icon>
24+
</ng-template>
25+
</igx-column>
26+
<igx-column width='100px' [filterable]='false'>
27+
<ng-template igxCell let-cell="cell" let-val>
28+
<button (click)="grid1.deleteRow(cell.row.rowID)">Delete</button>
29+
</ng-template>
30+
</igx-column>
31+
<igx-column *ngFor="let c of columns" [sortable]="true" [field]="c.field" [header]="c.field"
32+
[width]="c.width" [pinned]='c.pinned' [groupable]='c.groupable' [hidden]='c.hidden'
33+
[editable]='true'>
34+
</igx-column>
35+
</igx-grid>
2936
</div>
3037
</div>
31-
</div>
38+
</div>

‎src/app/grid-row-pinning/grid-row-pinning.sample.ts‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Component, OnInit, ViewChild } from '@angular/core';
2-
import { IgxGridComponent, ColumnPinningPosition, RowPinningPosition, IgxGridRowComponent, IgxTransactionService, IgxGridTransaction } from 'igniteui-angular';
2+
import { IgxGridComponent, ColumnPinningPosition, RowPinningPosition, IgxGridRowComponent, IgxTransactionService, IgxGridTransaction, IgxGridStateDirective } from 'igniteui-angular';
33
import { IPinningConfig } from 'projects/igniteui-angular/src/lib/grids/common/grid.interface';
44

55
@Component({
@@ -12,9 +12,24 @@ import { IPinningConfig } from 'projects/igniteui-angular/src/lib/grids/common/g
1212
export class GridRowPinningSampleComponent implements OnInit {
1313
public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.Start };
1414

15+
public options = {
16+
cellSelection: true,
17+
rowSelection: true,
18+
filtering: true,
19+
advancedFiltering: true,
20+
paging: true,
21+
sorting: true,
22+
groupBy: true,
23+
columns: false,
24+
rowPinning: true,
25+
pinningConfig: true
26+
};
27+
1528
@ViewChild('grid1', { static: true })
1629
grid1: IgxGridComponent;
1730

31+
@ViewChild(IgxGridStateDirective, { static: true }) public state: IgxGridStateDirective;
32+
1833
onRowChange() {
1934
if (this.pinningConfig.rows === RowPinningPosition.Bottom) {
2035
this.pinningConfig = { columns: this.pinningConfig.columns, rows: RowPinningPosition.Top };
@@ -97,4 +112,14 @@ export class GridRowPinningSampleComponent implements OnInit {
97112
}
98113
}
99114

115+
public saveGridState() {
116+
const state = this.state.getState() as string;
117+
window.localStorage.setItem("grid1-state", state);
118+
}
119+
120+
public restoreGridState() {
121+
const state = window.localStorage.getItem("grid1-state");
122+
this.state.setState(state);
123+
}
124+
100125
}

0 commit comments

Comments
 (0)