Custom number separators (thousand and decimal)

[Spyros]

Hello,

Is there a way to set custom thousand and decimal separators in numeric columns in Grid without changing Locale altogether?

I know that you can set Locale in grid attributes and separators will be set according to that, but I want to have custom separators, every user of my application has set his own preference on separators which is not dependent on culture. So for users that have the same culture, some have set comma separator and others dot separator for decimals and so on for thousand separator.

When those users load a page that has a Grid with numeric data in it, I want the data to be shown according to their preferred separator.

Is there a way to use the column format or something similar to achieve that?

Thank you.

Best regards

[Rajapandiyan Settu]

Hi Spyros,   

  

Thanks for contacting Syncfusion support.  

  

Based on your query, you want to apply a different format on the number value without changing the locale of the Grid component. You can achieve your requirement by using valueAccessor property of Grid Column.  

  

By using valueAccessor, you can customize the values as you want and the returned data will be shown in Grid. Please refer to the below code example and sample for more information.  

  

valueAccessor: https://ej2.syncfusion.com/react/documentation/grid/columns/#valueaccessor  

  

  

[index.js]  

  

  

export class Default extends SampleBase {  

  valueAccess(field, data, column) {  

    var value = data[column.field]; // get the value of column  

    if (data['OrderID'] % 2 == 0) { // use the condition as you want  

      // format the number with decimal separator as dot  

      return new Intl.NumberFormat('en-US', { minimumFractionDigits: 2 }).format(value);  

    } else {  

      // format the number with decimal separator as comma  

      return new Intl.NumberFormat('de-DE', { minimumFractionDigits: 2 }).format(value);  

    }  

  }  

  render() {  

    return (  

      <GridComponent dataSource={orderDetails} height="350">  

        <ColumnsDirective>  

          <ColumnDirective field="OrderID" headerText="Order ID" width="120" />  

          <ColumnDirective  

            field="Freight"  

            headerText="Freight"  

            width="120"  

            valueAccessor={this.valueAccess.bind(this)}  

          />  

        </ColumnsDirective>  

      </GridComponent>  

    );  

  }  

}  

  

  

   

Sample: https://stackblitz.com/edit/react-xlnupt?file=index.js  

  

Note:  

By using valueAccessor, you can return the customized data as you want. But, this customized data used only for the display purpose. All the Grid’s data operations like Sorting, Filtering, Searching, etc., are performed based on the value in the Grid’s dataSource. This is the behavior of Grid.  

  

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

  

Regards,  

Rajapandiyan S  

[Spyros]

Dear Rajapandiyan S,

Thank you for your reply, I was not aware about the valueAccessor property!

From what I see in the provided example, you are again using locale (en-US, de-DE) in there. It gets the job done, although I was wondering if there is any way to do that without tying locale. What I have from users is just the dot, comma symbol, so with your solution I need to make a function that ties all possible separator symbols to the respective locale that uses them. The ideal solution was to use the symbol itself somehow into valueAccessor property. With that I mean just the "," or "." or " " etc. Is that possible?

Looking forward to your reply,

Best regards!

[Rajapandiyan Settu]

Hi Spyros,    

 

Thanks for your update. 

 

Query: I was wondering if there is any way to do that without tying locale. What I have from users is just the dot, comma symbol, so with your solution I need to make a function that ties all possible separator symbols to the respective locale that uses them. 

 

We have validated your requirement at our end. You can achieve this by using the following code example in the valueAccessor method. 

 

 

[index.js] 

 

 

  valueAccess(field, data, column) { 

    var value = data[column.field]; 

    if (data['OrderID'] % 2 == 0) { 

      var parts = value.toString().split('.'); 

      parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ','); 

      return parts.join('.'); 

    } else { 

      var parts = value.toString().split('.'); 

      parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, '.'); 

      return parts.join(','); 

    } 

  } 

 

 

 

Sample: https://stackblitz.com/edit/react-xlnupt-qfevxy?file=index.js 

 

Find the below online documentation for your reference, 

https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript 

 

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

   

Regards,   

Rajapandiyan S   

[Spyros]

Dear Rajapandiyan S,

Thank you for the provided solution and example code, it works great!

Have a great day!

Best regards,

Spyros

[Rajapandiyan Settu]

Hi Spyros,  

  

You’re welcome. We are glad that the provided solution resolved your requirement. 

 

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

Regards, 

Rajapandiyan S