Skip to content

Commit 9d0b490

Browse files
MayaKirovaMayaKirova
authored
feat(igxPivotGrid): Allow setting width:auto so that row dimension is… (#14146)
1 parent 1ddb6a2 commit 9d0b490

File tree

7 files changed

+107
-6
lines changed

7 files changed

+107
-6
lines changed

‎projects/igniteui-angular/src/lib/grids/common/grid.interface.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1269,6 +1269,7 @@ export interface PivotGridType extends GridType {
12691269
/** Move value from its currently at specified index or at the end.
12701270
* If the parameter is not set, it will add it to the end of the collection. */
12711271
moveValue(value: IPivotValue, index?: number);
1272+
rowDimensionWidth(dim: IPivotDimension): string;
12721273
rowDimensionWidthToPixels(dim: IPivotDimension): number;
12731274
/** Emits an event when the dimensions in the pivot grid change. */
12741275
dimensionsChange: EventEmitter<IDimensionsChange>;

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

Lines changed: 53 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import {
2929
} from '@angular/core';
3030
import { DOCUMENT, NgTemplateOutlet, NgIf, NgClass, NgStyle, NgFor } from '@angular/common';
3131

32+
import { first} from 'rxjs/operators';
3233
import { IgxGridBaseDirective } from '../grid-base.directive';
3334
import { IgxFilteringService } from '../filtering/grid-filtering.service';
3435
import { IgxGridSelectionService } from '../selection/selection.service';
@@ -1156,6 +1157,18 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
11561157
this.rowDimensionWidthToPixels(this.emptyRowDimension);
11571158
}
11581159

1160+
/**
1161+
* @hidden @internal
1162+
*/
1163+
public rowDimensionWidth(dim, ignoreBeforeInit = false ): string {
1164+
const isAuto = dim.width && dim.width.indexOf('auto') !== -1;
1165+
if (isAuto) {
1166+
return dim.autoWidth ? dim.autoWidth + 'px' : 'fit-content';
1167+
} else {
1168+
return this.rowDimensionWidthToPixels(dim, ignoreBeforeInit) + 'px';
1169+
}
1170+
}
1171+
11591172
/**
11601173
* @hidden @internal
11611174
*/
@@ -1168,8 +1181,11 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
11681181
return MINIMUM_COLUMN_WIDTH;
11691182
}
11701183
const isPercent = dim.width && dim.width.indexOf('%') !== -1;
1184+
const isAuto = dim.width && dim.width.indexOf('auto') !== -1;
11711185
if (isPercent) {
11721186
return parseFloat(dim.width) / 100 * this.calcWidth;
1187+
} else if (isAuto) {
1188+
return dim.autoWidth;
11731189
} else {
11741190
return parseInt(dim.width, 10);
11751191
}
@@ -2035,6 +2051,41 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
20352051
return columns;
20362052
}
20372053

2054+
protected override calculateGridSizes(recalcFeatureWidth = true) {
2055+
super.calculateGridSizes(recalcFeatureWidth);
2056+
if (this.hasDimensionsToAutosize) {
2057+
this.cdr.detectChanges();
2058+
this.zone.onStable.pipe(first()).subscribe(() => {
2059+
this.autoSizeDimensionsInView();
2060+
});
2061+
}
2062+
}
2063+
2064+
protected autoSizeDimensionsInView() {
2065+
if (!this.hasDimensionsToAutosize) return;
2066+
for (const dim of this.rowDimensions) {
2067+
if (dim.width === 'auto') {
2068+
const contentWidths = [];
2069+
const relatedDims = PivotUtil.flatten([dim]).map(x => x.memberName);
2070+
const content = this.rowDimensionContentCollection.filter(x => relatedDims.indexOf(x.dimension.memberName) !== -1);
2071+
const headers = content.map(x => x.headerGroups.toArray()).flat().map(x => x.header && x.header.refInstance);
2072+
headers.forEach((header) => contentWidths.push(header?.nativeElement?.offsetWidth || 0));
2073+
const max = Math.max(...contentWidths);
2074+
if (max === 0) {
2075+
// cells not in DOM yet...
2076+
continue;
2077+
}
2078+
const maxSize = Math.ceil(Math.max(...contentWidths));
2079+
dim.autoWidth = maxSize;
2080+
}
2081+
}
2082+
}
2083+
2084+
/** @hidden @internal */
2085+
public get hasDimensionsToAutosize() {
2086+
return this.rowDimensions.some(x => x.width === 'auto' && !x.autoWidth);
2087+
}
2088+
20382089
protected generateFromData(fields: string[]) {
20392090
const separator = this.pivotKeys.columnDimensionSeparator;
20402091
const dataArr = fields.map(x => x.split(separator)).sort(x => x.length);
@@ -2158,13 +2209,14 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
21582209
const count = this.values.length;
21592210
const childWidth = parseInt(parentWidth, 10) / count;
21602211
const isPercent = parentWidth && parentWidth.indexOf('%') !== -1;
2212+
const isAuto = parentWidth && parentWidth.indexOf('auto') !== -1;
21612213
this.values.forEach(val => {
21622214
const ref = createComponent(IgxColumnComponent, { environmentInjector: this.envInjector, elementInjector: this.injector });
21632215
ref.instance.header = val.displayName || val.member;
21642216
ref.instance.field = parent.field + this.pivotKeys.columnDimensionSeparator + val.member;
21652217
ref.instance.parent = parent;
21662218
if (parentWidth) {
2167-
ref.instance.width = isPercent ? childWidth + '%' : childWidth + 'px';
2219+
ref.instance.width = isAuto ? 'auto' : isPercent ? childWidth + '%' : childWidth + 'px';
21682220
}
21692221
ref.instance.hidden = hidden;
21702222
ref.instance.sortable = true;

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -124,10 +124,12 @@ export interface IPivotDimension {
124124
* The dataType of the related data field.
125125
*/
126126
dataType?: GridColumnDataType;
127-
/** The width of the dimension cells to be rendered.Can be pixel or %. */
127+
/** The width of the dimension cells to be rendered.Can be pixel, % or "auto". */
128128
width?: string;
129129
/** Level of the dimension. */
130130
level?: number;
131+
/** hidden */
132+
autoWidth?: number;
131133
}
132134
/**
133135
* Configuration of a pivot value aggregation.

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

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1932,6 +1932,50 @@ describe('IgxPivotGrid #pivotGrid', () => {
19321932
expect(rowDimension.width).toBe('158px');
19331933
expect(pivotGrid.rowDimensionWidthToPixels(rowDimension)).toBe(158);
19341934
});
1935+
1936+
it('should auto-size row dimension when width is set to auto.', () => {
1937+
const pivotGrid = fixture.componentInstance.pivotGrid;
1938+
let rowDimension = pivotGrid.pivotConfiguration.rows[0];
1939+
expect(rowDimension.width).toBeUndefined();
1940+
expect(pivotGrid.rowDimensionWidthToPixels(rowDimension)).toBe(200);
1941+
fixture.componentInstance.pivotConfigHierarchy = {
1942+
columns: [{
1943+
memberName: 'Country',
1944+
enabled: true
1945+
},
1946+
],
1947+
rows: [{
1948+
memberName: 'All',
1949+
memberFunction: () => 'All',
1950+
enabled: true,
1951+
width: "auto",
1952+
childLevel: {
1953+
memberName: 'ProductCategory',
1954+
memberFunction: (data) => data.ProductCategory,
1955+
enabled: true
1956+
}
1957+
}],
1958+
values: [
1959+
{
1960+
member: 'UnitPrice',
1961+
aggregate: {
1962+
aggregator: IgxPivotNumericAggregate.sum,
1963+
key: 'SUM',
1964+
label: 'Sum',
1965+
},
1966+
enabled: true,
1967+
dataType: 'currency'
1968+
}
1969+
],
1970+
filters: []
1971+
};
1972+
1973+
fixture.detectChanges();
1974+
rowDimension = pivotGrid.pivotConfiguration.rows[0];
1975+
expect(rowDimension.autoWidth).toBe(158);
1976+
expect(rowDimension.width).toBe('auto');
1977+
expect(pivotGrid.rowDimensionWidthToPixels(rowDimension)).toBe(158);
1978+
});
19351979
});
19361980
});
19371981

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@
33
<div class="igx-grid__tr igx-grid__tr-header-row" role="row" [style.width.px]="width">
44
<igx-pivot-row-dimension-header-group [ngClass]="rowDimensionColumn.headerGroupClasses"
55
[ngStyle]="rowDimensionColumn.headerGroupStyles | igxHeaderGroupStyle:rowDimensionColumn:grid.pipeTrigger" [column]="rowDimensionColumn"
6-
[style.min-width]="grid.rowDimensionWidthToPixels(rootDimension) | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
7-
[style.flex-basis]="grid.rowDimensionWidthToPixels(rootDimension) | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL"
6+
[style.min-width]="grid.rowDimensionWidth(rootDimension)"
7+
[style.width]="grid.rowDimensionWidth(rootDimension)"
8+
[style.flex-basis]="grid.rowDimensionWidth(rootDimension)"
89
[rowIndex]="rowIndex"
910
[parent]='this'>
1011
</igx-pivot-row-dimension-header-group>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@
6363
<igx-pivot-grid
6464
#grid1
6565
[data]="origData"
66-
[width]="'100%'"
66+
[width]="'800px'"
6767
[height]="'100%'"
6868
[displayDensity]="density"
6969
[superCompactMode]="gridDensity === 'superCompact'"

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,14 +129,15 @@ export class PivotGridSampleComponent {
129129
memberName: 'City',
130130
displayName: 'City',
131131
enabled: true,
132-
width: '100px'
132+
width: 'auto'
133133
},
134134
],
135135
rows: [
136136
{
137137
memberName: 'SellerName',
138138
displayName: 'Seller Name',
139139
enabled: true,
140+
width: "auto"
140141
//filter: this.filterExpTree
141142
}
142143
],

0 commit comments

Comments
 (0)