Best way to interact (hide/disable/enable/fill programmatically) with client forms fields/components

Hello,

I am new on Radzen and Angular best practices, but by now I am loving your app.

  1. My main question is how I can disable or hide fields on a form programmatically on the server side custom controller (partial class)?

  2. Another question how I can disable or hide fields on a form on the client based for example on the selected option on the drop box on the same form?

  3. Additionally how I can programmatically (server side / client side - on the fly) can define the default option selected on a drop down box?

  4. Finally how I can programmatically (server side / client side - on the fly) can define the default value on a textbox?

Thanks in advance,
Regards,
Miguel

Hi Miguel,

Straight to your questions:

My main question is how I can disable or hide fields on a form programmatically on the server side custom controller (partial class)?

Hiding and showing form fields from the server-side is not supported. The server-side application produced by Radzen is only responsible for producing the data via REST API and optionally handle authorization and authentication.

You can hide and show form fields at the client-side conditionally via the Visible property of the form field. You can set it as an expression e.g. ${someProperty == true}. This will hide or show the form field depending on the result of that expression.

Another question how I can disable or hide fields on a form on the client based for example on the selected option on the drop box on the same form?

You can use the approach from my previous response. However if the dropdown is from the same form you need to take some extra steps:

  1. Declare a page property which the form will update.

    • Click on an empty space in the page
    • Add event handler for the Load event
    • Set Type to Set Property
    • Set Name to some value e.g. myForm.
    • Set Value to ${{}} which is an expression that returns an empty JavaScript object {}
  2. Set the Data property of the form to myForm.

  3. Check UpdateDataOnChange. This will make the form update the property you defined.

  4. Now you can use myForm to hide and show form fields e.g. set the Visible property to ${myForm.DropDownValue == 'some value'}

Additionally how I can programmatically (server side / client side - on the fly) can define the default option selected on a drop down box?

Use the DefaultValue property of the field.

Finally how I can programmatically (server side / client side - on the fly) can define the default value on a textbox?

The textbox also has a DefaultValue property.

I hope this helps,
Atanas

2 Likes