Are these achievable?

A few questions before I commit into Radzen
Be it achievable in Radzen or out of radzen

  1. How to replicate fields in a form? I would like a 2nd field to replicate the first. I.e Mother name and billing name would replicate Mother name unless different then user change to a different name

  2. Calculation of 2 field. I.e field A is number of student and field b is ratio which has a formula of total student/number of student from field A

  3. In a form with 2 column and 5rows but in row 4th there are only 1 field, how to make a black column then a field on the right side

Hi @kegler,

About 1 and 2 - do you want those fields to be editable? I guess Billing name is editable but what about the Ratio field? Also should the Ratio update visually as the user changes the Number of students? I believe those are possible by handling the form Change event and updating its Data. I can prepare a demo once you answer those two questions.

About 3 - do you want to display only one field in the 4th row and two fields on the 5th? If yes - this isn’t currently possible as the Radzen form distributes the form fields uniformly in rows and columns - gaps aren’t supported.

Hi Korchev

Fields has to editable and fields update visually as updated

Add on another question, could i have running number for student ID ?

Thanks

If you want the fields to be editable and update as the user types you should handle the Change event of the form and Execute the following Code:

this.form0.form.patchValue({BillingName: ${event.value}})

and with the following Condition:

${event.property} == 'Name'

form0 - the Name property of your form component.
BillingName - the Property which should be updated (the calculated one)
Name - the Property whose value is used to update the calculated one.

For the ratio it should be something similar:

Code: this.form0.form.patchValue({Ratio: 2 * ${event.value}})
Condition: ${event.property} == 'NumberOfStudent'

I am attaching a sample page. You can unzip it somewhere and import it in Radzen using the Import button from the 'My Applications' screen.
calculated-fields.zip (5.5 KB)

By the way what do you mean by 'could i have running number for student ID'? If you want to use autoincrement ID - yes you can. All you have to do is configure that in your database.

Hi Atanas,
this doesnt work for two fields concatinating in one target field. (s. this topic). I think the problem is that the NummerTeil2 value is not present when Nummer is typed and vice versa. Should i do something with the artikeldata object?!

Kind Regards
Thomas

In this case you should combine both implementations. Instead of setting the form data and using the … operator use this.form0.form.patchValue( { PropertyName: TargetValue } );

OLD:

this.artikel = { ...this.artikel, Nummer: event.value, NummerTeil1und2: event.value + ' ' + this.artikel.Nummerteil2 }

NEW:

this.form0.form.patchValue({ NummerTeil1und2: event.value + ' ' + this.artikel.Nummerteil2 })

Yes. I have done so.

formChange(event: any)
{
if (event.property == “Nummer”) {
this.form0.form.patchValue({NummerTeil1und2: erzeugeArtikelNummerTeil1und2((event.value || “”), (this.artikeldata.NummerTeil2 || “”))})
}
else if (event.property == “NummerTeil2”) {
this.form0.form.patchValue({NummerTeil1und2: erzeugeArtikelNummerTeil1und2((this.artikeldata.Nummer || “”), (event.value || “”))})
}
}

but this happens: video

and that is because this.artikeldata.nummer is empty when NummerTeil2 triggers and vice versa.

Regards
Thomas

Have you set the UpdateDataOnChange property of the form? If it is set to true (checked in the property grid) then artikeldata.Nummer should be set after the user types something in that field.

Hi Atanas,
that was the missing point! It worked.
But if i backspace the last char in Nummer or NummerTeil2… this last char wasnt deleted in the concatinated field NummerTeil1und2. I try to solve this for my own :wink:

Thank you!
Thomas