MultiCombo introduction

The MultiCombo component is used to select one or more values from a list of multiple items.

It is similar to the Combo component, but multiple values can be selected and the selected values can be expressed in various forms according to the edittype property value.

Example of use

When selecting values in the Nexacro Studio property window, there is a property that allows you to select multiple values. For example, in the case of the font property, when the selection window appears, if you select several desired fonts from the list, they are listed at the top. This is similar to the case where the edittype property value of the MultiCombo component is "text".

Adding a filter to the Grid component header area and showing only the items selected in the filter

Apply the MultiCombo control to the Head area of the Grid component to show only the selected items.

Example

When the showFilter checkbox is checked, a line of the Grid component header area is added, and the MultiCombo control that can filter Column0 values is displayed. Check the values to be filtered from the list and only the checked values are displayed on the screen.

sample_multicombo_01.xfdl

Core features used in the example

filter

Filters to show only the values that meet the conditions set in the Dataset object. Setting it to an empty string ("") will initialize it.

formatid

Set two or more formats to the Grid component and set the format to be displayed on the screen. Grid components can appear to dynamically change with a preset format.

displaytype, edittype

The displaytype property value can be set to "multicombocontrol" and the edittype property value to "multicombo". Multicombodataset, multicombocodecol, and multicombodatacol property values must be set together.

onheadvaluechanged

This event occurs when a value is changed in the Head band area of the Grid component. This example sets the filtering to be active when the user selects the values to be filtered.

How to implement an example

The Dataset object to be bound to the Grid component has Column and Row information as shown in the figure below.

Create only column information because data will be dynamically retrieved from the Dataset object bound to the Grid component.

This is the same as the existing layout, but the Row to handle the filter function will be added to the head band area.

displaytype: multicombocontrol
edittype: multicombo
multicombodataset: dsCombo
multicombocodecol: code
multicombodatacol: data

"multicombo_filter" is the format id value added in the Grid component. If the user changes the checkbox to a checked state, it will appear as a format in which a row to process the filter function is added to the head band.

this.CheckBox00_onchanged = function(obj:nexacro.CheckBox,e:nexacro.CheckBoxChangedEventInfo)
{
	if(e.postvalue)
	{
		this.Grid00.set_formatid("multicombo_filter");
		this.setMultiComboFilter();	
	}
	else
	{
		this.Grid00.set_formatid("default");
		this.dsGrid.filter("");
	}
};

Displays only non-duplicate values from the Column0 data list.

this.setMultiComboFilter = function()
{
	this.dsCombo.set_enableevent(false);
	this.dsCombo.deleteAll();
	for(var i=0, len=this.dsGrid.rowcount; i<len; i++)
	{
		tempvalue = this.dsGrid.getColumn(i, "Column0")
		if(!this.dsCombo.lookup("code", tempvalue, "code"))
		{
			this.dsCombo.addRow();
			this.dsCombo.setColumn(i, "code", tempvalue);
			this.dsCombo.setColumn(i, "data", tempvalue);
		}
	}
	this.dsCombo.set_enableevent(true);
}

An argument string to be applied to the filter method of the Dataset object bound to the Grid component is created using the value selected by the user in the MultiCombo control, and the method is executed.

this.Grid00_onheadvaluechanged = function(obj:nexacro.Grid,e:nexacro.GridHeadValueChangedEventInfo)
{
	var array = (e.newvalue).split(",");
	var filterString = "";

	if(array) {
		filterString = array.map(function(item) {
			return "'" + item + "' == Column0";
		}).join("||");
		this.dsGrid.filter(filterString);
	}
};

Displaying selected items in the Grid component in the form of tags

This transfers the area information selected in the Grid component to the MultiCombo component to be displayed in the form of a tag.

Example

The value selected in the Grid component is displayed in the form of a tag in the MultiCombo component.

This is an example to show how multiple values selected in the MultiCombo component are processed. Therefore, there is no function that reflects the values selected and canceled in the MultiCombo component to the Grid component.

sample_multicombo_02.xfdl

Core features used in the example

selecttype

This property sets the format selected by the Grid component. In this example, this is set to "multirow", and multiple rows can be selected using the Ctrl or Shift keys.

onselectchanged

When a value is selected in the Grid component, the onselectchanged event handler function handles it so that the selected values are displayed in the MultiCombo component.

edittype

This property sets the format to express the value selected in the MultiCombo component. In this example, this is set to "multitag" so that the tag form is used for display, while breaking lines within the MultiCombo component area.

index

The index property value of the MultiCombo component consists of a string, not a number. This component allows multiple items to be selected, and so the index values of the selected items are listed as a separator (the default value is comma).

How to implement an example

Set the height of the MultiCombo component to be the same as the height of the Grid component.

In the MultiCombo component, code and data values are processed separately, but in this example, code and data values are processed together as one column value.

<ColumnInfo>
  <Column id="code" type="STRING" size="256"/>
</ColumnInfo>
<Rows>
  <Row>
    <Col id="code">Basil Rivera</Col>
  </Row>
  <Row>
    <Col id="code">Clayton Chandler</Col>
  </Row>
  <Row>
    <Col id="code">Constance Trevino</Col>
  </Row>
  <Row>
    <Col id="code">Raymond Lara</Col>
  </Row>
  <Row>
    <Col id="code">Hayfa Rodgers</Col>
  </Row>
  <Row>
    <Col id="code">Vance Love</Col>
  </Row>
  <Row>
    <Col id="code">Adena Pruitt</Col>
  </Row>
  <Row>
    <Col id="code">Colleen Solis</Col>
  </Row>
  <Row>
    <Col id="code">Benedict O'connor</Col>
  </Row>
  <Row>
    <Col id="code">Hayes Melendez</Col>
  </Row>
</Rows>

innerdataset: dsMultiCombo
codecolumn: code
datacolumn: code

Whenever the user selects a row in the Grid component, information about the selected index is checked and set as the index value of the MultiCombo component.

this.Grid00_onselectchanged = function(obj:nexacro.Grid,e:nexacro.GridSelectEventInfo)
{
	var arrayStatrRow = e.selectstartrow;
	var arrayEndRow = e.selectendrow;
	var selectedIndexes = [];

	for (var i = 0; i < arrayStatrRow.length; i++) {
		for (var j = arrayStatrRow[i]; j <= arrayEndRow[i]; j++) {
			selectedIndexes.push(j);
		}
	}

	var result = selectedIndexes.join(",");
	this.MultiCombo00.set_index(result);
};

Showing the information of the number of selected items

In the MultiCombo component, the total number of lists and the number of selected items are displayed in text form.

Example

Displays information on the number selected in the MultiCombo component in text form. The text format value selected in the Radio component is set as the counttextformat property value and displayed in the MultiCombo component.

sample_multicombo_03.xfdl

Core features used in the example

edittype

If the edittype property value of the MultiCombo component is set to "count", the selected item information is displayed according to the counttextformat property value.

counttextformat

The total number of items and the number of selected items can be expressed in string form. If no value is specified for this, it is applied as "[#] item(s) selected”.

readonlycolumn

Set the non-selectable status according to the column value. Even if the readonlycolumn sets the columns to be unselectable, they are included in the total number.

How to implement an example

innerdataset: dsMultiCombo
codecolumn: code
datacolumn: data
readonlycolumn: readonly

In the MultiCombo component, "[*]" is changed to the total number of items and "[#]" is changed and displayed as the number of selected items.

innerdataset: dsCounttextformat
codecolumn: code
datacolumn: code

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

Setting the style when the edittype property value is "count"

If the multicombo component's edittype property value is "count", the structure diagram consists of the multicombotext that displays information about the selected item, the multicomboedit that inputs a search word, and the dropbutton. However, depending on the value of the type property, the control displayed on the screen are different.

If the type property value is "dropdown", the multicomboedit is not displayed on the screen (to be more specific, the multicomboedit node is created, but not displayed because the height is set to 0).

If the type property value is not "dropdown", it would be more neat to distinct between the multicombotext and multicomboedit, but styles cannot be specified according to the property value in the default theme, and therefore the separator line is set to be not displayed. (This is to keep the default design independent of the property, because adding a seperator to the default theme will display a separator that is not needed when the type property value is "dropdown").

Here is how to add multicombotext's border as a class selector and reflect the cssclass property value according to component properties.

Example

Changing the dropdown checkbox to a checked state changes the type property value to "dropdown" and disables the cssclass property.

sample_multicombo_04.xfdl

Core features used in the example

edittype

Setting the edittype property value of the MultiCombo component to "count” will display or not display the search word input area depending on the type property value.

How to implement an example

Set a border only for bottom areas to distinguish between the multicomboxt and multicomboedit.

.MultiCombo.sample_multicombo_04 .multicombotext
{
	-nexa-border : 0px  none, 0px  none, 1px solid #d5d5d5;
}

Changing the checkbox to a checked state changes the type property value to "dropdown" and the default theme settings are applied. If unchecked, the type property value is changed to "search" and the class selector setting value is applied.

this.CheckBox00_onchanged = function(obj:nexacro.CheckBox,e:nexacro.CheckBoxChangedEventInfo)
{
	if(e.postvalue)
	{
		this.MultiCombo00.set_type('dropdown');
		this.MultiCombo00.set_cssclass("");	
	}
	else
	{
		this.MultiCombo00.set_type('search')
		this.MultiCombo00.set_cssclass("sample_multicombo_04");	
	}
};