"custom" total with new row

[JORGE V]

Hi,

  I would like to add another row under of total (with a fixed value not calculated, it's a value "reference" for the user).

  Example

                Total     10 15 20 25 ...

          new row => 5   5    5   5 ...

   Is there any way to do this ?.

 Thanks in advance !.

 Jorge

[Manikandan Murugesan]

Hi Jorge, 

Kindly add custom row by customizing pivot values in the “enginePopulated” event. Please refer to the following code example. 

Code Example: 

export class Default extends SampleBase { 

  enginePopulated(args) { 

    var newRow = []; 

    var rowIndex = this.pivotObj.engineModule.valueContent.length; 

    var length = this.pivotObj.engineModule.pivotValues[ 

      this.pivotObj.engineModule.pivotValues.length - 1 

    ].length; 

    var gTotal = this.pivotObj.engineModule.pivotValues[ 

      this.pivotObj.engineModule.pivotValues.length - 1 

    ]; 

    for (var i = 0; i < length; i++) { 

      if (i !== 0) { 

        newRow.push({ 

          axis: 'value', 

          value: 5, 

          actualValue: 5, 

          formattedText: '5', 

          isGrandSum: true, 

          isSum: true, 

          showSubTotals: true, 

          colIndex: i, 

          rowIndex: rowIndex, 

          rowHeaders: '', 

          actualText: gTotal[i].actualText, 

          columnHeaders: gTotal[i].columnHeaders 

        }); 

      } else { 

        newRow.push({ 

          axis: 'row', 

          formattedText: 'New Row', 

          colIndex: i, 

          rowIndex: rowIndex, 

          isDrilled: false, 

          level: 0, 

          hasChild: false, 

          valueSort: { 

            'New Row': 1, 

            levelName: 'New Row' 

          } 

        }); 

      } 

    } 

    this.pivotObj.engineModule.valueContent.push(newRow); 

    this.pivotObj.engineModule.pivotValues.push(newRow); 

  } 

  render() { 

    return ( 

      <div className="control-pane"> 

        <div className="control-section" style={{ overflow: 'auto' }}> 

          <PivotViewComponent 

            id="PivotView" 

            ref={d => (this.pivotObj = d)} 

            dataSourceSettings={dataSourceSettings} 

            width={'100%'} 

            height={'290'} 

            showFieldList={true} 

            gridSettings={{ columnWidth: 140 }} 

            enginePopulated={this.enginePopulated.bind(this)} 

          > 

            <Inject services={[CalculatedField, FieldList]} /> 

          </PivotViewComponent> 

        </div> 

      </div> 

    ); 

  } 

} 

Meanwhile, we have prepared a sample for your reference. Please find it from below link. 

 

Sample: https://stackblitz.com/edit/react-vpmsme 

 

Please let us know if you have any concerns. 

Regards, 

Manikandan 

[JORGE V]

Hi,

I added the new row in the method enginePopulated as the example.

It works !.

Thank you.

Jorge

[Manikandan Murugesan]

Hi Jorge,  

   

Please let us know if you have any other queries. We are always happy to assist you.  

   

Regards,  

Manikandan