Skip to content

Commit f1d9ad2

Browse files
MKirovaMKirova
MKirova
authored and
MKirova
committed
Add width property to set dimension cells width in px or %.
1 parent e592452 commit f1d9ad2

File tree

6 files changed

+52
-16
lines changed

6 files changed

+52
-16
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
@@ -46,7 +46,7 @@
4646
</ng-template>
4747
</ng-template>
4848
<ng-template #record_template let-rowIndex="index" let-rowData>
49-
<igx-pivot-row [gridID]="id" [index]="rowIndex" [rowData]="rowData" [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger"
49+
<igx-pivot-row [pivotRowWidths]='pivotRowWidths' [gridID]="id" [index]="rowIndex" [rowData]="rowData" [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger"
5050
[ngStyle]="rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger" #row>
5151
</igx-pivot-row>
5252
</ng-template>

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

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import { GridType } from '../common/grid.interface';
2121
import { IgxGridNavigationService } from '../grid-navigation.service';
2222
import { IgxGridCRUDService } from '../common/crud.service';
2323
import { IgxGridSummaryService } from '../summaries/grid-summary.service';
24-
import { IPivotConfiguration, IPivotKeys, PivotDimensionType } from './pivot-grid.interface';
24+
import { IPivotConfiguration, IPivotDimension, IPivotKeys, PivotDimensionType } from './pivot-grid.interface';
2525
import { IgxPivotHeaderRowComponent } from './pivot-header-row.component';
2626
import { IgxColumnGroupComponent } from '../columns/column-group.component';
2727
import { IgxColumnComponent } from '../columns/column.component';
@@ -491,8 +491,19 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
491491
}
492492

493493
public get pivotRowWidths() {
494-
const rowDimCount = this.rowDimensions.length;
495-
return MINIMUM_COLUMN_WIDTH * rowDimCount || MINIMUM_COLUMN_WIDTH;
494+
return this.rowDimensions.reduce((accumulator, dim) => accumulator + this.resolveRowDimensionWidth(dim), 0);
495+
}
496+
497+
public resolveRowDimensionWidth(dim: IPivotDimension): number {
498+
if(!dim.width) {
499+
return MINIMUM_COLUMN_WIDTH;
500+
}
501+
const isPercent = dim.width && dim.width.indexOf('%') !== -1;
502+
if (isPercent) {
503+
return parseFloat(dim.width) / 100 * this.calcWidth;
504+
} else {
505+
return parseInt(dim.width, 10);
506+
}
496507
}
497508

498509
public get rowDimensions() {
@@ -845,12 +856,13 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
845856
ref.instance.header = parent != null ? key.split(parent.header + '-')[1] : key;
846857
ref.instance.field = key;
847858
ref.instance.parent = parent;
859+
ref.instance.width = value.dimension.width || MINIMUM_COLUMN_WIDTH + 'px';
848860
ref.instance.dataType = this.pivotConfiguration.values[0]?.dataType || this.resolveDataTypes(data[0][key]);
849861
ref.instance.formatter = this.pivotConfiguration.values[0]?.formatter;
850862
ref.changeDetectorRef.detectChanges();
851863
columns.push(ref.instance);
852864
if (this.hasMultipleValues) {
853-
const measureChildren = this.getMeasureChildren(factoryColumn, data, ref.instance, false);
865+
const measureChildren = this.getMeasureChildren(factoryColumn, data, ref.instance, false, value.dimension.width);
854866
ref.instance.children.reset(measureChildren);
855867
columns = columns.concat(measureChildren);
856868
}
@@ -868,6 +880,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
868880
refSibling.instance.header = parent != null ? key.split(parent.header + '-')[1] : key;
869881
refSibling.instance.field = key;
870882
refSibling.instance.parent = parent;
883+
ref.instance.width = value.dimension.width || MINIMUM_COLUMN_WIDTH + 'px';
871884
refSibling.instance.hidden = true;
872885
refSibling.instance.dataType = this.pivotConfiguration.values[0]?.dataType || this.resolveDataTypes(data[0][key]);
873886
refSibling.instance.formatter = this.pivotConfiguration.values[0]?.formatter;
@@ -878,7 +891,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
878891
ref.changeDetectorRef.detectChanges();
879892
columns.push(ref.instance);
880893
if (this.hasMultipleValues) {
881-
const measureChildren = this.getMeasureChildren(factoryColumn, data, ref.instance, true);
894+
const measureChildren = this.getMeasureChildren(factoryColumn, data, ref.instance, true, value.dimension.width);
882895
const nestedChildren = filteredChildren.concat(measureChildren);
883896
const allChildren = children.concat(measureChildren);
884897
ref.instance.children.reset(nestedChildren);
@@ -893,13 +906,14 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
893906
return columns;
894907
}
895908

896-
protected getMeasureChildren(colFactory, data, parent, hidden) {
909+
protected getMeasureChildren(colFactory, data, parent, hidden, parentWidth) {
897910
const cols = [];
898911
this.values.forEach(val => {
899912
const ref = colFactory.create(this.viewRef.injector);
900913
ref.instance.header = val.displayName || val.member;
901914
ref.instance.field = parent.field + '-' + val.member;
902915
ref.instance.parent = parent;
916+
ref.instance.width = parentWidth || MINIMUM_COLUMN_WIDTH + 'px';
903917
ref.instance.hidden = hidden;
904918
ref.instance.dataType = val.dataType || this.resolveDataTypes(data[0][val.member]);
905919
ref.instance.formatter = val.formatter;

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ export interface IPivotDimension {
2626
enabled: boolean;
2727
// A predefined or defined via the `igxPivotSelector` filter expression tree for the current dimension to be applied in the filter pipe.
2828
filter?: FilteringExpressionsTree | null;
29+
// The width of the dimension cells to be rendered.Can be pixel or %.
30+
width? : string;
2931
}
3032

3133
export interface IPivotValue {

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

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ import {
99
SimpleChanges,
1010
TemplateRef,
1111
ViewChild,
12-
ViewContainerRef
12+
ViewContainerRef,
13+
Input
1314
} from '@angular/core';
1415
import { IgxPivotGridComponent } from './pivot-grid.component';
1516
import { IgxRowDirective } from '../row.directive';
@@ -28,6 +29,9 @@ const MINIMUM_COLUMN_WIDTH = 200;
2829
})
2930
export class IgxPivotRowComponent extends IgxRowDirective<IgxPivotGridComponent> implements OnChanges {
3031

32+
@Input()
33+
public pivotRowWidths: string;
34+
3135
/**
3236
* @hidden @internal
3337
*/
@@ -94,12 +98,20 @@ export class IgxPivotRowComponent extends IgxRowDirective<IgxPivotGridComponent>
9498
* @internal
9599
*/
96100
public ngOnChanges(changes: SimpleChanges) {
101+
const rowDimConfig = this.grid.rowDimensions;
97102
if (changes.rowData) {
98103
// generate new rowDimension on row data change
99104
this.rowDimensionData = [];
100-
const rowDimConfig = this.grid.rowDimensions;
101105
this.extractFromDimensions(rowDimConfig, 0);
102106
}
107+
if (changes.pivotRowWidths && this.rowDimensionData) {
108+
for (const dim of rowDimConfig) {
109+
const dimData = PivotUtil.getDimensionLevel(dim, this.rowData,
110+
{ aggregations: 'aggregations', records: 'records', children: 'children', level: 'level'});
111+
const data = this.rowDimensionData.find(x => x.dimension.memberName === dimData.dimension.memberName);
112+
data.column.width = this.grid.resolveRowDimensionWidth(dim) + 'px';
113+
}
114+
}
103115
}
104116

105117
public getCellClass(col: any) {
@@ -122,7 +134,7 @@ export class IgxPivotRowComponent extends IgxRowDirective<IgxPivotGridComponent>
122134
{ aggregations: 'aggregations', records: 'records', children: 'children', level: 'level'});
123135
dimIndex += dimData.level;
124136
currentLvl += dimData.level;
125-
const column = this.extractFromDimension(dimData.dimension, dimIndex, currentLvl);
137+
const column = this.extractFromDimension(dimData.dimension, dimIndex, currentLvl, dim);
126138
this.rowDimensionData.push({
127139
column,
128140
dimension: dimData.dimension,
@@ -132,19 +144,20 @@ export class IgxPivotRowComponent extends IgxRowDirective<IgxPivotGridComponent>
132144
}
133145
}
134146

135-
protected extractFromDimension(dim: IPivotDimension, index: number = 0, lvl = 0) {
147+
protected extractFromDimension(dim: IPivotDimension, index: number = 0, lvl = 0, rootDim: IPivotDimension) {
136148
const field = dim.memberName;
137149
const header = this.rowData[field];
138-
const col = this._createColComponent(field, header, index, dim, lvl);
150+
const col = this._createColComponent(field, header, index, dim, lvl, rootDim);
139151
return col;
140152
}
141153

142-
protected _createColComponent(field: string, header: string, index: number = 0, dim: IPivotDimension, lvl = 0) {
154+
protected _createColComponent(field: string, header: string, index: number = 0,
155+
dim: IPivotDimension, lvl = 0, rootDim: IPivotDimension) {
143156
const factoryColumn = this.resolver.resolveComponentFactory(IgxColumnComponent);
144157
const ref = this.viewRef.createComponent(factoryColumn, null, this.viewRef.injector);
145158
ref.instance.field = field;
146159
ref.instance.header = header;
147-
ref.instance.width = MINIMUM_COLUMN_WIDTH + 'px';
160+
ref.instance.width = this.grid.resolveRowDimensionWidth(rootDim) + 'px';
148161
(ref as any).instance._vIndex = this.grid.columns.length + index + this.index * this.grid.pivotConfiguration.rows.length;
149162
if (dim.childLevel && lvl >= PivotUtil.getTotalLvl(this.rowData)) {
150163
ref.instance.headerTemplate = this.headerTemplate;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@ export class PivotUtil {
156156
const value = this.extractValueFromDimension(col, recData);
157157
path.push(value);
158158
const newValue = path.join('-');
159-
lvlCollection.push({ value: newValue });
159+
lvlCollection.push({ value: newValue, dimension: col });
160160
lvlCollection[0].expandable = col.expandable;
161161
if (!lvlCollection[0].children) {
162162
lvlCollection[0].children = [];

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,8 @@ export class PivotGridSampleComponent {
2626

2727
{
2828
memberName: 'Country',
29-
enabled: true
29+
enabled: true,
30+
width: '20%'
3031
}
3132
]
3233
,
@@ -35,6 +36,7 @@ export class PivotGridSampleComponent {
3536
{
3637
memberFunction: () => 'All',
3738
memberName: 'AllProducts',
39+
width: '20%',
3840
enabled: true,
3941
childLevel:
4042
{
@@ -46,6 +48,11 @@ export class PivotGridSampleComponent {
4648
enabled: true
4749
},
4850
}
51+
},
52+
{
53+
enabled: true,
54+
memberName: 'SellerName',
55+
width: '200px'
4956
}
5057

5158
],

0 commit comments

Comments
 (0)