Introducing CheckBox

CheckBox is the component to show and set two status values, which are selection and release. CheckBox consists of a small square icon and text to indicate the selection status. When the user selects the checkbox, the small square icon is marked with a v, and when the user selects it again, the checkmark disappears.

CheckBox can be used in the grid. When the displaytype, edittype properties of the grid cell are set to the checkbox, the set column operates as the checkbox. In the grid, the checkbox is often used to select the row to perform certain actions.

CheckBox can be used by binding Dataset. If the value of the bound column is true or 1, then it is checked as v. If the value does not exist, or if it is false or 0, then it is unchecked.

The value of true (or 1) and false (or 0), which are used as the status value of the CheckBox, can be changed to different values. To change the status value, use the truevalue, falsevalue properties. For example, when male is set for the truevalue property and female is set for the falsevalue property, the value of the bound column is displayed in a checked state if the value of the bound column is male, and in an unchecked state if it is female.

Example

The following is the advertisement setting screen of Google. The user can select and receive only the advertisements he/she wants to receive among the advertisements classified by topic. Here, you can see that the checkboxes are used to indicate the user selection or when receiving input.

Creating CheckBox

Select CheckBox from the toolbar, and drag it to an appropriate size on Form to create it. If you just click on the form, then it will be created with the default size.

Run it with QuickView (Ctrl + F6). The square icon is displayed as an empty box as no value is set for the CheckBox component to represent.

Changing TRUE, FALSE Values

The values that determine the status of CheckBox are true (or 1) and false (or 0). However, depending on the settings, you can also use other values. For example, you can use character strings such as yes, no, or male, female, or characters such as Y, N as check values.

CheckBox provides the truevalue and falsevalue properties so that you can change the check settings. Set the check value in the truevalue property and the uncheck value in the falsevalue property. The setting values are in the character string format and are case-sensitive.

Example

The following is an example of a CheckBox with Yes and No applied, not the default true and false values. The operation is the same, but Yes, No are used as check values. When the check value is changed, the changed value is displayed in the Edit component under the checkbox.

To change the check value used in the CheckBox, set the truevalue and falsevalue properties.

sample_checkbox_02.xfdl

Core features used in the example

truevalue

This is the property that sets the value used to set the check in the checkbox. If no value is set for the property, then the value "true" or "1" is used.

falsevalue

This is the property that sets the value used to release the check in the checkbox. If no value is set for the property, then the value "false" or "0" is used.

How to implement an example

Place the CheckBox component and the Edit component from the toolbar as shown in the example figure. If you select the component and just click on the form, then it will be created with the default size.

Create and bind Dataset with the value to be bound to CheckBox.

1. Select Dataset from the toolbar and click on an appropriate space on the form to create Dataset.

2. Open Dataset Editor and enter the following.

3. If you drag and drop Dataset in the Invisible Object area to the CheckBox component and Edit component in the form, then the Bind Item window appears. Bind it as follows.

Run it with QuickView (Ctrl + F6). Check that the square icon is checked as the value of the bound column is set to "Yes".

Checking whether Checked or Not

If truevalue and falsevalue properties are specified, then it may be difficult to determine whether or not they are checked only by looking at the value property value. In this case, you can use the isChecked method to check whether it is checked or not.

Example

When you select the value in the Grid component, the corresponding value is reflected in the CheckBox component. In CheckBox02, the truevalue property value is set to "A" and the falsevalue property value is set to "B".

sample_checkbox_03.xfdl

Core features used in the example

isChecked

Returns the checked status. If truevalue and falsevalue properties are applied, the status is returned by reflecting the property values.

onbindingvaluechanged

Occurs when the property value of the bound component changes while the status of the Dataset object changes. Since it is processed after all the property values of the bound component have been changed, it is used to check the last value or when the layout has changed due to the changed property.

How to implement an example

Set the truevalue and falsevalue property values of the last component (CheckBox02) to "B" and "A".

Selecting a specific Row in the Grid component changes the status of the Dataset object and transmits it to the bound component. When all the property values of the bound component are reflected, the onbindingvaluechanged event occurs.

this.sample_checkbox_03_onbindingvaluechanged = function(obj:nexacro.Form,e:nexacro.BindingValueChangedEventInfo)
{
	this.TextArea00.set_value("CheckBox00: "+this.CheckBox00.isChecked()+" / "+this.CheckBox00.value);
	this.TextArea00.insertText("\nCheckBox01: "+this.CheckBox01.isChecked()+" / "+this.CheckBox01.value);
	this.TextArea00.insertText("\nCheckBox02: "+this.CheckBox02.isChecked()+" / "+this.CheckBox02.value);
};