We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Column setting for rounding number in 2 decimal points.

Hi All,

I want to add a column setting for rounding number in 2 decimal points. How we can handle in a proper way? I tried to code as below,

field: 'gas', editType: 'numericedit', editParamsdecimalPlaces: 2 }, format: "{0:n2}", validationRulesrequired: true, min: 10, max: 10000 }, width: 80 },

OR 

field: 'gas', edit: params: {decimals: 2, format: 'N' } },

Those codes didn't work for me.


Note: I'm using Batch Edit mode, Column settings are loaded from [columns] property (Not in the html)

Thank you.


5 Replies

Hariharan J V May 8, 2019 12:34 PM UTC

Hi Neo,

Greeting from Syncfusion.

We have prepared a simple to achieve your requirement("set decimal places to numeric texbox in grid batch edit") and please refer the below code snippets and sample.

[app.component.html]
<e-column field='Freight' headerText='Freight' [edit]='numEditParams' width='120' format='C3' textAlign='Right' editType='numericedit' [validationRules]='freightrules'></e-column>
[app.component.ts]
this.numEditParams = { params: {decimals: 3, format: 'n'}};

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

Regards,
Hariharan

SR Neo replied to Hariharan J V May 9, 2019 10:52 AM UTC

Hi Neo,

Greeting from Syncfusion.

We have prepared a simple to achieve your requirement("set decimal places to numeric texbox in grid batch edit") and please refer the below code snippets and sample.

[app.component.html]
<e-column field='Freight' headerText='Freight' [edit]='numEditParams' width='120' format='C3' textAlign='Right' editType='numericedit' [validationRules]='freightrules'></e-column>
[app.component.ts]
this.numEditParams = { params: {decimals: 3, format: 'n'}};

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

Regards,
Hariharan


Hi Hariharan,
My requirement was achieved. I have other queries to ask,

1. How to hide up & down arrows when use of 'numericedit' type.
2. Display always 2 decimal points without thousand separates. (Roundingwith 2 decimal points , Type: numbereditType:'stringedit')
3.Display always 2 decimal points without thousand separates.(Roundingwith 2 decimal points,Type: stringeditType:'stringedit', Some time data load as text. This formatting should happen if found numeric value)

Thank you.


Hariharan J V May 15, 2019 08:51 AM UTC

Hi Neo,

We are sorry for the delay.

Query 1:

We suggest you to use `showSpinButton` property to achieve your requirement. Please refer the below code snippets.

this.numEditParams ={ params:{decimals:3, format:'n', showSpinButton: false}};

Query 2 & 3:

We suggest you to use grid cell edit template feature to acheive your requirement. Please refer the below sample and documentation link.

Sample: https://stackblitz.com/edit/angular-yjegvk-oyq4xj?file=app.component.ts
Documentation: https://ej2.syncfusion.com/angular/documentation/grid/edit/?no-cache=1#cell-edit-template

Regards,
Hariharan

SR Neo July 17, 2019 08:50 AM UTC

Hi,

My requirement has been achieved. Thank you for the support.

Hariharan J V July 18, 2019 09:32 AM UTC

Hi Neo,

Thanks for your update.

We are happy to hear that your requirement has been achieved.

Regards,
Hariharan
Loader.
Live Chat Icon For mobile
Up arrow icon