Hello radzen team,
i have a question...
i have 2 input fields (Nummer and Nummerteil2) on a form. these two fields should be concatenated in a 3 read only field (NummerTeil1und2) while typing.
i try this with the change event on the form but i cant get it to work.
like this:
Is this the way to do it? What i am doing wrong?
Regards
Thomas
It doesn't work because Radzen hasn't generated a "Number" of NummerTeil1und2 properties. I think you can still achieve this by following these steps:
${{}}. It will represent the data of the form.
this.artikel = { ...this.artikel, Nummer: event.value, NummerTeil1und2: event.value + ' ' + this.artikel.Nummerteil2 }
This code creates a new object with the current value of the artikel property and sets its Nummer and NummerTeil1und2. Set Condition to ${event.property} == 'Nummer' so the code executes when the user changes the Nummer property.
this.artikel = { ...this.artikel, Nummerteil2: event.value, NummerTeil1und2: this.artikel.Nummer + ' ' + event.value }
Set Condition to ${event.property} == 'Nummerteil2' so the code executes when the user changes the Nummerteil2 property.
I think I know what’s wrong. You have to use the property instead of the label in the Condition:
${event.property} == 'Nummerteil2' instead of ${event.property} == 'Nummer Teil 2'
Hi Atanas,
that doesnt seem to work either because the event.property is always the label “Nummer Teil 2”.
Video
we have thought about it… perhaps we delete nummerteil1und2 from the page and set the value from nummer + “.” + nummerteil2 before insert on the server side.
how can we concatenate the 2 fields into nummerteil1und2 on the server side before inserting? i have read about it but i cant find out where is the right place to do that.
Regards
Thomas
That would be the Submit event of the form. You should change the value of the parameter from ${event} to
{ ...event, NummerTeil1und2: event.Nummer + '.' + event.Nummerteil2}
By the way how is the Nummerteil2 column actually called? What do you see in the Property dropdown? I am asking because you shouldn’t be getting. Is there a chance to send us the meta directory of your application to info@radzen.com so we can investigate?
Hi Thomas,
I think localizing the Property is the cause of the issues. Consider this xml:
<context-group purpose="location"><context context-type="sourcefile">app/edit-artikel/edit-artikel.component.ts</context><context context-type="linenumber">10</context></context-group><context-group purpose="location"><context context-type="sourcefile">app/artikels/artikels.component.ts</context><context context-type="linenumber">8</context></context-group></trans-unit>
<trans-unit id="9be0f24d880c48960d3da3ba915b3d0b166000d9" datatype="html">
<source>NummerTeil2</source>
<target state="translated">Nummer Teil 2</target>
It localizes the NummerTeil2 value which however specifies the property of the data item to which the form field is bound to. You don’t need to localize it since it isn’t displayed to the end user. Changing it to that should work:
<context-group purpose="location"><context context-type="sourcefile">app/edit-artikel/edit-artikel.component.ts</context><context context-type="linenumber">10</context></context-group><context-group purpose="location"><context context-type="sourcefile">app/artikels/artikels.component.ts</context><context context-type="linenumber">8</context></context-group></trans-unit>
<trans-unit id="9be0f24d880c48960d3da3ba915b3d0b166000d9" datatype="html">
<source>NummerTeil2</source>
<target state="translated">NummerTeil2</target>
Hello Atanas,
for my understanding…
Why does value fields are in the i18n file? I think noone will translate value fields. only static text like labels, ect.
When i translated a few entries in the i18n de-de file i thought this are all labels.
These are the xml tags in de-de.xlf:
<trans-unit id="6985e575bb44d77d05e0cdfcd594c397eae26df8" datatype="html">
<source>NummerTeil1und2</source>
<context-group purpose="location">
<context context-type="sourcefile">app/add-artikel/add-artikel.component.ts</context>
<context context-type="linenumber">8</context>
</context-group>
<context-group purpose="location">
<context context-type="sourcefile">app/edit-artikel/edit-artikel.component.ts</context>
<context context-type="linenumber">8</context>
</context-group>
<context-group purpose="location">
<context context-type="sourcefile">app/artikels/artikels.component.ts</context>
<context context-type="linenumber">20</context>
</context-group>
<target state="final">NummerTeil1und2</target></trans-unit>
<trans-unit id="a7e6bbb31869f6c9527e8e37145085a20fcaa12a" datatype="html">
<source>Nummer Teil 1 Und 2</source>
<context-group purpose="location">
<context context-type="sourcefile">app/add-artikel/add-artikel.component.ts</context>
<context context-type="linenumber">8</context>
</context-group>
<context-group purpose="location">
<context context-type="sourcefile">app/edit-artikel/edit-artikel.component.ts</context>
<context context-type="linenumber">8</context>
</context-group>
<context-group purpose="location">
<context context-type="sourcefile">app/artikels/artikels.component.ts</context>
<context context-type="linenumber">20</context>
</context-group>
<target state="final">Nummer Teil 1 Und 2</target></trans-unit>
How do i know which one a should translate? I never want to translate value fields/textes. only static text.
Regards
Thomas
Unfortunately at the moment all properties go in the localization file. We will find a way to blacklist some of them. This becomes an issue indeed when two properties have the same value e.g. Property and Title of a form field.
Hi Artanas,
yes. i had a look at i18n in the html file and i think the problem ist that the i18n flag is on the property tags. it should be only on the title tags.
By the way, i read that i18n can do formatting also. i had testetd a percent field in the designer with pipe “| precent 2.2-2” and it works fine.
Can this also be done via the translation file de-de.xlf?
Regards
Thomas
Do you mean to specify different pipe in the localization file? We haven’t tried that frankly. Some of the built-in pipes (e.g. for number formatting) are culture aware and should be localized out of the box.
I have read this article and asked me if it was possible to format values (percent, currency) in the xlf files.
Although i think that the best way would be to set the format by a drop down box in designer.
So i have a feature request 
Is it possible to add a dropdown in the properties in designer to format values?
percent, currency, date & time formats…
Regards
Thomas
Hi Thomas,
This is in our TODO list under the “Data-binding editor” umbrella from the roadmap. You are right that ideally the user should be able to visually format dates and numbers from a predefined list and use Angular pipes as a last resort.
Best,
Atanas
with release 1.32.5 the “Exclude data-related component properties from localization.” Fix works fine!
Great work!
Thank you
Thomas
Hi Thomas,
The value should be ${{}}. The $ should always be first.
Hi Atanas,
so i have set up all fine (i think)...
set the property
Set data to the property
Change event...
event handling...
my code for filling the third field from the other two fields...
but this happens...
video
i only can type once. the focus on the field is lost after every keypress and the other input field is cleared.
Strange behaviour...
Can you help me with this?
Kind Regards
Thomas
Hi Thomas,
Try the approach from this thread. The one from this thread will indeed blur the field after typing because the form will recreate itself. The new one should behave as expected (check the sample application attached there).
Best regards,
Atanas
