EJ2 Pivot Table - Floating Point math issue in grand totals

[Mark]

As the subject states, we recently had issues where the grand total was summing .1 and .2 which caused the grand total to become over 10 characters in length and be truncated.  Can decimal.js be implemented or how do prevent the JS issue in those columns totals?

[Mouli Eswararao]

 

Hi Mark, 

 

Greetings from Syncfusion support. 

 

We can set decimal points to a value by using number formatting feature. We can set number decimal values to be displayed for the value field in formatSettings by setting format. We have prepared a sample for please find it for your reference.  

 

Sample: https://stackblitz.com/edit/3yjatc  

 

Code: 

dataSourceSettings: { 

    enableSorting: true, 

    columns: [{ name: 'Year' }, { name: 'Quarter' }], 

    values: [ 

      { name: 'Sold', caption: 'Units Sold' }, 

      { name: 'Amount', caption: 'Sold Amount', type: 'Avg' } 

    ], 

    dataSource: getPivotData(), 

    rows: [{ name: 'Country' }, { name: 'Products' }], 

// set format here 

    formatSettings: [{ name: 'Amount', format: 'N2' }], 

    expandAll: false, 

    filters: [] 

  }, 

 

Please let us know if you have any other queries, we are happy to assist you. 

 

Regards,
Mouli 

 

[Mark]

So this worked, but is there a way to do conditional formatting based on the column data?  Specifically, I have some that should be integers, some are currency, some are float.  I just have the following (Type will return with:  Payments, Quantity, Percentage):

columns: [{ name: 'pivot_type', caption: 'Type' }],

                    rows: [{ name: 'pivot_location', caption: 'Location' }],

                    values: [{ name: 'pivot_total', caption: 'Total' }],

[Manikandan Murugesan]

  

Hi Mark, 

Kindly refer to the following code example to format the value fields. 

Code Example: 

this.dataSourceSettings = { 

    dataSource: Pivot_Data, 

    expandAll: false, 

    enableSorting: true, 

    formatSettings: [{ name: 'Amount', format: 'C0' }, { name: 'In_Stock', format: 'P0' }, 

    { name: 'Sold', format: 'N0' }], 

    columns: [{ name: 'Year' }, { name: 'Order_Source', caption: 'Order Source' }], 

    rows: [{ name: 'Country' }, { name: 'Products' }], 

    values: [{ name: 'In_Stock', caption: 'In Stock' }, 

    { name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }] 

}; 

Sample: https://stackblitz.com/edit/angular-grdtyr?file=app.component.ts 

Document: https://ej2.syncfusion.com/angular/documentation/pivotview/number-formatting/ 

Please let us know if you have any other queries. 

Regards, 

Manikandan 

[Mark]

Thank you for the response, what I meant was if "In_Stock" === "Yes" then "Amount" === "C2" else "N0" or something like that.  Is that possible?

[Manikandan Murugesan]

Hi Mark, 

 

Using the “aggregateCellInfo” event, we can dynamically apply number formatting to each value in the pivot table. Setting the number format to each value based on the condition to “this.pivotObj.engineModule.formatFields” in the “aggregateCellInfo” event will achieve your requirement. Moreover, we have modified the sample with the given code example for your reference below. 

 

Sample: https://stackblitz.com/edit/angular-odvymq?file=app.component.ts 

 

Code Example: 

 

aggregateCellInfo(args) { 

    if (args.fieldName === "Amount" && this.pivotObj.engineModule.formatFields[args.fieldName]) { 

        delete this.pivotObj.engineModule.formatFields[args.fieldName]; 

        this.pivotObj.engineModule.formatFields[args.fieldName] = { name: args.fieldName, format: (args.value > 999999 ? 'C2' : 'N0') };  

    } 

} 

 

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings width='100%' height='290' 

        [gridSettings]='gridSettings' (aggregateCellInfo)="aggregateCellInfo($event)"> 

</ejs-pivotview> 

 

 

Please let us know if you have any other queries. 

 

Regards, 

Manikandan