Number formatting - Change the number formatting

[Mehvish Fatma]

Hi,

I am using a grid and displaying a set of numeric values. However, when the numeric value goes beyond 21 digits, the number formatting seems to change and sets the values in the compact decimal format. For example,


I would like to change the formatting and display it in the form of => 1,000,000,000,000,000,000,000. Please let me know how I can achieve this.

Thanks a lot

[Rajapandiyan Settu]

Hi Mehvish, 

Thanks for contacting Syncfusion support. 

 

Query: ​ I am using a grid and displaying a set of numeric values. However, when the numeric value goes beyond 21 digits, the number formatting seems to change and sets the values in the compact decimal format.  

 

By default, if the number have more than 20 digits then it will be shown with scientific notation. Since this is the default behavior of Javascript. 

 

Screenshot: 

 

 

If you want to avoid this (scientific notation), you need to manually write own function to convert this number. Please refer common documentation link to achieve this. 

 

https://stackoverflow.com/questions/1685680/how-to-avoid-scientific-notation-for-large-numbers-in-javascript 

 

By following above documentation, we have achieved your requirement in the queryCellInfo event of Grid. Find the below code example and sample for more information. 

 

queryCellInfo: https://ej2.syncfusion.com/angular/documentation/api/grid/#querycellinfo 

 

[app.component.ts] 

export class AppComponent { 

  public data: Object[] = [ 

    { OrderID: 10248, Freight: 11 }, 

    { OrderID: 10249, Freight: 1000000000000000000000 }, 

    { OrderID: 10250, Freight: 144623000000000000000000 } 

  ]; 

 

  ngOnInit(): void {} 

  queryCellInfo(args) { 

    if (args.column.field == "Freight") { 

// customize the innertext of cell as you want 

      args.cell.innerText = "$" + this.toFixed(args.data[args.column.field]) + ".00"; 

    } 

  } 

// this method is used to avoid scientific notation and return the value as you want 

  toFixed(x) { 

    if (Math.abs(x) < 1.0) { 

      var e = parseInt(x.toString().split("e-")[1]); 

      if (e) { 

        x *= Math.pow(10, e - 1); 

        x = "0." + new Array(e).join("0") + x.toString().substring(2); 

      } 

    } else { 

      var e = parseInt(x.toString().split("+")[1]); 

      if (e > 20) { 

        e -= 20; 

        x /= Math.pow(10, e); 

        x += new Array(e + 1).join("0"); 

      } 

    } 

    return x; 

  } 

} 

 

 

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

 

Please get back to us if you  need further assistance with this. 

 

Regards, 

Rajapandiyan S 

[Mehvish Fatma]

Hi Rajapandiyan,

Thank you for the example. I just wanted to check how this can be merged with syncfusion's formatting for numbers. As stated in the code, I would like to omit adding '.00' at the end of the number and would like to add syncfusion's formatting ('N2', etc.).

I noticed that in the stackblitz example, when the '.00' is removed, the syncfusion's formatting is not getting applied even though it exists in the grid. 

Can you please let me know how I can achieve this?

[Rajapandiyan Settu]

Hi Mehvish, 

  

Thanks for your update. 

  

By default, if the number have more than 20 digits then it will be shown with scientific notation. But in your requirement, you want to show all the numbers instead of scientific notation. The only way to achieve your requirement is to convert the scientific notation value in string format. This can be provided in the last update. 

  

Basically, the number formatting is applied only to the number type values and it cannot applied on string type value. So, you need to manually apply the formatting on this customized string value. Since it is not feasible at our end. 

  

Please get back to us if you need further assistance with this. 

  

Regards, 

Rajapandiyan S