I am moving away from using an igx-grid to an igx-pivot-grid. The data is linked together like so:
export class BillsOfQuantitiesGridRow{ public id: string; public drawingNumber: string; public drawingSheet: string; public drawingRevision: string; public discipline: string; public schedule: string; public r6Item: string; public r7Item: string; public unitSymbol: string; public material: string; public quantity: number; public labourCost: number; public materialCost: number; public totalCost: number; public manhours: number; public factoredManhours: number; public CCR: number; constructor(boqItem: BOQItem, dmbList: DrawingMeasurementBatch[], areaList: Area[], areaTypeList: AreaType[]){ this.id = boqItem.id; const dmb = dmbList.find(dmb => dmb.id === boqItem.drawingMeasurementBatchId); this.drawingNumber = boqItem.drawingNumber; this.drawingSheet = boqItem.drawingSheet; this.drawingRevision = boqItem.drawingRevision; this.discipline = boqItem.disciplineDisplay; this.schedule = boqItem.scheduleDisplay; this.r6Item = boqItem.r6ItemDisplay; this.r7Item = boqItem.r7ItemDisplay; this.unitSymbol = boqItem.unitSymbol; this.material = boqItem.materialDisplay; this.quantity = boqItem.quantity; this.labourCost = boqItem.labourCost; this.materialCost = boqItem.materialCost; this.totalCost = boqItem.totalCost; this.manhours = boqItem.manhours; this.factoredManhours = boqItem.factoredManhours; this.CCR = boqItem.ccr; const areas = areaList.filter(area => dmb.areaIds.includes(area.id)); areaTypeList.forEach((areaType) => { Object.defineProperty(this, areaType.name, { value: areas.filter(a => a.areaTypeId == areaType.id)[0] }); }); }
<igx-column *ngFor="let areaType of areaTypeList" header="{{ areaType.name }}" field="{{ areaType.name }}" width="10%" [resizable]="true" [editable]="false" [sortable]="true" [groupable]="true" [filterable]="true"> <ng-template igxCell let-cell="cell"> <span *ngIf="cell.value?.code">{{ cell.value?.code }} - {{ cell.value?.description }}</span> </ng-template> </igx-column>
<div class="pivot-container"> <igx-pivot-grid #boqPivotGrid [data]="boqGridRows" [pivotConfiguration]="pivotConfig" height="100%" width="100%" [superCompactMode]="true" [defaultExpandState]='true' > </igx-pivot-grid> <igx-pivot-data-selector [grid]="boqPivotGrid"></igx-pivot-data-selector> </div>
private configurePivotGrid() { this.pivotConfig = { pivotKeys: { aggregations: 'aggregations', records: 'records', children: 'children', level: 'level', columnDimensionSeparator: '*', rowDimensionSeparator: '*', }, columns: [ ], rows: [ { memberName: 'discipline', displayName: 'Discipline', enabled: false}, { memberName: 'schedule', displayName: 'Schedule', enabled: false} ], values: [ { member: 'quantity', displayName: 'Quantity', aggregate: { aggregator: IgxPivotNumericAggregate.sum, key: 'sum', label: 'Sum' }, enabled: true }, { member: 'labourCost', displayName: 'Labour Cost', aggregate: { aggregator: IgxPivotNumericAggregate.sum, key: 'sum', label: 'Sum' }, enabled: true }, { member: 'materialCost', displayName: 'Material Cost', aggregate: { aggregator: IgxPivotNumericAggregate.sum, key: 'sum', label: 'Sum' }, enabled: true }, { member: 'totalCost', displayName: 'Total Cost', aggregate: { aggregator: IgxPivotNumericAggregate.sum, key: 'sum', label: 'Sum' }, enabled: true }, { member: 'manhours', displayName: 'Manhours', aggregate: { aggregator: IgxPivotNumericAggregate.sum, key: 'sum', label: 'Sum' }, enabled: true }, { member: 'factoredManhours', displayName: 'Factored Manhours', aggregate: { aggregator: IgxPivotNumericAggregate.sum, key: 'sum', label: 'Sum' }, enabled: true, }, { member: 'ccr', displayName: 'CCR', aggregate: { aggregator: IgxPivotNumericAggregate.sum, key: 'sum', label: 'Sum' }, enabled: true, } ], filters: [ { memberName: 'drawingNumber', displayName: 'Drawing Number', enabled: true, }, ...this.areaTypeList.map(areaType => ({ memberName: areaType.name, displayName: areaType.name, enabled: true })), { memberName: 'drawingSheet', displayName: 'Drawing Sheet', enabled: false}, { memberName: 'drawingRevision', displayName: 'Drawing Revision', enabled: false}, { memberName: 'r6Item', displayName: 'R6 Item', enabled: false}, { memberName: 'r7Item', displayName: 'R7 Item', enabled: false}, { memberName: 'material', displayName: 'Material', enabled: false}, { memberName: 'unitSymbol', displayName: 'Unit Symbol', enabled: false} ] }; }
Hello Lewis,
Thank you for posting in our community!
I have been looking into your question and what I understand is that the filters are displayed, however, when clicking on any of them, the dropdown list is not populated, i.e., it displays only (Blanks).
For example:
/community/resized-image/__size/640x480/__key/communityserver-discussions-components-files/1043/5050.pGrid2.png
But it should be similar to the following:
/community/resized-image/__size/640x480/__key/communityserver-discussions-components-files/1043/8664.pGrid1.png
Could you please confirm if my impression is correct?
If it is correct, what I can say, as mentioned in our documentation here, is that the filters that are defined via the filters configuration property are used for fields that you do not want to add as a dimension or a value but would like to filter their related member values via the UI.
For example, the “Drawing Number” filter is associated with the “drawingNumber” field from the provided data source structure, so its values are displayed successfully. If the “(Blanks)” item is displayed, this could mean that the defined filters point to a field that does not exist in the data source.
However, this is just a simple guess as I am not sure of the content of the “areaTypeList” property. Having this in mind, could you please provide the content of the “areaTypeList”? This would be extremely helpful in further investigating this matter and providing you with a solution as soon as possible.
Thank you for your cooperation. Looking forward to your reply.
Sincerely, Riva Ivanova Software Developer
Hi Riva,
the context of this is that each boq grid row will have a list of area types and each area type will have a list of areas associated with it. The way it works you can't just set a property for it like with discipline, drawing number etc. I did however figured out a way around this and updated my boqgridrow class to the following:
class AreaTypeValue { public areaType: string; public areaValue: string; constructor(areaType: string, areaValue: string) { this.areaType = areaType; this.areaValue = areaValue; } } export class BillsOfQuantitiesGridRow{ public id: string; public drawingNumber: string; public drawingSheet: string; public drawingRevision: string; public discipline: string; public schedule: string; public r6Item: string; public r7Item: string; public unitSymbol: string; public material: string; public quantity: number; public labourCost: number; public materialCost: number; public totalCost: number; public manhours: number; public areaTypeValues: AreaTypeValue[]; public factoredManhours: number; public CCR: number; constructor(boqItem: BOQItem, dmbList: DrawingMeasurementBatch[], areaList: Area[], areaTypeList: AreaType[]){ this.id = boqItem.id; const dmb = dmbList.find(dmb => dmb.id === boqItem.drawingMeasurementBatchId); this.drawingNumber = boqItem.drawingNumber; this.drawingSheet = boqItem.drawingSheet; this.drawingRevision = boqItem.drawingRevision; this.discipline = boqItem.disciplineDisplay; this.schedule = boqItem.scheduleDisplay; this.r6Item = boqItem.r6ItemDisplay; this.r7Item = boqItem.r7ItemDisplay; this.unitSymbol = boqItem.unitSymbol; this.material = boqItem.materialDisplay; this.quantity = boqItem.quantity; this.labourCost = boqItem.labourCost; this.materialCost = boqItem.materialCost; this.totalCost = boqItem.totalCost; this.manhours = boqItem.manhours; this.factoredManhours = boqItem.factoredManhours; this.CCR = boqItem.ccr; const areas = areaList.filter(area => dmb.areaIds.includes(area.id)); this.areaTypeValues = areaTypeList.map(areaType => { const area = areas.find(a => a.areaTypeId === areaType.id); return new AreaTypeValue(areaType.name, area ? `${area.code} - ${area.description}` : ''); }); } }
private configurePivotGrid() { const areaTypeDimensions = this.areaTypeList.map(areaType => ({ memberName: areaType.name, displayName: areaType.name, memberFunction: (record) => { const areaTypeValue = record.areaTypeValues.find(value => value.areaType === areaType.name); return areaTypeValue ? `${areaTypeValue.areaValue}` : ''; }, enabled: true })); this.pivotConfig = { pivotKeys: { aggregations: 'aggregations', records: 'records', children: 'children', level: 'level', columnDimensionSeparator: '*', rowDimensionSeparator: '*', }, columns: [ ], rows: [ { memberName: 'discipline', displayName: 'Discipline', enabled: false}, { memberName: 'schedule', displayName: 'Schedule', enabled: false} ], values: [ { member: 'quantity', displayName: 'Quantity', aggregate: { aggregator: IgxPivotNumericAggregate.sum, key: 'sum', label: 'Sum' }, enabled: true }, { member: 'labourCost', displayName: 'Labour Cost', aggregate: { aggregator: IgxPivotNumericAggregate.sum, key: 'sum', label: 'Sum' }, enabled: true }, { member: 'materialCost', displayName: 'Material Cost', aggregate: { aggregator: IgxPivotNumericAggregate.sum, key: 'sum', label: 'Sum' }, enabled: true }, { member: 'totalCost', displayName: 'Total Cost', aggregate: { aggregator: IgxPivotNumericAggregate.sum, key: 'sum', label: 'Sum' }, enabled: true }, { member: 'manhours', displayName: 'Manhours', aggregate: { aggregator: IgxPivotNumericAggregate.sum, key: 'sum', label: 'Sum' }, enabled: true }, { member: 'factoredManhours', displayName: 'Factored Manhours', aggregate: { aggregator: IgxPivotNumericAggregate.sum, key: 'sum', label: 'Sum' }, enabled: true, }, { member: 'ccr', displayName: 'CCR', aggregate: { aggregator: IgxPivotNumericAggregate.sum, key: 'sum', label: 'Sum' }, enabled: true, } ], filters: [ { memberName: 'drawingNumber', displayName: 'Drawing Number', enabled: false, }, ...areaTypeDimensions, { memberName: 'areaTypeValues', displayName: 'area Values', enabled: false}, { memberName: 'drawingSheet', displayName: 'Drawing Sheet', enabled: false}, { memberName: 'drawingRevision', displayName: 'Drawing Revision', enabled: false}, { memberName: 'r6Item', displayName: 'R6 Item', enabled: false}, { memberName: 'r7Item', displayName: 'R7 Item', enabled: false}, { memberName: 'material', displayName: 'Material', enabled: false}, { memberName: 'unitSymbol', displayName: 'Unit Symbol', enabled: false} ] }; }