Checkbox

Check out the given walk-through to understand the Checkbox filter component.

The checkbox is used to filter data on any associated components. Enabling a checkbox will change the data displayed in the associated components.

Best Situation to use Checkbox

• To filter data displayed in the associated components

• To select multiple items at a time

Default Checkbox Image

Properties of the Checkbox filter

General

• The user can change the height, width, top, and left position for the checkbox filter component.

• The user can set a name to the label and change its font color-style-weight-family from the General Properties.

• If the Show Checked option is enabled a checkmark will appear by default.

• Chrome color is used to set the component background, the user can change its transparency.

• A value can be set to the Checked Value so that when the user clicks on the check box, this value will get passed.

Please Note: If initial visibility is not enabled, the chart won’t be available for the first preview.​

​

Multi-checkbox Settings

The user can provide multiple checkboxes while enabling this property option.

• Multiple Checkboxes: Enable the Multiple Checkboxes option from the MultiCheckbox Settings property to add multiple checkboxes with labels.

• Toggle Checkboxes: Enable the option to access the new Toggle Switch UI as checkboxes.

• Manage Checkbox: Click the Manage Checkbox icon to access the dialog window for managing multiple checkboxes.

  • The user can add or delete checkboxes.

  • Provide Label Text, select the default display to be checked or unchecked, and provide value for the checked toggle checkboxes.

• Direction: Select an option from the drop-down menu to choose the direction of the checkboxes. It can be Horizontal or Vertical.

Toggle Style

The user can style the toggle switch UI using the Toggle Style property option.

• The user can modify the Width, Height, and Toggle Switch Shape (Round or Square) from the Toggle Stypes property option.

• The user can also define colors for the Toggle Slider, Checked Color, and UnChecked Color.

Background

• The user can get the reflection of the chart by enabling the shadow option.

• The user can also change the color and increase/decrease the transparency of the shadow.

Modified Checkbox filter after changing its properties

​​

Checkbox Use Case

The following use case explains the steps to connect and use a Checkbox with a Data Grid component.

• Drag a Data Grid component to the Designer canvas.

• Associate a Data Connection with it.

• Drag a Checkbox component from the Filter group to the canvas.

• Open the Checkbox Properties, provide the necessary properties, and apply them.

  • Provide the text for the Label.

  • Provide the Checked Value.

  • Keep the Unchecked Value blank.

  ​

  
• Use the component object page to write the required script at the component level.

• Configure the Condition tab by providing a field value for the conditions (the field State is chosen in the given image).

• Click the Preview icon to preview the Dashboard.

​

• Use a checkmark in the given box to display the Checked Value in the chart.

• Uncheck the Check Box to display the Unchecked Value in the chart (In this case, no value has been assigned as Unchecked Value so it will display all the records).

​