Introducing Combo

Combo is the component used to select one value from the list of items.

There is Combo Edit that can input/output text, and Drop Button is placed next to it. When the button is clicked, the list of Dataset items bound to the Combo is displayed in the form of a list box.

Combo provides four search types for cases where it is difficult to find the desired item due to a large number of items. You can easily use the search function by simply setting the type property. dropdown does not receive the search word input and only selects the item list. search and filter show only items starting with the search word entered in Combo Edit. filterlike shows all the items with the search word entered in Combo Edit as the list. The developer can increase user convenience by using the appropriate Combo type for the situation.

Combo can dynamically configure the list of items by binding Dataset. Also, if the items are always static, then it is possible for the developer to manually enter the list of items using the InnerDataset editor.

Example

The following shows an example of implementing the regional language setting function using Combo. The user goes through the list of available items and can only select one of them.

Creating Combo

Select Combo 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 QuickView (Ctrl + F6) to check the result.

The Combo component with no property set will not display any value and cannot input a search word.

Configuring Combo - Fixed Item List

Generally, when configuring Combo, the item list is received from the database as the local Dataset. However, if you have only a few items and the values are always the same, then you can also simply configure the list of items using the InnerDataset editor. For example, data such as gender, date, region of the address, etc. rarely change, so it is convenient to list items simply with the InnerDataset editor.

The InnerDataset editor automatically creates the Dataset called innerdataset internally without the hassle of creating a separate dataset by the user. In the following, you can check the innerdataset, codecolumn, and datacolumn automatically created by the XFDL code after configuring the item list with the InnerDataset editor. Please refer to ${sample_element}for the description of this property.

<Combo id="Combo00" taborder="0" text="male" left="32" top="40" width="200" height="32" right="" bottom="" leftbase="" topbase="" bottombase="" rightbase="" widthbase="" heightbase="" codecolumn="codecolumn" datacolumn="datacolumn" value="m" index="0">
	<Dataset id="innerdataset">
    	<ColumnInfo>
        	<Column id="codecolumn" size="256"/>
            <Column id="datacolumn" size="256"/>
		</ColumnInfo>
		<Rows>
			<Row>
				<Col id="codecolumn">00</Col>
			.
			.

The figure below shows the settings of innerdataset, codecolumn, and datacolumn properties automatically set after configuring Combo with the InnerDataset editor. Since it is processed automatically by the tool, there is no need for the developer to set it separately.

Example

The following is an example of Combo with a list of 6 items. When you click the Drop Button of Combo, the list of items appears, and you can select one item from the list. When you select the item, the selected item is reflected in Combo Edit.

sample_combo_02.xfdl

Core features used in the example

codecolumn

This is the property that sets the column to be used as the code value in the item of Combo. Code is a type of ID value used when processing items internally in Combo.

datacolumn

This is the property that sets the column to be used as the data value in the item of Combo. Data is the item information that is displayed on Combo to be displayed to the user.

innerdataset

This is the property that sets the ID of Dataset to be bound to Combo (configuring the item).

How to implement an example

This describes how to simply configure the list of items using the InnerDataset editor without Dataset binding.

Select Combo 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.

Select Combo created in step 1 and find the innerdataset property in the Properties window. When you select the innerdataset property, the [...] button appears next to the property as shown below, and when you click the button, the InnerDataset editpr appears as follows. Enter the following in the editor and click the [OK] button to complete the binding.

Check whether the codecolumn, datacolumn, innerdataset properties are automatically set in the Properties window as shown below.

Set the initial value that is first selected and displayed when Combo operates with the index property. The value to be set in the index is defined in the order of 0, 1, 2... from the front in the order of the items of the currently bound Dataset.

In the example, in order to use apple as the initial value, the index is set to 0 in the Properties window. The text and value properties are set automatically when you set the index value.

Check with QuickView (Ctrl + F6) if Combo has been successfully created.

Check that apple is selected as the initial value in Combo Edit, and click Drop Button to select another item from the list to see if the value changes to the corresponding value.

Configuring Combo - Dynamic Item List

Generally, when configuring Combo, the item list is received from the database and used. This is because Combo items can be managed in the database so that even if item information is changed, the item list can be dynamically configured without having to modify the screen

Dataset is required to receive data from the database and configure the item list of Combo. This chapter describes how to dynamically configure items by binding Dataset to Combo.

Example

The following is an example of Combo with a list of 6 items. When you click the Drop Button of Combo, the list of items appears, and you can select one item from the list. When you select the item, the selected item is reflected in Combo Edit.

Since the list is displayed by binding the Dataset component, the same data can be shared when displaying the Grid component. The Grid component placed on the right has only codes from 00 to 05, and it shows data in text form with the information of Dataset bound to the Combo component. Also, by binding the value property value of the Combo component with the Dataset object bound to the Grid component, the item selected in the Grid component is displayed in the Combo component, and the value selected in the Combo component is updated in the Grid component.

sample_combo_03.xfdl

Core features used in the example

codecolumn

This is the property that sets the column to be used as the code value in the item of Combo. Code is a type of ID value used when processing items internally in Combo.

datacolumn

This is the property that sets the column to be used as the data value in the item of Combo. Data is the item information that is displayed on Combo to be displayed to the user.

innerdataset

This is the property that sets the ID of Dataset to be bound to Combo (configuring the item).

How to implement an example

Select Combo 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.

Create Dataset with the list of items to be displayed on Combo.

1. Select Dataset from the toolbar and click an appropriate space on the form to create Dataset. Dataset is a logical object with no shape. Therefore, it is not displayed on the form, unlike other components, but is displayed in the Invisible Object area.

2. Enter item information in the created Dataset. If you double-click Dataset00 in the Invisible Objects area, then the Dataset editor appears. Enter the following input. When the input is complete, close the Dataset editor window. The content is automatically saved when you close the window.

Bind the dataset to Combo. For binding, you need to set the appropriate dataset column in the codecolumn and datacolumn properties of Combo.

Drag and drop the Dataset object (ds_combo) in the Invisible Objects area to the Combo component placed on the form, and select [Bind InnerDataset "ds_combo"] to open the Bind InnerDataset window as shown below.

Enter or select 'CODE' in the codecolumn and 'DATA' in the datacolumn and click the [OK] button to complete the binding. In this example, the column names of the dataset are CODE and DATA for easy understanding of the settings.

Set the initial value that is first selected and displayed when Combo operates with the index property. The value to be set in the index is defined in the order of 0, 1, 2... from the front in the order of the items of the currently bound Dataset.

In the example, in order to use apple as the initial value, the index is set to 0. The text and value properties are set automatically when you set the index value.

Check with QuickView (Ctrl + F6) if Combo has been successfully created.

Check that apple is selected as the initial value in Combo Edit, and click Drop Button to select another item from the list to see if the value changes to the corresponding value.

Place 2 Grid components next to the Combo component as shown in the example. Then, create another Dataset object. The Dataset object creation information is as follows. For data, arbitrarily input the value between 00 and 05.

If you drag the Dataset object with the left mouse button and move it over the Grid component, then the binding operation is processed. The first Grid component processes only binding, and the second Grid component modifies the corresponding CODE value to be displayed as text. Double-click the Grid component to run the Grid Contents Editor and modify the following property values.

Drag and drop the Dataset object (ds_grid) in the Invisible Objects area to the Combo component placed on the form, and select [Bind With "ds_grid"] to open the Bind Item window as shown below. Modify property items and column ID items in the Bind Item window.

Check that the Grid component is expressed in both the code and the text as in the example image, and check how it is expressed when the item of the Grid component or the item of the Combo component is changed.

Extracting Related Items through Keyword Search

By setting the type property of Combo, you can implement the function to search for and select the item from the list by entering the search word in addition to the method of directly selecting the item. For example, if you set the property value to 'filter' or 'filterlike', then you can show an effect similar to the autocomplete function provided by the portal site.

Example

The following is an example of how Combo operates with the corresponding type when one of the type properties of Combo is selected with the radio button. The types that can be set are dropdown, search, filter, and filterlike.

• DROPDOWN displays all items in the combo list when Combo receives focus. In this case, you cannot enter the character string in Combo Edit, but can only select with the mouse.

• In SEARCH, Combo Edit is enabled and you can enter the character string. Entering the string displays all items in the combo list and moves the focus to the first item starting with the entered string.

• In FILTER, Combo Edit is enabled and you can enter the character string. When you enter the character string, only the items starting with the character string are displayed in the combo list, and the focus moves to the first item among them.

• FILTERLIKE has the same function as the like statement of SQL and displays all items containing the input string in the combo list. For example, typing 'p' displays apple and peach with 'p' in the list and moves the focus to the first item, apple.

sample_combo_04.xfdl

Core features used in the example

type

This is the property that sets the search function of Combo. You can set how to display the item list according to the setting value. The search function can be used when it is set to search, filter, or filterlike.

onitemchanged

This is the event that occurs after the value changes in Combo. Here, the value refers to the value of the index, text, value property values of Combo, and the event occurs when this property is changed by the mouse of keyboard operation of the user. In the case of the value being changed by the script, the event does not occur.

How to implement an example

Select Combo 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.

Create Dataset with the list of items to be displayed on Combo.

1. Select Dataset from the toolbar and click an appropriate space on the form to create Dataset. Dataset is a logical object with no shape. Therefore, it is not displayed on the form, unlike other components, but is displayed in the Invisible Object area.

2. Select the dataset in the Invisible Object window and change the id to 'ds_combo' in the Properties window.

3. Next, Enter item information in the created dataset. If you double-click ds_combo in the Invisible Objects area, the Dataset editor appears. Enter the following input. When the input is complete, close the Dataset editor window. The content is automatically saved when you close the window.

Bind the dataset to Combo. For binding, you need to set the appropriate dataset column in the codecolumn and datacolumn properties of Combo.

Drag and drop ds_combo n the Invisible Objects area to the Combo component placed on the form, and select [Bind InnerDataset "ds_combo"] to open the Bind InnerDataset window as shown below.

Enter or select 'CODE' in the codecolumn and 'DATA' in the datacolumn and click the [OK] button to complete the binding.

Set the type property to 'dropdown' in the Properties area of Combo. If no value is set, then it operates as the dropdown.

Set the index property to '0' to set the initial value. If set to '0', then the first value of Dataset, apple, is set as the initial value.

Create the radio menu so that you can select and set 4 types of Combo, which are dropdown, search, filter, and filterlike.

1. Select Radio 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.

2. Select the created Radio component, right-click and select the [Bind Innerdataset> Innerdataset Editor] menu from the context menu. Then, the InnerDataset editor appears. Enter the following and click the [OK] button.

Set the direction property to 'vertical' to list items horizontally, like the radio menu in the example. Also, set the index property to '0' to set the initial value to DROPDOWN.

Use the radio button to set the Combo type. Register the onitemchanged event function and write the script so that the Combo type setting is changed when the user selects the item with the radio button.

/* 라디오 버튼의 onitemchanged 이벤트 함수 */

this.Radio00_onitemchanged = function(obj:Radio,e:ItemChangeEventInfo)
{
	switch(e.postindex)
	{
		case 0:	/* DROPDOWN */
			this.Combo00.set_type("dropdown");
			break;
		case 1:	/* SEARCH */
			this.Combo00.set_type("search");
			break;
		case 2:	/* FILTER */
			this.Combo00.set_type("filter");
			break;
		case 3: /* FILTERLIKE */
			this.Combo00.set_type("filterlike");
			break;
		default:
			trace("UNKNOWN TYPE");	
	}
};

Check with QuickView (Ctrl + F6) if Combo has been successfully created.

Select DROPDOWN, SEARCH, FILTER, and FILTERLIKE from the radio menu one by one, enter the search word in Combo Edit and check if the search results are displayed in the list according to the type.

Implementing Multi Combo

There is a disadvantage of not being able to view detailed information as the list displayed in the Combo component can only display one date. You can implement the function to view more detailed information instead of the default item list displayed when the button is clicked by using the Grid component.

Example

If you click the Grid component item displayed after clicking the button of the Combo component, then it will input as the Combo data.

sample_combo_05.xfdl

Core features used in the example

ondropdown

This is the event that occurs when the item list is displayed when clicking dropbutton of the Combo component. Returning the false value does not display the list of items. In the example, the item list is not displayed and the visible property value of the Grid component is changed to true.

How to implement an example

Place the Combo component and the Grid component. In the example, the Grid component was resized under the assumption that the number of data is limited to 4. Since the Grid component should not be visible at first, change the visible property value to false.

Create the Dataset object and add data as shown below.

Bind the Dataset object created in the Grid component and the Combo component.

Make the head area invisible in the Grid component. Run Grid Contents Editor, select the head row, and click the Delete button.

Change the visible property value of the Grid component to true in the ondropdown event function, and return the false value so that the item list does not appear.

this.Combo00_ondropdown = function(obj:nexacro.Combo,e:nexacro.EventInfo)
{
	this.Grid00.set_visible(true);
	return false;
};

The Grid component is shown instead of the item list, and when the item is selected, the value is transmitted to the Combo component and the visible property value is changed to false.

this.Grid00_oncellclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
	this.Grid00.set_visible(false);
	this.Combo00.set_value(this.Dataset00.getColumn(e.row, "CODE"));
};

Run QuickView (Ctrl + F6) to check the result. Click dropbutton to select the item and check if it is properly reflected in the Combo component.

Implementing Multiple Selection Combo

This is the tip you can use if you need to select multiple items from the combo list.

Example

After clicking the button of the Combo component, check the desired item in the Grid component item displayed and click another column to enter the Combo data.

sample_combo_06.xfdl

Core features used in the example

getColumn

Returns the value of the specified column of the specified ROW index. In the example, it is used to check the value of the checked item.

How to implement an example

Place the Combo component and the Grid component. In the example, the Grid component was resized under the assumption that the number of data is limited to 4. Since the Grid component should not be visible at first, change the visible property value to false.

Create the Dataset object and add data as shown below. The check column is used to check whether it is selected or not, and you do not need to enter data.

Bind the Dataset object created in the Grid component and the Combo component. Make the head area invisible in the Grid component. Run Grid Contents Editor, select the head row, and click the Delete button.

Modify the displaytype, edittype property values of the first column Cell object as follows.

Change the visible property value of the Grid component to true in the ondropdown event function, and return the false value so that the item list does not appear.

this.Combo00_ondropdown = function(obj:nexacro.Combo,e:nexacro.EventInfo)
{
	this.Grid00.set_visible(true);
	return false;
};

The Grid component is shown instead of the item list, and when the item is selected, the value is transmitted to the Combo component and the visible property value is changed to false. Since the first column is the checkbox area, the event should not be applied.

this.Grid00_oncellclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
	if(e.col!=0)
	{
		this.Grid00.set_visible(false);
		this.fn_comboEdit_set();
	}
};

Create the connected fn_comboEdit_set function. Combine and return the text of the DATA column in which the first column is checked.

this.fn_comboEdit_set = function()
{
	var str_txt = "";
	
	for (i=0;i<this.Dataset00.getRowCount();i++)
	{
		if (this.Dataset00.getColumn(i, "check")==1)
		{
			str_txt += this.Dataset00.getColumn(i,"DATA") + ",";
			
		}
	}	
	this.Combo00.set_text(str_txt.substr(0, str_txt.length-1));
};

Run QuickView (Ctrl + F6) to check the result. Click dropbutton to select the item and check if it is properly reflected in the Combo component.

Searching or Filtering Case Insensitively

If you set the type property value of Combo, then you can find the desired value, but it is case sensitive. If you want to search without case sensitivity in English, then you can specify a different type property value.

Example

Depending on the item selected in the Radio component, you can choose whether to be case sensitive or not. "search", "filter", "filterlike" are case sensitive and processed as entered, and "caseisearch", "caseifilter", "caseifilterlike" are processed without case sensitivity.

sample_combo_07.xfdl

Core features used in the example

type

Able to specify the "caseisearch", "caseifilter", "caseifilterlike" values that can be processed without case sensitivity from existing property values.

How to implement an example

this.Radio00_onitemchanged = function(obj:nexacro.Radio,e:nexacro.ItemChangeEventInfo)
{
    this.Combo00.set_type(e.postvalue);
};

Expanding Items on Mouse Over

You can use the dropdown method to expand the combolist item in specific situations.

Example

When you hover the mouse over the Combo component, the item expands.

sample_combo_08.xfdl

Core features used in the example

isDropdown

Checks whether combolist is displayed on the screen.

dropdown

Displays combolist on the screen.

How to implement an example

this.Combo00_onmouseenter = function(obj:nexacro.Combo,e:nexacro.MouseEventInfo)
{
	if(!obj.isDropdown()) {
		obj.dropdown();
	}
};

/*
this.Combo00_onmouseleave = function(obj:nexacro.Combo,e:nexacro.MouseEventInfo)
{
	if(obj.isDropdown()) {
		obj.dropdown();
	}
};
*/

Processing Event when Property Value Changes in Script

If the index property value of the Combo component is modified in the script, then the event does not occur. However, if the event needs to be triggered by necessity, then you can force it to be created.

Example

When the first button is clicked, the index is changed, but the event does not occur. When the second button is clicked, the index is changed and the event occurs.

sample_combo_09.xfdl

Core features used in the example

fireEvent

Triggers the event for the object specified by the set EventInfo object.

How to implement an example

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Combo00.set_index(3);
	this.TextArea00.set_value("Button00_onclick");
};

this.Button01_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var preindex = this.Combo00.index;
	var pretext = this.Combo00.text;
	var prevalue = "";
	this.Combo00.set_index(3);
	var postindex = this.Combo00.index;
	var posttext = this.Combo00.text;
	var postvalue = "";
	this.TextArea00.set_value("Button01_onclick");
	
	var evt = new nexacro.ItemChangeEventInfo(this, "canitemchange", preindex, pretext, prevalue, postindex, posttext, postvalue);
	this.Combo00.canitemchange.fireEvent(this.Combo00, evt, true);

};

this.Combo00_canitemchange = function(obj:nexacro.Combo,e:nexacro.ItemChangeEventInfo)
{
	this.TextArea00.insertText(" -> canitemchange");
};

Resizing dropbutton

The small icon displayed on the right side of the Combo component is dropbutton. Even if filtering is performed according to the value of the type property, clicking dropbutton displays all items. In this example, we will take a look at how to change the size of the dropbutton.

Example

Specify the size to 20 when the first button is clicked, and set to 0 to make it invisible when the second button is clicked.

sample_combo_10.xfdl

Core features used in the example

buttonsize

Specifies the size of dropbutton. It is the same operation as specifying the width, height property values, and it includes internal processing such as ensuring that the Combo component does not exceed the size. Automatically corrects the value if the value larger than the size of the Combo component is specified.

How to implement an example

If you want to specify the width and height property values, then specify 2 values in the string separated by the blank character.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Combo00.set_buttonsize("40 20");
};

If the property value is set to 0, then it is not displayed on the screen. Since the dropbutton control itself was not deleted, it will be displayed again in a different size if you modify buttonsize.

this.Button01_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Combo00.set_buttonsize(0);
};

this.sample_combo_10_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)
{
	this.Combo00.dropbutton.set_background("cornflowerblue");
};