CheckBoxSet introduction
The CheckBoxSet component is used to select one or more values from a list of multiple items. Each item is similar to the CheckBox component, and the arrangement of items is similar to the Radio component.
In a sense, the Radio component is like a multiple-choice question in which one answer can be selected, while the CheckBoxSet component is like a multiple-choice question in which two or more answers can be selected.
The CheckBoxSet component is supported from version 21.0.0.1500.
Example of use
There is a property that allows you to select multiple values when selecting a value in the Nexacro Studio option window. For example, in the Form Design > Paste Special option, you can select multiple target components to copy.
Setting non-selectable items
Set items in the product inventory list that are out of stock to be non-selectable.
Example
If the value of the Grid component's stock column is changed to 0, the corresponding data is changed so that it cannot be selected in the CheckBoxSet component. If the data is changed back to a value greater than 0, the CheckBoxSet component becomes selectable.
Core features used in the example
- readonlycolumn
Depending on the column value, the selectability can be changed. This example dynamically changes the readonlycolumn data to change the selectability state based on the input value.
- editautoselect
If the edittype property value is "text" and the editautoselect property value is set to true, the select all feature is enabled when the user clicks the editing area. When editing the input value, the user may directly edit it without selecting the target separately.
- editinputtype
Set the range of values that can be entered. In the example, only numbers will be entered, so it is set to "digit". If this is set to "number", period ("."), comma (","), and minus (“-”), characters can be entered.
How to implement an example
1
Place the CheckBoxSet and Grid components on the screen.
2
Set the columncount property value of the CheckBoxSet component to 2.
The action of the CheckBoxSet component's columncount, rowcount, and direction property values is the same as that of the Radio component. Refer to the example below.
3
Add the Dataset object and set the data as follows.
4
Bind the Dataset object to the CheckBoxSet component as the innerdataset.
innerdataset: dsCheckBoxSet codecolumn: code datacolumn: data readonlycolumn: readonly
5
Add the Dataset object and set the data as follows.
6
After the data is entered, bind it to the Grid component.
7
Double-click the Grid component and run the Grid Contents Editor.
8
Change the property value of the Body band cell corresponding to the stock column as follows.
displaytype: editcontrol edittype: text editautoselect: true editinputtype: digit
9
Add the oncolumnchanged event handler function of the Dataset object bound to the Grid component as follows.
Depending on whether the value of the stock column is 0 or not, the value of the readonly column of the Dataset object bound to the CheckBoxSet component is changed.
this.dsGrid_oncolumnchanged = function(obj:nexacro.NormalDataset,e:nexacro.DSColChangeEventInfo) {
if (e.columnid === 'stock') {
var targetRow = this.dsCheckBoxSet.findRow("code", obj.getColumn(e.row, 0));
var newValue = e.newvalue;
var readonlyValue = (newValue === 0) ? 1 : 0;
this.dsCheckBoxSet.setColumn(targetRow, "readonly", readonlyValue);
}
};10
Run QuickView (Ctrl + F6) to edit the value of the stock column to 0 or any other value in the Grid component and check that the state of the CheckBoxSet component changes according to the value.