MultiCombo 소개

MultiCombo 컴포넌트는 여러 아이템 목록 중에서 한 개 이상의 값을 선택하기 위한 용도로 사용하는 컴포넌트입니다.

Combo 컴포넌트와 비슷하지만 여러 개 값을 선택할 수 있고 edittype 속성값에 따라 선택한 값을 다양한 형태로 표현할 수 있습니다.

사용 예

넥사크로 스튜디오 속성창에서 값 선택 시 여러 개 값을 선택할 수 있는 속성이 있습니다. 예를 들어 font 속성의 경우 선택창이 뜨면 목록에서 원하는 폰트를 여러 개 선택하고 선택한 항목이 상단에 나열되어 표시됩니다. MultiCombo 컴포넌트의 edittype 속성값이 "text"인 경우와 비슷한 형태입니다.

Grid 컴포넌트 헤더 영역에 필터 추가하고 필터에서 선택한 항목만 보여주기

Grid 컴포넌트 Head 영역에 MultiCombo 컨트롤을 적용해 선택한 항목만 보여줍니다.

예제

showFilter 체크박스를 체크 상태로 변경하면 Grid 컴포넌트 헤더 영역이 한 줄 추가되면서 Column0 값을 필터링할 수 있는 MultiCombo 컨트롤이 표시됩니다. 목록에서 필터링할 값을 체크하면 체크한 값만 화면에 표시됩니다.

sample_multicombo_01.xfdl

예제에서 사용한 핵심 기능

filter

Dataset 오브젝트에서 설정한 조건에 맞는 값만 보이게 필터링합니다. 빈 문자열("")을 설정하면 초기화됩니다.

formatid

Grid 컴포넌트에 2개 이상의 포맷을 설정하고 화면에 표시할 포맷을 설정합니다. 미리 설정된 포맷으로 동적으로 Grid 컴포넌트가 변경되는 것처럼 보이게 할 수 있습니다.

displaytype, edittype

displaytype 속성값을 "multicombocontrol", edittype 속성값을 "multicombo"로 설정할 수 있습니다. multicombodataset, multicombocodecol, multicombodatacol 속성값을 같이 설정해주어야 합니다.

onheadvaluechanged

Grid 컴포넌트의 Head 밴드 영역에서 값이 변경됐을 때 발생하는 이벤트입니다. 예제에서는 사용자가 필터링할 값을 선택했을 때 필터링이 동작하도록 설정했습니다.

예제 구현 방법

Grid 컴포넌트에 바인딩할 Dataset 오브젝트는 아래 그림과 같은 Column, Row 정보를 가지고 있습니다.

데이터는 Grid 컴포넌트에 바인딩한 Dataset 오브젝트에서 동적으로 가져올 것이기 때문에 칼럼 정보만 생성합니다.

기존 레이아웃과 같지만 Head 밴드 영역에 필터 기능을 처리할 Row만 추가할 겁니다.

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

"multicombo_filter"는 Grid 컴포넌트에서 추가한 포맷 id 값입니다. 사용자가 체크박스를 체크 상태로 변경하면 Head 밴드에 필터 기능을 처리할 Row를 추가한 포맷 형태로 보입니다.

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("");
	}
};

Column0 데이터 목록 중에서 중복되지 않은 값만 표시하도록 처리합니다.

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);
}

사용자가 MultiCombo 컨트롤에서 선택한 값으로 Grid 컴포넌트에 바인딩한 Dataset 오브젝트의 filter 메서드에 적용할 인자 문자열을 생성하고 메서드를 실행합니다.

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);
	}
};

Grid 컴포넌트에서 선택한 항목을 태그 형태로 보여주기

Grid 컴포넌트에서 선택한 영역 정보를 MultiCombo 컴포넌트로 넘겨 태그 형태로 표시되도록 합니다.

예제

Grid 컴포넌트에서 선택한 값이 MultiCombo 컴포넌트에 태그 형태로 표현됩니다.

MultiCombo 컴포넌트에서 선택한 여러 개의 값을 어떻게 처리하는지 보여주기 위한 예제입니다. 때문에 MultiCombo 컴포넌트에서 선택, 취소한 값이 Grid 컴포넌트에 반영되는 기능은 구현하지 않았습니다.

sample_multicombo_02.xfdl

예제에서 사용한 핵심 기능

selecttype

Grid 컴포넌트에서 선택하는 형식을 설정하는 속성입니다. 예제에서는 "multirow"로 설정했고 Ctrl키 또는 Shift키를 사용해 여러 Row를 선택할 수 있습니다.

onselectchanged

Grid 컴포넌트에서 값 선택 시 MultiCombo 컴포넌트에 선택한 값이 표현되도록 onselectchanged 이벤트 핸들러 함수에서 처리합니다.

edittype

MultiCombo 컴포넌트에서 선택한 값을 표현하는 형식을 설정하는 속성입니다. 예제에서는 MultiCombo 컴포넌트 영역 내에서 줄바꿈을 하면서 태그 형태로 표기할 수 있게 "multitag"로 설정했습니다.

index

MultiCombo 컴포넌트의 index 속성값은 숫자가 아닌 문자열로 구성됩니다. 여러 아이템을 선택할 수 있는 컴포넌트의 특성에 따라 구분자(기본값 콤마)로 선택한 아이템의 index 값을 나열합니다.

예제 구현 방법

MultiCombo 컴포넌트의 높이는 Grid 컴포넌트의 높이와 같게 설정합니다.

MultiCombo 컴포넌트에서는 code, data 값을 분리해서 처리하지만 이번 예제에서는 하나의 칼럼 값으로 code, data 값을 같이 처리합니다.

<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

사용자가 Grid 컴포넌트에서 Row를 선택할 때마다 선택한 index에 대한 정보를 확인하고 MultiCombo 컴포넌트의 index 값으로 설정합니다.

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);
};

선택한 개수 정보를 보여주기

MultiCombo 컴포넌트에서 전체 목록 개수와 선택한 항목 개수를 텍스트 형태로 표시되도록 합니다.

예제

MultiCombo 컴포넌트에서 선택한 개수 정보를 텍스트 형태로 표시합니다. Radio 컴포넌트에서 선택한 텍스트 포맷값은 counttextformat 속성값으로 설정되어 MultiCombo 컴포넌트에 표시됩니다.

sample_multicombo_03.xfdl

예제에서 사용한 핵심 기능

edittype

MultiCombo 컴포넌트의 edittype 속성값을 "count"로 설정하면 counttextformat 속성값에 따라 선택한 항목 정보를 표시합니다.

counttextformat

전체 아이템 개수와 선택한 아이템 개수 정보를 문자열 형태로 표현할 수 있습니다. 값을 지정하지 않으면 "[#] item(s) selected"으로 적용됩니다.

readonlycolumn

칼럼값에 따라 선택할 수 없는 상태를 설정합니다. readonlycolumn에서 선택할 수 없게 설정하더라도 전체 개수에는 포함됩니다.

예제 구현 방법

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

MultiCombo 컴포넌트에서 "[*]"은 전체 아이템 개수, "[#]"은 선택한 아이템 개수로 바뀌어 표시됩니다.

innerdataset: dsCounttextformat
codecolumn: code
datacolumn: code

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

edittype 속성값이 "count"일 때 스타일 설정하기

MultiCombo 컴포넌트의 edittype 속성값이 "count"인 경우 구조도를 보면 선택한 아이템 정보를 표시하는 multicombotext와 검색어를 입력하는 multicomboedit, 그리고 dropbutton으로 구성됩니다. 하지만 type 속성값에 따라 화면에 표시되는 컨트롤이 달라집니다.

type 속성값이 "dropdown"인 경우에는 multicomboedit는 화면에 표시되지 않습니다(정확하게는 multicomboedit 노드는 생성되지만 height가 0으로 설정되어 표시되지 않습니다).

type 속성값이 "dropdown"이 아닌 경우에는 multicombotext와 multicomboedit 사이에 구분을 해주는 것이 깔끔하지만 기본 테마에서는 속성값에 따라 스타일을 지정할 수 없어서 구분선이 표시되지 않은 상태로 설정되어 있습니다(기본 테마에 구분선을 추가하면 type 속성값이 "dropdown"인 경우 필요하지 않은 구분선이 표시되기 때문에 속성과 무관하게 기본 디자인을 유지하기 위한 선택입니다).

때문에 필요한 경우 multicombotext의 border를 클래스 선택자로 추가하고 컴포넌트 속성에 따라 cssclass 속성값을 반영하는 방법을 안내합니다.

예제

dropdown 체크박스를 체크 상태로 변경하면 type 속성값을 "dropdown"으로 변경하고 cssclass 속성을 사용하지 않도록 변경합니다.

sample_multicombo_04.xfdl

예제에서 사용한 핵심 기능

edittype

MultiCombo 컴포넌트의 edittype 속성값을 "count"로 설정하면 type 속성값에 따라 검색어 입력 영역이 표시되거나 표시되지 않습니다.

예제 구현 방법

multicombotext와 multicomboedit 사이에 구분하기 위해 bottom 영역만 border를 설정합니다.

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

사용자가 체크박스를 체크 상태로 변경하면 type 속성값을 "dropdown"으로 변경하고 기본 테마 설정을 따라가도록 합니다. 체크를 해제하면 type 속성값을 "search"로 변경하고 클래스 선택자 설정값을 적용하도록 합니다.

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");	
	}
};