Introducing Radio

The Radio component is the component that allows you to select only one of the items that can be selected. The built-in radio of the car provides the button to make it easier to select a specific station, but it is configured so that when more than one button was pressed, the button that was already pressed would be released. The Radio component is the transfer of this physical form to the user interface.

The CheckBox component can select more than one item, but the Radio component can select only one.

Example

When selecting an item, use the Radio component or the CheckBox component depending on whether there is one or more than one item that can be selected.

Creating Radio

Select Radio from the toolbar, drag and drop it onto the form to create it. Unlike other components with the basic appearance being created by dragging and dropping, the Radio component does not appear until data is set.

Select the Radio component placed on the screen and click the button in the innerdataset item in the property window. When the innerdataset edit window is opened, enter the code value to be processed when selecting the item in the codecolumn item and the text to be displayed on the screen in the datacolumn item.

If the component is placed and only the innerdataset property value is set, then the item is initialized to the unselected state.

Run it with QuickView (Ctrl + F6). If the component is placed and only the innerdataset property value is set, the item is initialized to the unselected state.

Setting Default Value

The function of the Radio component is to allow the user to select the desired item, but if there are items that many users select, they may be pre-selected by default.

Example

When executed, the specified item among the two items is displayed in the selected state. The default settings can also be checked in Nexacro Studio.

sample_radio_01.xfdl

Core features used in the example

index

This is the property that has the index of the selected item among the items of the Radio component. The first data starts at 0. The default value is -1. If the property value is -1, then it means that there is no selected item.

How to implement an example

Place the Radio component as shown in the example screen. Use the value created in the Creating Radioitem for the innerdataset property value.

Set the index property value. Enter "0" if you want to set the first value as the default, and enter "1" if you want to set the second value as the default.

Run it with QuickView (Ctrl + F6) and check the selected value.

Listing in Horizontal Direction

The default setting of the Radio component is to list items in a vertical direction. However, depending on the format that configures the screen, there may be a requirement to list the items of the Radio component vertically or horizontally. In this example, we will take a look at several options in which the items of the Radio component are listed on the screen.

Example

You can set 10 data in the Radio component and change the direction and number of columns and rows displayed on the screen.

sample_radio_02.xfdl

Core features used in the example

direction

Specifies the direction in which items (data) are displayed on the screen. The default value is "horizontal". One of the misconceptions about the direction property is that when innerdataset is set and displayed on the screen, the data is displayed vertically, but why is the default value "horizontal". This is because the definition of that property specifies the direction in which the item is displayed, not the direction of the Radio component. If you look at the example below, then it will be a bit quicker to understand. The value of the columncount property is 3, and only the value of the direction property is changed.

columncount, rowcount

columncount is the number of items displayed in the row, and rowcount is the number of items displayed in the column.

How to implement an example

Place the Edit. Static, Button, Radio components as shown in the example screen. Each of the innerdataset property values of the Radio component is as follows.

Each of the innerdataset property values of the Radio component (fruit list) that outputs the fruit list is as follows.

Each of the innerdataset property values of the Radio component (direction) that sets the direction is as follows.

Select the Button component and write the onclick event function. When the Button component is clicked, apply the property value entered in the Edit component and the value selected in the Radio component to the Radio component.

this.btnChange_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	if(this.radioDirection.value != null)
	{
		this.radioValue.set_direction(this.radioDirection.value);
	}
	if(this.editRowCount.value != null)
	{
		this.radioValue.set_rowcount(this.editRowCount.value);
	}
	if(this.editColumnCount.value != null)
	{
		this.radioValue.set_columncount(this.editColumnCount.value);
	}
};

Run it with QuickView (Ctrl + F6) and check the selected value. The Radio component items are displayed differently depending on the input value.

Adding innerdataset Item

Let us see how to add the data specified by the innerdataset property value.

Example

At the first execution, 3 data points are specified. When the value is entered in the Edit component and the button is clicked, it is reflected as the innerdataset item.

sample_radio_03.xfdl

Core features used in the example

getInnerDataset

Returns the Dataset object set in the innerdataset property. Dataset object property or method is used as-is.

How to implement an example

Place the Radio component as shown in the example screen. Specify the innerdataset property value as follows.

When the innerdataset data is added, the size of the radio component should be increased as well. Otherwise, the added data may not be visible. Select the radio component and change the fittocontents property value to "height".

Place the Edit component and the Button component. Add the input string as the innerdataset data. Specify the index parameter to add data to the rowcount of the current innerdataset. When the data is added, execute the resetScroll method to process the resizing of the radio component specified by the fittocontents property.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var rtn = this.Radio00.getInnerDataset();
	var nindex = rtn.rowcount;
	rtn.insertRow(nindex);
	rtn.setColumn(nindex, "codecolumn", this.Edit00.value);
	rtn.setColumn(nindex, "datacolumn", this.Edit00.value);
	this.resetScroll();
};

Run it with QuickView (Ctrl + F6) and enter the value to add innerdataset.