Data precision

Radzen Studio Angular
1

I have a field that I would like to always display at least two decimals points. Is there a way to do this?

2

You can use the Angular number pipe to do that. For example if you want to format a number column in a DataGrid set the column Template property to ${data.PropertyName | number:'1.2'}:

3

My apologies. I needed this for Form Fields for when a user enters data to submit. If they enter 1 or 1.5, it will automatically transform to 1.00 or 1.50. If they enter 1.12345 it will stay as 1.12345.

Is there a way to do this using Radzen? Is there custom code that I will need to implement?

4

At the moment the user will see what they type in a textbox. No way to format the value as they type.

5

I have the same problem, limit decimals in an input form, but it is enough for me that the rounding happens when the input box goes out of focus. How can I do it?

6

You can use the Change event of the form and update the decimal values as you see fit. Check this forum thread for examples that show how to update the form values.

7

I have seen the example but my problem is that I have a template form with more than 20 fields where I need to round the value.
How can I avoid to go in each field to add the rounding method?

8

At the moment this is the only suggestion that we can give. By the way do you have the exact same requirements - change 1 to 1.00 and 1.5 to 1.50? The numeric conversion will still occur and the application will submit 1.5 to the server instead of 1.50. JavaScript doesn't keep a number precision.

9

The exact requirement is that 1.1234 is rounded to 1.12 and 1.1251 is rounded to 1.13

10

And it is a very common requirements, ALL business applications that manage euro must follow it.

11

Oh, this is then a different requirement than the one this thread was about.

If they enter 1 or 1.5, it will automatically transform to 1.00 or 1.50. If they enter 1.12345 it will stay as 1.12345.

vs

The exact requirement is that 1.1234 is rounded to 1.12 and 1.1251 is rounded to 1.13

How do you expect to set the precision only once per form? If you have 20 numeric that have a precision property you will still have to set it 20 times.

12

I probably mixed threads sorry.
I explain better: I suppose I have a "round()" javascript/typescript function to call, like this.widgetName=round(${event.something})
I hope that I can copy paste this line on all widgets to speed up work and keep the rounding function in a common typescript file.
BTW: I will open another thread with a feature suggestion: in a competitor you can select multiple widgets and then modify a property and then get it applied to all widgets selected.

13

this.widgetName=round(${event.something})

How would you invoke this 20 times? We can easily tell you how to add a round function to a component but you still have to invoke it 20 times. A possible solution is to traverse all numeric properties and round them before invoking the createXXX method or updateXXX - this will prevent converting 20 times and the database will see the rounded values. Will that work?

By the way can this be solved at database level? At least MSSQL server seems to allow setting the precision. Then the rounding happens automatically in the database.

14

Thanks for precious hints. Probably a feedback on field exit will be better, but also in this case I can call a function to traverse all fields each time you modify a single field.

15

To convert your numeric values to 2 point decimal precision you can use the following approach:

  1. Create a page property called roundNumbers
  2. Set the Value to the following code
    (value) => {
  Object.keys(value).forEach(key => {
   if (typeof value[key] == 'number') {
     value[key] = parseFloat(value[key].toFixed(2));
   }
 });

 return value;
}
    This creates a lambda property (the same as a function) which
  3. Execute the function before using the form value. For example when you invoke createXXX set the argument to ${this.roundNumber(event)} instead of ${event}

I am attaching a simple app that logs the rounded result when you submit the form: rounding.zip

1 Like
16

Thank you very very much, I think this example will be useful for many people!
Thanks,
Mario