Skip to content

Commit 030edf2

Browse files
dkamburovdkamburov
authored
Merge pull request #10615 from IgniteUI/mkirova/change-default-expand-state
Set default expand state to be collapsed for pivot. Allow changing via prop.
2 parents 7a0cbb9 + 822606e commit 030edf2

File tree

7 files changed

+33
-18
lines changed

7 files changed

+33
-18
lines changed

‎projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
| pivotGridRow:pivotConfiguration:expansionStates:pipeTrigger:sortingExpressions
3636
| pivotGridColumn:pivotConfiguration:expansionStates:pipeTrigger:sortingExpressions
3737
| pivotGridColumnSort:sortingExpressions:sortStrategy:pipeTrigger
38-
| pivotGridRowExpansion:pivotConfiguration:expansionStates:pipeTrigger"
38+
| pivotGridRowExpansion:pivotConfiguration:expansionStates:defaultExpandState:pipeTrigger"
3939
let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]='verticalScroll'
4040
[igxForContainerSize]='calcHeight'
4141
[igxForItemSize]="hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight"

‎projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -274,11 +274,24 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
274274
*/
275275
public dragRowID = null;
276276

277-
protected _defaultExpandState = true;
277+
protected _defaultExpandState = false;
278278
private _data;
279279
private _filteredData;
280280
private p_id = `igx-pivot-grid-${NEXT_ID++}`;
281281

282+
283+
/**
284+
* Gets/Sets the default expand state for all rows.
285+
*/
286+
@Input()
287+
public get defaultExpandState() {
288+
return this._defaultExpandState;
289+
}
290+
291+
public set defaultExpandState(val: boolean) {
292+
this._defaultExpandState = val;
293+
}
294+
282295
/**
283296
* @hidden @internal
284297
*/

‎projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.pipes.spec.ts

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ describe('Pivot pipes', () => {
7272
it('transforms flat data to pivot data', () => {
7373
const rowPipeResult = rowPipe.transform(data, pivotConfig, expansionStates);
7474
const columnPipeResult = columnPipe.transform(rowPipeResult, pivotConfig, expansionStates);
75-
const rowStatePipeResult = rowStatePipe.transform(columnPipeResult, pivotConfig, expansionStates);
75+
const rowStatePipeResult = rowStatePipe.transform(columnPipeResult, pivotConfig, expansionStates, true);
7676
expect(rowStatePipeResult).toEqual([
7777
{ All: 2127, 'All-Bulgaria': 774, 'All-USA': 829, 'All-Uruguay': 524, AllCategory: 'All', AllCategory_level: 0 },
7878
{ ProductCategory: 'Clothing', All: 1526, 'All-Bulgaria': 774, 'All-USA': 296, 'All-Uruguay': 456, ProductCategory_level: 1 },
@@ -175,7 +175,7 @@ describe('Pivot pipes', () => {
175175
], level: 0
176176
}]);
177177
const columnPipeResult = columnPipe.transform(rowPipeResult, pivotConfig, expansionStates);
178-
const rowStatePipeResult = rowStatePipe.transform(columnPipeResult, pivotConfig, expansionStates);
178+
const rowStatePipeResult = rowStatePipe.transform(columnPipeResult, pivotConfig, expansionStates, true);
179179
expect(rowStatePipeResult).toEqual([
180180
{
181181
ProductCategory: 'Clothing', All: 1526, 'All-Bulgaria': 774, 'All-USA': 296,
@@ -192,7 +192,7 @@ describe('Pivot pipes', () => {
192192
expanded.set('All', false);
193193
const rowPipeResult = rowPipe.transform(data, pivotConfig, expanded);
194194
const columnPipeResult = columnPipe.transform(rowPipeResult, pivotConfig, expansionStates);
195-
const rowPipeCollapseResult = rowStatePipe.transform(columnPipeResult, pivotConfig, expanded);
195+
const rowPipeCollapseResult = rowStatePipe.transform(columnPipeResult, pivotConfig, expanded, true);
196196
expect(rowPipeCollapseResult).toEqual([
197197
{
198198
AllCategory: 'All',
@@ -205,7 +205,7 @@ describe('Pivot pipes', () => {
205205
]);
206206

207207
expanded.set('All', true);
208-
const rowPipeExpandResult = rowStatePipe.transform(columnPipeResult, pivotConfig, expanded);
208+
const rowPipeExpandResult = rowStatePipe.transform(columnPipeResult, pivotConfig, expanded, true);
209209
expect(rowPipeExpandResult).toEqual([
210210
{ AllCategory: 'All', All: 2127, 'All-Bulgaria': 774, 'All-USA': 829, 'All-Uruguay': 524, AllCategory_level: 0 },
211211
{ ProductCategory: 'Clothing', All: 1526, 'All-Bulgaria': 774, 'All-USA': 296, 'All-Uruguay': 456, ProductCategory_level: 1 },
@@ -236,7 +236,7 @@ describe('Pivot pipes', () => {
236236
];
237237
const rowPipeResult = rowPipe.transform(data, pivotConfig, expansionStates);
238238
const columnPipeResult = columnPipe.transform(rowPipeResult, pivotConfig, expansionStates);
239-
const rowStatePipeResult = rowStatePipe.transform(columnPipeResult, pivotConfig, expansionStates);
239+
const rowStatePipeResult = rowStatePipe.transform(columnPipeResult, pivotConfig, expansionStates, true);
240240
expect(rowStatePipeResult).toEqual([
241241
{ Date: '01/01/2021', ProductCategory: 'Clothing', All: 282, 'All-Bulgaria': 282, ProductCategory_level: 0, Date_level: 0 },
242242
{ Date: '01/05/2019', ProductCategory: 'Clothing', All: 296, 'All-USA': 296, ProductCategory_level: 0, Date_level: 0 },
@@ -268,7 +268,7 @@ describe('Pivot pipes', () => {
268268
}];
269269
const rowPipeResult = rowPipe.transform(data, pivotConfig, expansionStates);
270270
const columnPipeResult = columnPipe.transform(rowPipeResult, pivotConfig, expansionStates);
271-
const rowStatePipeResult = rowStatePipe.transform(columnPipeResult, pivotConfig, expansionStates);
271+
const rowStatePipeResult = rowStatePipe.transform(columnPipeResult, pivotConfig, expansionStates, true);
272272
expect(rowStatePipeResult).toEqual([
273273
{
274274
'AllDate': 'AllDate', 'AllProd': 'AllProd', 'All': 2127, 'All-Bulgaria': 774, 'All-USA': 829, 'All-Uruguay': 524, 'AllProd_level': 0,
@@ -363,7 +363,7 @@ describe('Pivot pipes', () => {
363363
}];
364364
const rowPipeResult = rowPipe.transform(data, pivotConfig, new Map<any, boolean>());
365365
const columnPipeResult = columnPipe.transform(rowPipeResult, pivotConfig, new Map<any, boolean>());
366-
const rowStatePipeResult = rowStatePipe.transform(columnPipeResult, pivotConfig, new Map<any, boolean>());
366+
const rowStatePipeResult = rowStatePipe.transform(columnPipeResult, pivotConfig, new Map<any, boolean>(), true);
367367
/* eslint-disable quote-props */
368368
expect(rowStatePipeResult).toEqual([
369369
{
@@ -404,7 +404,7 @@ describe('Pivot pipes', () => {
404404
}];
405405
const rowPipeResult = rowPipe.transform(data, pivotConfig, new Map<any, boolean>());
406406
const columnPipeResult = columnPipe.transform(rowPipeResult, pivotConfig, new Map<any, boolean>());
407-
const rowStateResult = rowStatePipe.transform(columnPipeResult, pivotConfig, new Map<any, boolean>());
407+
const rowStateResult = rowStatePipe.transform(columnPipeResult, pivotConfig, new Map<any, boolean>(), true);
408408
/* eslint-disable quote-props */
409409
expect(rowStateResult).toEqual(
410410
[
@@ -458,7 +458,7 @@ describe('Pivot pipes', () => {
458458
];
459459
const rowPipeResult = rowPipe.transform(data, pivotConfig, expansionStates);
460460
const columnPipeResult = columnPipe.transform(rowPipeResult, pivotConfig, expansionStates);
461-
const rowStatePipeResult = rowStatePipe.transform(columnPipeResult, pivotConfig, new Map<any, boolean>());
461+
const rowStatePipeResult = rowStatePipe.transform(columnPipeResult, pivotConfig, new Map<any, boolean>(), true);
462462
expect(rowStatePipeResult).toEqual(
463463
[
464464
{
@@ -507,7 +507,7 @@ describe('Pivot pipes', () => {
507507

508508
const rowPipeResult = rowPipe.transform(preprocessedData, pivotConfig, new Map<any, boolean>());
509509
const columnPipeResult = columnPipe.transform(rowPipeResult, pivotConfig, new Map<any, boolean>());
510-
const rowStateResult = rowStatePipe.transform(columnPipeResult, pivotConfig, new Map<any, boolean>());
510+
const rowStateResult = rowStatePipe.transform(columnPipeResult, pivotConfig, new Map<any, boolean>(), true);
511511

512512
// same data but expanded
513513
expect(rowStateResult).toEqual(
@@ -814,7 +814,7 @@ describe('Pivot pipes', () => {
814814

815815
const rowPipeResult = rowPipe.transform(data, pivotConfig, expansionStates);
816816
const colPipeRes = columnPipe.transform(rowPipeResult, pivotConfig, expansionStates);
817-
const rowStatePipeResult = rowStatePipe.transform(colPipeRes, pivotConfig, expansionStates);
817+
const rowStatePipeResult = rowStatePipe.transform(colPipeRes, pivotConfig, expansionStates, true);
818818
expect(rowStatePipeResult.length).toEqual(39);
819819
expect(rowStatePipeResult[0]['AllPeriods']).toEqual('All Periods');
820820
expect(rowStatePipeResult[0]['AllProducts']).toEqual('All');

‎projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.pipes.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ export class IgxPivotRowExpansionPipe implements PipeTransform {
5454
collection: any[],
5555
config: IPivotConfiguration,
5656
expansionStates: Map<any, boolean>,
57+
defaultExpand: boolean,
5758
_pipeTrigger?: number,
5859
__?,
5960
pivotKeys: IPivotKeys = { aggregations: 'aggregations', records: 'records', children: 'children', level: 'level' }
@@ -65,7 +66,7 @@ export class IgxPivotRowExpansionPipe implements PipeTransform {
6566
for (const row of enabledRows) {
6667
const lvl = PivotUtil.getDimensionDepth(row);
6768
totalLlv += lvl;
68-
PivotUtil.flattenHierarchy(data, config, row, expansionStates, pivotKeys, totalLlv, prevDims, 0);
69+
PivotUtil.flattenHierarchy(data, config, row, expansionStates, defaultExpand, pivotKeys, totalLlv, prevDims, 0);
6970
prevDims.push(row);
7071
}
7172
this.cleanState(data, pivotKeys);

‎projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-util.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,12 +78,12 @@ export class PivotUtil {
7878
config: IPivotConfiguration,
7979
dim: IPivotDimension,
8080
expansionStates: any,
81+
defaultExpandState: boolean,
8182
pivotKeys: IPivotKeys,
8283
lvl: number,
8384
prevDims: IPivotDimension[],
8485
currDimLvl: number) {
8586
const data = records;
86-
const defaultExpandState = true;
8787
for (let i = 0; i < data.length; i++) {
8888
const rec = data[i];
8989
const field = dim.memberName;
@@ -102,7 +102,7 @@ export class PivotUtil {
102102
if (dim.childLevel) {
103103
if (PivotUtil.getDimensionDepth(dim) > 1) {
104104
dimData = this.flattenHierarchy(dimData, config, dim.childLevel,
105-
expansionStates, pivotKeys, lvl - 1, prevDims, currDimLvl + 1);
105+
expansionStates, defaultExpandState, pivotKeys, lvl - 1, prevDims, currDimLvl + 1);
106106
} else {
107107
dimData.forEach(d => {
108108
d[dim.childLevel.memberName + '_' + pivotKeys.level] = currDimLvl + 1;

‎projects/igniteui-angular/src/lib/test-utils/pivot-grid-samples.spec.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,11 @@ import { IPivotConfiguration, PivotAggregation } from '../grids/pivot-grid/pivot
55

66
@Component({
77
template: `
8-
<igx-pivot-grid #grid [data]="data" [pivotConfiguration]="pivotConfigHierarchy">
8+
<igx-pivot-grid #grid [data]="data" [pivotConfiguration]="pivotConfigHierarchy" [defaultExpandState]='defaultExpand'>
99
</igx-pivot-grid>`
1010
})
1111
export class IgxPivotGridTestBaseComponent {
12+
public defaultExpand = true;
1213
@ViewChild('grid', { read: IgxPivotGridComponent, static: true }) public pivotGrid: IgxPivotGridComponent;
1314
public data;
1415

‎src/app/pivot-grid/pivot-grid.sample.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
<div class="sample-column">
2-
<igx-pivot-grid #grid1 [data]="origData" [width]="'100%'" [height]="'100%'" [pivotConfiguration]="pivotConfigHierarchy">
2+
<igx-pivot-grid #grid1 [data]="origData" [width]="'100%'" [height]="'100%'" [defaultExpandState]='true' [pivotConfiguration]="pivotConfigHierarchy">
33
</igx-pivot-grid>
44
</div>

0 commit comments

Comments
 (0)