Column setting for rounding number in 2 decimal points.

Neo

Asked On May 3, 2019 12:24 PM UTC

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', editParams: { decimalPlaces: 2 }, format: "{0:n2}", validationRules: { required: 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.

Reply | Reply with quote

Hariharan J V [Syncfusion]

Replied On 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

Reply | Reply with quote

Neo

Replied On 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.

Reply | Reply with quote

Hariharan J V [Syncfusion]

Replied On 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

Reply | Reply with quote

Neo

Replied On July 17, 2019 08:50 AM UTC

Hi,

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

Reply | Reply with quote

Hariharan J V [Syncfusion]

Replied On 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

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
144383	May 3,2019 12:24 PM UTC	Jul 18,2019 09:32 AM UTC	Angular - EJ 2	5

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US