Skip to content

Commit

Permalink
fix(state): iterate deep child grids #7025
Browse files Browse the repository at this point in the history
  • Loading branch information
@hanastasov
hanastasov committed Jun 19, 2020
1 parent 9a33f19 commit fdd7a17
Show file tree
Hide file tree
Showing 3 changed files with 75 additions and 29 deletions.
59 changes: 47 additions & 12 deletions projects/igniteui-angular/src/lib/grids/state.directive.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { IGroupingState } from '../data-operations/groupby-state.interface';
import { IgxGridBaseDirective } from './grid-base.directive';
import { IgxGridComponent } from './grid/grid.component';
import { IPinningConfig } from './grid.common';
import { IgxHierarchicalGridComponent } from './hierarchical-grid/hierarchical-grid.component';

export interface IGridState {
columns?: IColumnState[];
Expand All @@ -34,6 +35,7 @@ export interface IGridState {

export interface IGridStateCollection {
id: string;
parentRowID: any;
state: IGridState;
}

Expand Down Expand Up @@ -351,6 +353,7 @@ namespace Features {
const sortingState = context.currGrid.sortingExpressions;
sortingState.forEach(s => {
delete s.strategy;
delete s.owner;
});
return { sorting: sortingState };
}
Expand All @@ -364,6 +367,10 @@ namespace Features {

public getFeatureState(context: IgxGridStateDirective): IGridState {
const filteringState = context.currGrid.filteringExpressionsTree;
delete filteringState.owner;
for (const item of filteringState.filteringOperands) {
delete (item as IFilteringExpressionsTree).owner;
}
return { filtering: filteringState };
}

Expand All @@ -377,6 +384,12 @@ namespace Features {

public getFeatureState(context: IgxGridStateDirective): IGridState {
const filteringState = context.currGrid.advancedFilteringExpressionsTree;
if (filteringState) {
delete filteringState.owner;
for (const item of filteringState.filteringOperands) {
delete (item as IFilteringExpressionsTree).owner;
}
}
return { advancedFiltering: filteringState };
}

Expand Down Expand Up @@ -556,12 +569,16 @@ namespace Features {
const childGridStates: IGridStateCollection[] = [];
const rowIslands = (context.currGrid as any).allLayoutList;
if (rowIslands) {
rowIslands.forEach(rowIslandComponent => {
context.currGrid = rowIslandComponent.rowIslandAPI.getChildGrids()[0];
if (context.currGrid) {
const rowIslandState = context.buildState(context.features) as IGridState;
childGridStates.push({ id: `${rowIslandComponent.id}`, state: rowIslandState });
}
rowIslands.forEach(rowIsland => {
const childGrids = rowIsland.rowIslandAPI.getChildGrids();
childGrids.forEach(chGrid => {
const parentRowID = this.getParentRowID(chGrid);
context.currGrid = chGrid;
if (context.currGrid) {
const childGridState = context.buildState(context.features) as IGridState;
childGridStates.push({ id: `${rowIsland.id}`, parentRowID: parentRowID, state: childGridState });
}
});
});
}
context.currGrid = context.grid;
Expand All @@ -571,16 +588,34 @@ namespace Features {
public restoreFeatureState(context: IgxGridStateDirective, state: any): void {
const rowIslands = (context.currGrid as any).allLayoutList;
if (rowIslands) {
rowIslands.forEach(rowIslandComponent => {
context.currGrid = rowIslandComponent.rowIslandAPI.getChildGrids()[0];
const rowIslandState = state.find(st => st.id === rowIslandComponent.id);
if (rowIslandState && context.currGrid) {
context.restoreGridState(rowIslandState.state, context.features);
}
rowIslands.forEach(rowIsland => {
const childGrids = rowIsland.rowIslandAPI.getChildGrids();
childGrids.forEach(chGrid => {
const parentRowID = this.getParentRowID(chGrid);
context.currGrid = chGrid;
const childGridState = state.find(st => st.id === rowIsland.id && st.parentRowID === parentRowID);
if (childGridState && context.currGrid) {
context.restoreGridState(childGridState.state, context.features);
}
});
});
}
context.currGrid = context.grid;
}

/**
* Traverses the hierarchy up to the root grid to return the ID of the expanded row.
*/
private getParentRowID(grid: IgxHierarchicalGridComponent) {
let childGrid, childRow;
while (grid.parent) {
childRow = grid.childRow;
childGrid = grid;
grid = grid.parent;
}
return grid.hgridAPI.getParentRowId(childGrid);
// return (childRow.hGridApi as IgxHierarchicalGridAPIService).getParentRowId(childGrid);
}
}

}
Expand Down
19 changes: 9 additions & 10 deletions src/app/grid-state/grid-state.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<igx-expansion-panel-body>
<div style='width: 100%; height: 100%'>
<ng-container *ngTemplateOutlet="controls; context: getContext(grid)"></ng-container>
<igx-grid [id]="gridId" #grid [igxGridState]="options" [columnPinning]="true"
<igx-grid [id]="gridId" #grid [igxGridState]="options" [columnSelection]="'multiple'" [columnPinning]="true"
displayDensity="cosy"
width="1200px" height="550px" [autoGenerate]="false"
[data]="localData"
Expand Down Expand Up @@ -64,15 +64,14 @@
<igx-expansion-panel-body>
<div style='width: 100%; height: 100%'>
<ng-container *ngTemplateOutlet="controls; context: getContext(hGrid)"></ng-container>
<igx-hierarchical-grid #hierGrid [id]="hGridId" [data]="hierData" [showExpandAll]='true' [hasChildrenKey]='"hasChild"' igxGridState
<igx-hierarchical-grid #hierGrid [id]="hGridId" [data]="hierData" [showToolbar]="true" [columnHiding] = "true" [showExpandAll]='true' [hasChildrenKey]='"hasChild"' igxGridState [columnSelection]="'multiple'"
displayDensity="cosy" [rowSelection]="true" [autoGenerate]="false" [allowFiltering]='true' [paging]="true" primaryKey="ID"
[height]="'1000px'" [width]="'100%'" #hGrid>
[height]="'1300px'" [width]="'100%'" #hGrid>

<igx-column *ngFor="let c of hierGridColumns"
[sortable]="c.sortable"
[movable]="c.movable"
[editable]="true"
[hasSummary]="c.hasSummary"
[filterable]="c.filterable"
[groupable]="c.groupable"
[field]="c.field"
Expand All @@ -82,13 +81,12 @@
[hidden]="c.hidden">
</igx-column>

<igx-row-island primaryKey="ID" [key]="'childData'"
[height]='"1200px"' [showExpandAll]='true' [autoGenerate]="false" [allowFiltering]='true' rowSelection='multiple' #layout1>
<igx-row-island primaryKey="ID" [key]="'childData'" [showToolbar]="true" [columnHiding] = "true"
[height]='"450px"' [showExpandAll]='true' [autoGenerate]="false" [allowFiltering]='true' rowSelection='multiple' #layout1>
<igx-column *ngFor="let c of hierGridColumns"
[sortable]="c.sortable"
[movable]="c.movable"
[editable]="true"
[hasSummary]="c.hasSummary"
[filterable]="c.filterable"
[groupable]="c.groupable"
[field]="c.field"
Expand All @@ -103,7 +101,6 @@
[sortable]="c.sortable"
[movable]="c.movable"
[editable]="true"
[hasSummary]="c.hasSummary"
[filterable]="c.filterable"
[groupable]="c.groupable"
[field]="c.field"
Expand All @@ -118,7 +115,6 @@
[sortable]="c.sortable"
[movable]="c.movable"
[editable]="true"
[hasSummary]="c.hasSummary"
[filterable]="c.filterable"
[groupable]="c.groupable"
[field]="c.field"
Expand Down Expand Up @@ -218,9 +214,12 @@
<div class="control-item">
<button igxButton="raised" (click)="restoreGridState(state)">Restore All</button>
</div>
<div class="control-item">
<button igxButton="raised" (click)="saveGridState(state)">Save</button>
</div>
<div class="control-item" *ngFor="let f of features">
<button igxButton="raised" (click)="restoreFeature(state, f.key)">{{ f.shortName }}</button>
</div>
</div>
</div>
</ng-template>
</ng-template>
26 changes: 19 additions & 7 deletions src/app/grid-state/grid-state.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ class MySummary extends IgxNumberSummaryOperand {

export class GridSaveStateComponent implements OnInit, AfterViewInit {
public localData = employeesData;
public hierData = this.generateDataUneven(100, 3);
public hierData = this.generateDataUneven(10, 3);
public treeGridFlatData = TREEGRID_FLAT_DATA;
public employees = EMPLOYEE_DATA;
public gridId = 'grid1';
Expand Down Expand Up @@ -107,7 +107,7 @@ export class GridSaveStateComponent implements OnInit, AfterViewInit {

public ngOnInit() {
this.router.events.pipe(take(1)).subscribe((event: NavigationStart) => {
this.saveGridState();
this.saveGridState(null);
});
}

Expand Down Expand Up @@ -136,18 +136,30 @@ export class GridSaveStateComponent implements OnInit, AfterViewInit {
}

// save state for all grids on the page
public saveGridState() {
this.state.forEach(stateDirective => {
let state = stateDirective.getState(this.serialize);
public saveGridState(stateDirective: IgxGridStateDirective) {
if (stateDirective) {
let state = stateDirective.getState(this.serialize);
if (typeof state !== 'string') {
state = JSON.stringify(state);
}
try {
window.localStorage.setItem(`${stateDirective.grid.id}-state`, state);
} catch (e) {
console.log('Storage is full, or the value that you try to se is too long to be written in single item, Please empty data');
}
} else {
this.state.forEach(stateDir => {
let state = stateDir.getState(this.serialize);
if (typeof state !== 'string') {
state = JSON.stringify(state);
}
try {
window.localStorage.setItem(`${stateDirective.grid.id}-state`, state);
window.localStorage.setItem(`${stateDir.grid.id}-state`, state);
} catch (e) {
console.log('Storage is full, or the value that you try to se is too long to be written in single item, Please empty data');
}
});
}
}

// restores grid state for the passed stateDirective only
Expand Down Expand Up @@ -229,4 +241,4 @@ export class GridSaveStateComponent implements OnInit, AfterViewInit {
}
return prods;
}
}
}

0 comments on commit fdd7a17

Please sign in to comment.