Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
135
Dynamically add data to igx-pivot-grid
posted

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]
        });
      });
  }

and then in the old way it was brought together like so for area type column:

   <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>


Which worked well. What I am not sure is how to do something similar with pivot grid, the html for it is set up like so:

  <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>


and then in the config I'm doing:


  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}
      ]
    };
  }


now for this bit:

        ...this.areaTypeList.map(areaType => ({
          memberName: areaType.name,
          displayName: areaType.name,
          enabled: true
        })),

I'm getting all the area types but obviously when I click the filter icon I don't see the list of areas associated with it. How can I go about this to make sure it works as intended? 
Parents
No Data
Reply
  • 740
    Offline posted

    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

Children