How to display decimal in European format

[Duong]

Dear all,

I am using RadDataForm to display/add a cost of an item. I am using:

<TKPropertyEditor tkEntityPropertyEditor type="Decimal">

However it always displays the amount in US format (for instance, 13.49 in place of 13,48). When I try to modify this amount, it also display in  US format. How can I convert it to European format.

 

Thanks in advance!

 

 

 

 

<TKEntityProperty tkPropertyGroupProperties hidden="false" name="amount" displayName="Bedrag" index="3" readOnly="true">
<TKPropertyEditor tkEntityPropertyEditor type="Decimal">
<TKPropertyEditorStyle tkPropertyEditorStyle labelTextSize="15" labelPosition="Left" labelWidth="150">
</TKPropertyEditorStyle>
</TKPropertyEditor>
</TKEntityProperty>

[Nick Iliev]

Hi Duong Do,

Indeed the number input of the property editors is formatted in the US format by design.
There is no option to format the input as this is a known issue in the native Android EditText (which is part of the TextField used in the Property Editor).

A possible solution would be to access the native text filed (e.g., android.wdiget.EditText on Android) and apply this workaround.
Accessing the native control for each specific editor can be achieved with the editorUpdate event (example for using the callback here and the actual accessing of the native components can be found here)

Regards,
Nikolay Iliev
Progress Telerik

[Duong]

Hi Nikolay,

I got your idea and had invested several hours on the workaround, example of date. However, I'm still missing some information about TKDataFormDecimalEditor. How it works and which properties I can use.

Do you have any links/informations/documents about how to use TKDataFormDecimalEditor?

Thanks in advance,

Regards,

[Nick Iliev]

Duong,

Based on this example (this is the related HTML file - start the application and the real example is under DataForm >> Editors >> Common) I am going to show you how to access the native Android EditText and use its own methods to change the output.

Modifying the HTML so that the onEditorUpdate callback is introduced in RadDataForm

<RadDataForm [source]="ticketOrder" (editorUpdate)="onEditorUpdate($event)"  tkExampleTitle tkToggleNavButton>

Not in the component file create the onEditorUpdate as follows:

public onEditorUpdate(args) {

    console.log("onEditorUpdate");

 

    if (args.propertyName == "price") {

 

        let decimalEditor = args.editor; // com.telerik.widget.dataform.visualization.editors.DataFormDecimalEditor@c1eb5c1

 

        console.log(decimalEditor.getEditorView()) // android.support.v7.widget.AppCompatEditText

 

        // we will need tns-platform-declaraitons installed as devDependency to cast to android.widget.EditText
             // AppCompatEditText implements EditText so casting to it (as it is available in tns-platform-declarations)


        let androidEditText = <android.widget.EditText>decimalEditor.getEditorView() 



        console.log("androidEditText.getText(): " + androidEditText.getText()); // returns 9.5 .. perhaps with setText() we can implement our converter to Europian format

 

        androidEditText.setText("9,500"); // or setTextLocale or use converter or any other approriate solution

    }

}

Our decimal editor has EntityProperty with name "price"..
Once we editorUpdate event is triggered and we have our price entity we are looking for the decimal editor with args.editor.
In this case, the decimal editor will be of type com.telerik.widget.dataform.visualization.editors.DataFormDecimalEditor.
Now we can see that the documentation is listing a method called getEditorView which will return the native control of the text field.
The native control will be of type android.support.v7.widget.AppCompatEditText.
This class inherits all methods and properties of android.widget.EditText.
We can now work with the native methods like getText, setText, setTextLocale, etc.

Note: To have IntelliSense of the native classes, methods, and properties (e.g. of android.widget.EditText) you can install tns-platform-declarations.
Once the plugin is installed as developer dependency you can cast to native Android and iOS classes and receive full IntelliSense.

Regards,
Nikolay Iliev
Progress Telerik

[Duong]

Thanks a lot, Nikolay. It's absolutely clear and very helpful to know how it works.

Regards,