Introducing ListBox

ListBox is the component that lists several items and is used to select and display one or several items.

It is similar to Combo, except that the list of items is always open, and you can select multiple items. When selecting multiple items, select the items while holding down the Ctrl or Shift key.

When the list of items exceeds the number that can be displayed in ListBox, a scrollbar is automatically created. If possible, resizing the ListBox sufficiently so that there are no scrollbars is good for the user to view and select from the list of items.

Example

The following shows an example of an address book for webmail. The user views the list of addresses listed on the screen and can specify multiple recipients to whom he/she wants to send mail.

ListBox is very useful if you need the function to select multiple ones while viewing the list like this.

Creating ListBox

To use ListBox, you need to bind Dataset to form the list of items. Then, as in the example, the list of items appears and the environment that the user can select is created.

Select ListBox from the toolbar and drag it to an appropriate size on the form to create it. Select the component and click on the form to create it in the default size.

Create the list of items with Dataset and bind it to ListBox.

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

2. Double-click Dataset00 in the Invisible Objects area to open the Dataset editor. Enter the following in the column and row and close the Dataset editor.

3. Drag and drop Dataset00 from the Invisible Objects area to the ListBox component placed on the form and select [Bind InnerDataset 'Dataset00'] from the menu.

4. When the Bind InnerDataset window appears, enter or select 'CODE' in codecolumn and 'DATA' in datacolumn. Click the [OK] button to complete the binding.

Check with QuickView (Ctrl + F6) whether the list of items is displayed normally in ListBox.

Multiple Selection

ListBox supports single selection mode by default. To use multiple selection mode, you need to set the multiselect property ListBox.

This example explains how to create ListBox that can be multi-selected and extract the information of the selected item.

Example

The example has two functions, which are extracting the information of the selected item and selecting all of the items.

• Function to extract the information of the selected item: If you click the Selected record button after selecting the item in ListBox, the row index of the selected item and the number of selected items are displayed in the TextArea component.

• Function to select all items: Clicking the Select all button selects all items in ListBox.

sample_listbox_03.xfdl

Core features used in the example

multiselect

This is the property that sets multiple items to be selected in ListBox.

getSelectedCount

This is the method that returns the number of selected items in ListBox.

getSelectedItems

This is the method that returns the index of the selected item in ListBox as an array. The index values in the array are sorted automatically.

getCount

This is the method that returns the total number of items displayed in ListBox. If Dataset set in the innerdataset property is filtered, only the filtered result is included in the number of items and returned.

setSelect

This is the method that sets the selection status of a specific item in ListBox.

How to implement an example

Place the ListBox , Button components appropriately as shown in the example figure.

Create the list of items with Dataset and bind it to ListBox.

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

2. Double-click Dataset00 in the Invisible Objects area to open the Dataset editor. Enter the following in the column and row and close the Dataset editor.

3. Drag and drop Dataset00 from the Invisible Objects area to the ListBox component placed on the form and select [Bind InnerDataset 'Dataset00'] from the menu.

4. When the Bind InnerDataset window appears, enter or select 'CODE' in codecolumn and 'DATA' in datacolumn. Click the [OK] button to complete the binding.

Set the multiselect property of ListBox to 'true'.

Get the number of records (items) selected in ListBox and set them as the value property of the TextArea component. Write the onclick event function of the Selected record button.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var sMsg  = "Selected record is\n";	
	var arrSelectedItems = this.ListBox00.getSelectedItems();
	
	for(var i=0;i<arrSelectedItems.length;i++)
	{
			sMsg += "- Row : "+ arrSelectedItems[i] +"\n";
	}

	sMsg += "\nNumber of selected record: " + this.ListBox00.getSelectedCount();	
	
	this.TextArea00.value = sMsg;
};

Switch all items to the selected state. Write the onclick event function of the Select all button.

this.Button01_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	for(i=0;i<this.ListBox00.getCount();i++)
	{
		this.ListBox00.setSelect(i, true);
	}
};

Run it with QuickView (Ctrl + F6), select the item in ListBox, and click the buttons in order to check if it operates correctly.