Client Side PropertiesShow/Hide expression

Description

Show/hide expression can be used with any field or container in a Grid component.

If you want to show/hide multiple fields at once, wrap the fields in a container and add a show/hide expression for the container. Hiding fields can be useful. For example, you might have a Grid with a 'billing address' field, a 'shipping address' field, and a 'shipping address is the same as billing address' field. If the latter is checked, you would like to hide the entire shipping address part of the Grid.

Show/hide expression

When you define a client-side show/hide expression, you can also specify an animation effect to execute when the target object is shown or hidden. As demonstrated in the image below, when you open the expression builder there is a checkbox ' Animate show/hide '. When this box is clicked, the 'Define Animation' button is shown. The image below shows the dialog that is shown when the button is pressed.

The animation expression is added in front of the show/hide expression and is enclosed in square braces. It shows the animation effect and duration for the 'show' action and the 'hide' action.

images/01_ashowhide.png

When you examine the expression in the property Grid, it will look something like this:

[Fade,Slow|Fade,Fast]]Region = "MA"

Videos

Show/Hide Fields

This video shows how parts of a Grid can be hidden under certain conditions. The Grid shown has a section for the billing address and shipping address. If the 'Shipping address is same as billing address' field is checked, the entire 'Shipping Address' part of the Grid form is hidden.