Grid 소개

Grid는 데이터를 격자 모양의 테이블 형태로 표현하는 컴포넌트로 데이터를 질서 있게 나열하고자 할 때 사용합니다. 단순하게 데이터를 보여주거나 내부적으로 연산을 처리할 수도 있으며 사용자가 원하는 형식으로 모양을 변경하여 보여줄 수 있습니다.

Grid는 head, body, summary라는 3개의 밴드(band) 영역으로 구성되며, 각 밴드는 셀(cell)이라는 기본 단위로 구성됩니다.

• head 밴드: Grid의 상단에 위치하며 주로 칼럼 명을 표시하는 용도로 사용합니다.

• body 밴드: 바인딩된 데이터가 표시되는 영역입니다.

• summary 밴드: Grid의 하단에 위치하며 합계, 평균, 최고값, 최소값 등 연산한 결과를 표시하는 용도로 사용합니다.

셀은 Grid를 구성하는 오브젝트중 하나로 Grid와 별도의 속성을 갖습니다. Dataset의 칼럼을 바인딩해 사용할 수도 있고, 셀의 displaytype, edittype 속성을 설정하면 Button, Combo, CheckBox, Image, ProgressBar, Edit 등의 컴포넌트 형태로 표현하거나 트리(tree) 형태로도 표현할 수 있습니다.

Grid는 데이터를 시각적으로 표현하기 위한 형태를 제공할 뿐이며 Grid 자체는 데이터를 갖지 않습니다. 따라서 데이터를 Grid로 표현하려면 형태를 제공하는 Grid와 데이터 정보를 갖는 Dataset을 연결해주는 바인딩 작업이 반드시 필요합니다.

Dataset은 눈에 보이지 않는 오브젝트로 데이터로 구성된 집합입니다. Dataset은 데이터만을 가지고 있으므로 그 자체만으로는 의미가 없고 Grid와 같은 UI 컴포넌트와 함께 사용해야 합니다.

Dataset과 바인딩에 관한 자세한 설명은 Dataset을 참조하시기 바랍니다.

사용 예

다음은 Grid를 사용한 예입니다. Grid를 사용하면 복잡하고 많은 데이터 정보를 사용자에게 일목요연하게 전달할 수 있습니다.

Grid 만들기

툴바에서 Grid 를 선택한 후, Form 위에 적당한 크기로 드래그하여 생성합니다.

QuickView(Ctrl + F6)를 실행하여 결과를 확인합니다.

Grid에 표시할 데이터가 없으므로 아무것도 표시되지 않습니다. Grid의 모양을 확인하려면 border 속성을 설정하여 테두리를 만들어줍니다.

Grid에 Dataset 바인딩하기

Grid는 형태가 Dataset과 논리적으로 같은 컴포넌트입니다. 따라서 Grid는 Dataset과 완전히 맵핑되는데 이런 식으로 Dataset과 컴포넌트가 1대1로 맵핑되는 바인딩을 풀 바인딩(full binding)이라고 합니다. 여러 가지 컴포넌트 중 오직 Grid만이 Dataset과 풀 바인딩됩니다.

Grid에 Dataset이 바인딩된 경우에는 Grid의 동작이 Dataset에 영향을 미치게 됩니다. 예를 들어 바인딩된 Grid에서 로우나 셀의 포커스를 이동하는 경우 Dataset의 rowposition도 같이 변경됩니다.

예제

다음은 Grid 컴포넌트에 Name, Address, Company, Department, Salary 정보를 갖는 Dataset을 바인딩한 예입니다.

sample_grid_02.xfdl

예제에서 사용한 핵심 기능

binddataset

Grid에 바인딩할 DataSet의 ID를 설정하는 속성입니다.

예제 구현 방법

툴바에서 Grid 를 선택한 후, Form위에 적당한 크기로 드래그하여 배치합니다.

Grid에 출력할 데이터 정보를 갖는 Dataset을 생성합니다.

1. 툴바에서 Dataset 을 선택한 후, Form 위 적당한 공간에 클릭하여 Dataset을 생성합니다.

2. 생성한 Dataset에 데이터를 입력합니다. Invisible Objects 영역에 있는 Dataset00을 더블 클릭하면 Dataset 편집기가 뜨는데 Columns과 Rows에 다음과 같이 입력합니다.

Dataset을 Grid 컴포넌트에 바인딩합니다.

Invisible Objects 영역에 있는 Dataset00을 Form에 생성한 Grid 컴포넌트로 드래그 앤 드롭하면 바인딩이 완료됩니다.

Grid에 Dataset이 성공적으로 바인딩됐는지 QuickView(Ctrl + F6)로 확인합니다.

예제는 Grid에 표현되는 데이터 목록이 잘려 보이지 않도록 Grid의 속성을 설정하였기 때문에 사용자의 결과와 달라 보일 수 있습니다.

조건에 맞는 레코드 필터링하기

Grid에서 출력되는 여러 레코드 중 원하는 레코드만 보고 싶은 경우에는 filter 메소드를 사용합니다. 원하는 조건 표현식(Conditional Expression)을 작성하여 filter 메소드로 호출하면 Grid에 조건에 맞는 레코드만 표시해 볼 수 있습니다.

filter 메소드를 수행한 후 필터링 조건을 변경하여 다시 호출하면 이전에 적용되어 있던 필터링 조건은 무시되고 새로운 필터링 조건이 적용됩니다.

필터링 기능은 filterstr 속성을 사용해서도 구현할 수 있습니다. filterstr 속성은 filter 메소드와 같은 기능을 합니다.

예제

다음은 Grid에서 출력하길 원하는 데이터를 조건 표현식으로 필터링하는 예제입니다.

사용자는 조건 표현식을 입력하고 Filter 버튼을 눌러 Grid에서 필터링된 결과를 확인합니다. Cancel 버튼을 누르면 필터링이 제거되고 원본 데이터로 돌아갑니다.

sample_grid_03.xfdl

조건 표현식은 [Column 명][기호][값]의 형태로 작성합니다. 예를 들어,

Name == "James"는 이름이 James인 레코드를 필터링합니다.
Salary < 20000는 급여가 20,000보다 작은 레코드를 필터링합니다.

또한, 필요에 따라 여러 가지 조건을 복합적으로 작성할 수도 있습니다.

Department == "Sales" || Department == "Consulting"은 부서가 Sales 혹은 Consulting인 레코드를 필터링합니다.
Company=="hangul" && Salary < 10000는 회사가 hangul이면서 급여가 10000 미만인 레코드를 필터링합니다.

예제에서 사용한 핵심 기능

filter

Dataset에서 조건에 만족하는 레코드만 보이게 필터링하는 메소드입니다.

this.Dataset00.filter();
this.Dataset00.filter("");
this.Dataset00.filter("dept_cd == 'A1'");
this.Dataset00.filter("amount > 1000 && model_cd = 'A-1'");
this.Dataset00.filter("amount > 1000 || amount < 50 ");

예제 구현 방법

툴바에서 Grid , Static , Edit , Button 컴포넌트를 예제의 그림과 같이 적절히 배치합니다. 컴포넌트를 선택한 후 Form 위에 놓고 그대로 클릭하면 기본 크기로 생성됩니다.

Grid에 출력할 데이터 아이템 목록을 가진 Dataset을 생성합니다.

1. 툴바에서 Dataset 을 선택한 후, Form 위 적당한 공간에 클릭하여 Dataset을 생성합니다.

2. 생성한 Dataset에 데이터 아이템 목록을 입력합니다. Invisible Objects 영역에 있는 Dataset00을 더블 클릭하면 Dataset 편집기가 뜨는데 칼럼과 로우를 아래 그림과 같이 입력합니다.

Dataset을 Grid 컴포넌트에 바인딩합니다.

Invisible Objects 영역에 있는 Dataset00을 Form에 생성한 Grid 컴포넌트로 드래그 앤 드롭하면 바인딩이 완료됩니다.

Edit 컴포넌트의 value 속성에 아래와 같이 기본 조건식을 설정합니다. 조건식은 Company 칼럼이 "1dollar"이고 Salary 칼럼이 "2000" 이상인 레코드를 의미합니다. 샘플 동작을 위한 조건식으로 임의로 변경하여도 상관없습니다.

Company == "1dollar" && Salary > 2000

• filter 버튼의 onclick 이벤트 함수

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var strCondExpr = this.Edit00.value;
	
	this.Dataset00.filter(strCondExpr);		
};

• cancel 버튼의 onclick 이벤트 함수

this.Button01_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Dataset00.filter("");	
};

Grid에 Dataset이 성공적으로 바인딩됐는지 QuickView(Ctrl + F6)로 확인합니다.

Conditional Expression에 조건식을 입력하고 filter 버튼을 눌러 조건에 맞는 레코드만 필터링되는지 확인합니다. cancel 버튼을 누르면 조건식 필터링이 해제되어 원래 상태로 돌아옵니다.

본 예제는 Grid에 표현되는 데이터 목록이 잘려 보이지 않도록 Grid의 속성을 설정하였기 때문에 사용자의 결과와 달라 보일 수 있습니다.

조건에 맞는 특정 레코드 검색하기

Grid에서는 findRow, findRowExpr 메소드를 사용하여 검색할 범위를 지정하고 그 안에서 조건에 맞는 레코드를 검색할 수 있습니다.

예제

아래는 Grid에서 findRow, findRowExpr 메소드를 사용하여 원하는 데이터를 검색하는 예제입니다. findRow와 findRowExpr 메소드는 검색한 레코드의 인덱스를 반환하는데 예제에서는 사용자가 바로 알아볼 수 있도록 해당 인덱스로 포커스를 이동시킵니다.

• findRow 기능

사용자가 1에서 칼럼을 선택하고, 2에 조건 값을 기술한 후 3findRow 버튼을 누릅니다. 조건에 맞는 로우로 포커스가 이동합니다.

• findRowExpr 기능

사용자가 4에 조건 표현식을 기술하고 5findRowExpr 버튼을 누릅니다. 조건 표현식에 맞는 레코드로 포커스가 이동합니다.

sample_grid_04.xfdl

예제에서 사용한 핵심 기능

findRow

DataSet에서 지정한 칼럼에서 입력된 값과 일치하는 데이터를 갖는 첫 번째 로우의 인덱스를 반환하는 메소드입니다.

var nRow;
nRow = this.Dataset00.findRow( "column00", "100");
nRow = this.Dataset00.findRow( "column00", "100", 10);
nRow = this.Dataset00.findRow( "column00", "100", 10, 10000);

findRowExpr

특정 칼럼의 값 중에서 주어진 조건표현식을 만족하는 첫번째 로우의 인덱스를 반환하는 메소드입니다.

var nRow;
nRow = this.Dataset00.findRowExpr("dept_cd == 'A2'");
nRow = this.Dataset00.findRowExpr("dept_cd == 'A2'", 2);
nRow = this.Dataset00.findRowExpr("dept_cd == 'A2'", 2, 10);
nRow = this.Dataset00.findRowExpr("dept_cd == 'A2' && pos_cd > '03'", 2, 10);

예제 구현 방법

툴바에서 Grid , Combo , Edit , Button 컴포넌트를 예제의 그림과 같이 적절히 배치합니다. 컴포넌트를 선택한 후 Form 위에 놓고 그대로 클릭하면 기본 크기로 생성됩니다.

생성한 컴포넌트의 ID를 다음과 같이 변경합니다.

Grid에 출력할 데이터 아이템 목록을 가진 Dataset을 생성합니다.

1. 툴바에서 Dataset 을 선택한 후, Form 위 적당한 공간에 클릭하여 Dataset을 생성합니다.

2. 생성한 Dataset에 데이터 아이템 목록을 입력합니다. Invisible Objects 영역에 있는 Dataset00을 더블 클릭하면 Dataset Editor가 뜨는데 칼럼과 로우를 다음 그림과 같이 입력합니다.

Dataset을 Grid 컴포넌트에 바인딩합니다.

Invisible Objects 영역에 있는 Dataset00을 Form에 생성한 Grid 컴포넌트로 드래그 앤 드롭하면 바인딩이 완료됩니다.

• Combo 메뉴 만들기

Combo를 선택한 후 Properties 창에서 innerdataset 속성 옆의 [...] 버튼을 클릭합니다. InnerDataset 편집기에 다음과 같이 입력한 후 [OK] 버튼을 누르면 바인딩이 완료됩니다.

• findRow 버튼의 onclick 이벤트 함수

this.btn_findRow_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var strCategory = this.combo_category.text;
	var strKeyword = this.edit_keyword.value;
	
	var nRow = this.Dataset00.findRow(strCategory, strKeyword);
	
	this.Grid00.selectRow(nRow, true);
	
	if(nRow == -1)
		alert("\"" + strKeyword + "\" not found.");	
};

Edit 컴포넌트의 value 속성에 다음과 같이 조건식을 설정합니다. 조건식은 Company 칼럼이 '1dollar'이고 Salary 칼럼이 '3000' 이하인 레코드를 의미하며 사용자가 임의로 변경하여도 상관없습니다.

Company == '1dollar' && Salary < 3000

• findRowExpr 버튼의 onclick 이벤트 함수

this.btn_findRowExpr_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var strKeyword = this.edit_condexpr.value;
	
	var nRow = this.Dataset00.findRowExpr(strKeyword);
	
	this.Grid00.selectRow(nRow, true);
	
	if(nRow == -1)
		alert("\"" + strKeyword + "\" not found.");		
};

Grid에 Dataset이 성공적으로 바인딩됐는지 QuickView(Ctrl + F6)로 확인합니다.

findRow 버튼을 눌러 조건에 맞는 레코드를 찾아 포커스가 이동하는지 확인합니다. Combo에서 칼럼을 선택하고 검색 조건을 입력하여 findRow 기능을 확인합니다.

findRowExpr 버튼을 눌러 조건에 맞는 레코드를 찾아 포커스가 이동하는지 확인합니다. 조건식을 변경하여 findRowExpr 기능을 확인합니다.

본 예제는 Grid에 표현되는 데이터 목록이 잘려 보이지 않도록 Grid의 속성을 설정하였기 때문에 사용자의 결과와 달라 보일 수 있습니다.

레코드 추가/삭제하기

Grid에서는 addRow, deleteRow 메소드를 사용하여 레코드를 추가하거나 삭제할 수 있습니다.

예제

새로운 로우를 추가하려면 addRow 버튼을 누르고, 로우를 삭제하려면 deleteRow 버튼을 누릅니다.

addRow는 마지막 로우의 뒤에 새로운 로우를 추가합니다. deleteRow는 현재 선택된 로우를 삭제합니다.

sample_grid_05.xfdl

예제에서 사용한 핵심 기능

addRow

Dataset의 마지막 로우 뒤에 새로운 로우를 추가하는 메소드입니다.

deleteRow

Dataset에서 지정한 로우를 삭제하는 메소드입니다.

예제 구현 방법

툴바에서 Grid , Button 컴포넌트를 예제의 그림과 같이 적절히 배치합니다. 컴포넌트를 선택한 후 Form 위에 놓고 그대로 클릭하면 기본 크기로 생성됩니다.

Grid에 출력할 데이터 아이템 목록을 가진 Dataset을 생성합니다.

1. 툴바에서 Dataset 을 선택한 후, Form 위 적당한 공간에 클릭하여 Dataset을 생성합니다.

2. 생성한 Dataset에 데이터 아이템 목록을 입력합니다. Invisible Objects 영역에 있는 Dataset00을 더블 클릭하면 Dataset 편집기가 뜨는데 칼럼과 로우를 다음 그림과 같이 입력합니다.

Dataset을 Grid 컴포넌트에 바인딩합니다.

Invisible Objects 영역에 있는 Dataset00을 Form에 생성한 Grid 컴포넌트로 드래그 앤 드롭하면 바인딩이 완료됩니다.

• addRow 버튼의 onclick 이벤트 함수

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Dataset00.addRow();
};

• deleteRow 버튼의 onclick 이벤트 함수

this.Button01_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Dataset00.deleteRow(this.Dataset00.rowposition);
};

QuickView(Ctrl + F6)를 실행하여 결과를 확인합니다.

addRow 버튼을 눌러 Grid의 가장 밑에 새로운 로우가 생성되는지 확인합니다. 버튼을 누른 만큼 로우가 생성됩니다.

deleteRow 버튼을 눌러 현재 선택된 로우가 삭제되는지 확인합니다.

여러 레코드 선택하기

Grid의 selecttype 속성을 사용하여 Grid에서 데이터를 선택하는 방법을 설정할 수 있습니다.

데이터를 선택하는 방법으로는 row, multirow, cell, area, multiarea가 있습니다. row는 한 줄을 선택할 때, multirow는 여러 줄을 선택할 때, 그리고 cell은 하나의 Cell을 선택할 때 사용합니다. 그리고 area는 영역으로 선택할 때, multiarea는 영역을 여럿 선택할 때 사용합니다.

예제

아래는 Select type의 설정에 따라 Grid에서 데이터를 선택하는 동작을 보여주는 예제입니다.

sample_grid_06.xfdl

Select type 콤보에서 원하는 선택 타입을 설정한 후 Grid에서 로우 혹은 셀을 선택합니다. 다중 선택을 할 경우에는 마우스를 클릭 후 드래그하거나 키보드의 Ctrl 키와 Shift 키를 누른 상태에서 마우스를 클릭합니다.

예제에서 사용한 핵심 기능

selecttype

Grid에서 사용자가 Row 혹은 Cell을 선택하는 방법을 설정하는 속성입니다.

posttext

새로 변경된 아이템의 text 값을 갖는 속성입니다.

예제 구현 방법

툴바에서 Grid , Static , Combo 컴포넌트를 예제의 그림과 같이 적절히 배치합니다. 컴포넌트를 선택한 후 Form 위에 놓고 그대로 클릭하면 기본 크기로 생성됩니다.

Grid에 출력할 데이터 아이템 목록을 가진 Dataset을 생성합니다.

1. 툴바에서 Dataset 을 선택한 후, Form 위 적당한 공간에 클릭하여 Dataset을 생성합니다.

2. 생성한 Dataset에 데이터 아이템 목록을 입력합니다. Invisible Objects 영역에 있는 Dataset00을 더블 클릭하면 Dataset 편집기가 뜨는데 칼럼과 로우를 다음 그림과 같이 입력합니다.

Dataset을 Grid 컴포넌트에 바인딩합니다.

Invisible Objects 영역에 있는 Dataset00을 Form에 생성한 Grid 컴포넌트로 드래그 앤 드롭하면 바인딩이 완료됩니다.

1. Combo 메뉴 만들기

Combo를 선택한 후 Properties 창에서 innerdataset 속성 옆의 [...] 버튼을 클릭합니다. InnerDataset 편집기에 다음과 같이 입력한 후 [OK] 버튼을 누르면 바인딩이 완료됩니다.

2. Combo에 이벤트 추가하기

Combo를 선택한 후 onitemchanged 이벤트 함수를 아래와 같이 추가합니다.

this.combo_selecttype_onitemchanged = function(obj:nexacro.Combo,e:nexacro.ItemChangeEventInfo)
{
	var strSelectType = e.posttext;
	
	this.Grid00.set_selecttype(strSelectType);
	
};

QuickView(Ctrl + F6)를 실행하여 결과를 확인합니다.

• row를 선택한 후 Grid에서 하나의 로우가 선택되는지 확인합니다.

• multirow를 선택한 후 Grid에서 여러 개의 로우가 선택되는지 확인합니다. 마우스 드래그나 Ctrl 키, Shift 키를 사용하여 여러 로우가 선택되는지 확인합니다.

• cell을 선택한 후 Grid에서 하나의 셀이 선택되는지 확인합니다.

• area를 선택한 후 Grid에서 마우스 드래그를 통한 영역 선택이 되는지 확인합니다.

• multiarea를 선택한 후 Grid에서 마우스 드래그를 통한 영역 선택이 되는지 확인합니다. Ctrl 키, Shift 키를 사용하여 여러 영역이 추가로 선택되는지 확인합니다.

여러 레코드 삭제하기

Grid에서 getSelectedDatasetRows 메소드를 사용하면 현재 선택된 레코드의 정보를 얻을 수 있고 deleteMultiRows 메소드를 사용하면 여러 개의 레코드를 한 번에 삭제할 수 있습니다.

예제

아래는 사용자가 Grid의 레코드를 선택하고 Delete 버튼을 누르면 선택된 레코드가 모두 삭제되는 예제입니다.

sample_grid_07.xfdl

예제에서 사용한 핵심 기능

selecttype

Grid에서 사용자가 Row 혹은 Cell을 선택하는 방법을 설정하는 속성입니다.

getSelectedDatasetRows

Grid에서 선택된 Row에 해당하는 Dataset의 Row 인덱스를 배열로 반환하는 메소드입니다.

deleteMultiRows

배열로 된 Row 목록을 입력받아 해당 Row를 삭제하는 메소드입니다.

예제 구현 방법

툴바에서 Grid , Button 컴포넌트를 예제의 그림과 같이 적절히 배치합니다. 컴포넌트를 선택한 후 Form 위에 놓고 그대로 클릭하면 기본 크기로 생성됩니다.

Grid에 출력할 데이터 아이템 목록을 가진 Dataset을 생성합니다.

1. 툴바에서 Dataset 을 선택한 후, Form 위 적당한 공간에 클릭하여 Dataset을 생성합니다.

2. 생성한 Dataset에 데이터 아이템 목록을 입력합니다. Invisible Objects 영역에 있는 Dataset00을 더블 클릭하면 Dataset 편집기가 뜨는데 칼럼과 로우를 다음 그림과 같이 입력합니다.

Dataset을 Grid 컴포넌트에 바인딩합니다.

Invisible Objects 영역에 있는 Dataset00을 Form에 생성한 Grid 컴포넌트로 드래그 앤 드롭하면 바인딩이 완료됩니다.

Grid를 다중 선택이 가능하도록 selecttype 속성을 'multirow'로 설정합니다.

Button을 선택한 후 onclick 이벤트 함수를 다음과 같이 추가합니다.

• Delete 버튼의 onclick 이벤트 함수

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var arrSelectedRow = this.Grid00.getSelectedDatasetRows();
	
	this.Dataset00.deleteMultiRows(arrSelectedRow);	
};

QuickView(Ctrl + F6)를 실행하여 결과를 확인합니다.

Grid에서 하나 혹은 여러 개의 로우를 선택한 후 Delete 버튼을 눌러 선택된 로우가 삭제되는지 확인합니다.

다른 데이터셋의 레코드 추가하기

Dataset 객체의 appendData 메소드를 사용하면 다른 Dataset의 데이터를 현재 사용 중인 Dataset의 끝에 추가할 수 있습니다. 인수의 설정에 따라 데이터가 추가되는 방식도 설정할 수 있습니다.

예제

아래는 1Dataset에 다른 2Dataset을 추가하는 예제입니다.

예제의 기능은 레코드가 추가되는 방식에 따라 Append dataset과 Append dataset with column name 두 가지로 나뉩니다. 3Append dataset은 칼럼 이름에 상관없이 무조건 앞의 칼럼부터 순서대로 데이터를 추가합니다. 4Append dataset with column name은 칼럼 이름이 같은 칼럼에만 데이터를 추가합니다.

• Append dataset 버튼을 클릭하면 1Dataset에 2Dataset의 모든 데이터가 추가됩니다. 데이터는 빨간 박스 5와 같이 가장 앞의 Name 칼럼부터 순서대로 추가됩니다. Salary 칼럼의 데이터가 NaN으로 표시되는 이유는 추가된 데이터(Mail 칼럼)가 숫자가 아닌 문자열이기 때문입니다.

• Append dataset with column name 버튼을 클릭하면 2Dataset의 데이터 중에서 1Dataset의 칼럼 이름과 일치되는 Name과 Salary 칼럼의 데이터만을 5와 같이 추가합니다.

sample_grid_08.xfdl

예제에서 사용한 핵심 기능

appendData

현재 Dataset의 마지막 Row 다음에 지정한 Dataset의 데이터를 추가하는 메소드입니다. 새로 추가된 데이터의 Row 개수를 반환합니다.

예제 구현 방법

툴바에서 Grid , Button 컴포넌트를 예제의 그림과 같이 적절히 배치합니다. 컴포넌트를 선택한 후 Form 위에 놓고 그대로 클릭하면 기본 크기로 생성됩니다.

Grid에 출력할 데이터 아이템 목록을 가진 Dataset을 생성합니다.

1. 툴바에서 Dataset 을 선택한 후, Form 위 적당한 공간에 클릭하여 Dataset을 생성합니다.

2. 생성한 Dataset에 데이터 아이템 목록을 입력합니다. Invisible Objects 영역에 있는 Dataset00을 더블 클릭하면 Dataset Editor가 뜨는데 Columns와 Rows에 아래 그림과 같이 입력합니다.

예제의 1Grid에 바인딩할 Dataset

예제의 2Grid에 바인딩할 Dataset

Dataset을 Grid 컴포넌트에 바인딩합니다.

Invisible Objects 영역에 있는 2개의 Dataset을 각각 Form에 생성한 Grid 컴포넌트로 드래그 앤 드롭하면 바인딩이 완료됩니다.

• Append dataset 버튼의 onclick 이벤트 함수

this.btn_appendData_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var nRowCnt = this.Dataset00.appendData(this.Dataset01);
};

• Append dataset with column name 버튼의 onclick 이벤트 함수

this.btn_appendDataCol_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var nRowCnt = this.Dataset00.appendData(this.Dataset01, true);		
};

QuickView(Ctrl + F6)를 실행하여 결과를 확인합니다.

Append dataset 버튼을 눌러 2Grid의 데이터가 1Grid에 모두 추가되는지 확인합니다.

Append dataset with column name 버튼을 눌러 2Grid의 데이터 중에 1Grid의 칼럼 이름과 같은 데이터만 추가되는지 확인합니다. 예제에서 이름이 같은 칼럼은 Name과 Salary입니다. 그 외의 데이터는 추가되지 않습니다.

레코드 개수 구하기

Grid에 출력된 로우의 개수를 구할 때는 Dataset의 getRowCount 메소드를 사용합니다.

예제

[Get row count] 버튼을 누르면 현재 Grid의 총 로우 개수를 구해 Edit 컴포넌트에 표시합니다.

sample_grid_09.xfdl

예제에서 사용한 핵심 기능

getRowCount

Dataset에서 전체 Row의 개수를 구하는 메소드입니다.

예제 구현 방법

툴바에서 Grid , Button 컴포넌트를 예제의 그림과 같이 적절히 배치합니다. 컴포넌트를 선택한 후 Form 위에 놓고 그대로 클릭하면 기본 크기로 생성됩니다.

Grid에 출력할 데이터 아이템 목록을 가진 Dataset을 생성합니다.

1. 툴바에서 Dataset 을 선택한 후, Form 위 적당한 공간에 클릭하여 Dataset을 생성합니다.

2. 생성한 Dataset에 데이터 아이템 목록을 입력합니다. Invisible Objects 영역에 있는 Dataset00을 더블 클릭하면 Dataset Editor가 뜨는데 Columns와 Rows에 아래 그림과 같이 입력합니다.

Dataset을 Grid 컴포넌트에 바인딩합니다.

Invisible Objects 영역에 있는 Dataset00을 Form에 생성한 Grid 컴포넌트로 드래그 앤 드롭하면 바인딩이 완료됩니다.

• Get row count 버튼의 onclick 이벤트 함수

this.btn_getRowCount_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var intRowCnt = this.Dataset00.getRowCount();
	this.Edit00.set_value(intRowCnt);
};

QuickView(Ctrl + F6)를 실행하여 결과를 확인합니다.

Get row count 버튼을 눌러 구해진 Row 개수와 Grid에 보이는 전체 Row 개수를 비교하여 일치하는지 확인합니다.

변경된 데이터가 있는지 확인하기

트랜잭션은 반드시 필요하지만 시스템의 성능을 떨어뜨리는 요소이기도 합니다. 따라서 트랜잭션 횟수를 최소한으로 줄이는 것이 시스템 개발 시 중요합니다.

getRowType 메소드를 사용하면 데이터가 변경되었는지 확인할 수 있어 불필요한 트랜잭션을 수행하지 않도록 할 수 있습니다. 또한 현재 데이터가 추가, 삭제되었는지 등의 상태도 체크할 수 있어 개발시 유용하게 사용할 수 있습니다.

예제

아래는 Grid의 데이터가 변경됐는지 getRowType 메소드로 확인하는 예제입니다.

Grid의 Cell을 수정한 후 Get row type 버튼을 누르면 어떤 Row가 수정됐는지 확인할 수 있습니다. 단, 데이터를 수정했다가 다시 원래 값으로 되돌리면 수정되지 않은 것으로 간주합니다. Cell을 수정하려면 Cell을 먼저 선택한 후 다시 클릭합니다.

sample_grid_10.xfdl

예제에서 사용한 핵심 기능

getRowType

Dataset에서 지정된 Row의 상태를 반환하는 메소드입니다.

getRowCount

Dataset에서 전체 Row의 개수를 구하는 메소드입니다.

edittype

Grid의 Cell에서 편집창의 형식을 설정하는 속성입니다.

예제 구현 방법

툴바에서 Grid, Button, TextArea 컴포넌트를 예제의 그림과 같이 적절히 배치합니다. 컴포넌트를 선택한 후 Form 위에 놓고 그대로 클릭하면 기본 크기로 생성됩니다.

Grid에 출력할 데이터 아이템 목록을 가진 Dataset을 생성합니다.

1. 툴바에서 Dataset 을 선택한 후, Form 위 적당한 공간에 클릭하여 Dataset을 생성합니다.

2. 생성한 Dataset에 데이터 아이템 목록을 입력합니다. Invisible Objects 영역에 있는 Dataset00을 더블 클릭하면 Dataset Editor가 뜨는데 Columns와 Rows에 아래 그림과 같이 입력합니다.

Dataset을 Grid 컴포넌트에 바인딩합니다.

Invisible Objects 영역에 있는 Dataset00을 Form에 생성한 Grid 컴포넌트로 드래그 앤 드롭하면 바인딩이 완료됩니다.

Grid의 selecttype 속성은 "cell"로 설정하고, Grid 컴포넌트를 더블클릭해 Grid Contents Editor를 실행하고 각 Cell의 edittype 속성을 "normal"로 설정합니다.

Button을 선택한 후 onclick 이벤트 함수를 아래와 같이 추가합니다.

• Get row type 버튼의 onclick 이벤트 함수

this.btn_getRowType_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var bChangedData = false;
	var nRowCnt = this.Dataset00.getRowCount();
	
	var strResult = "";
	
	for(var i=0; i<nRowCnt; i++)
	{

		switch( this.Dataset00.getRowType(i) )
		{
			case 0:
				strResult += "Row [" + i +"] is not exist.\n";
				break;
			case 1:
			case 16:
				strResult += "Row [" + i +"] is not changed.\n";
				break;
			case 2: 
			case 4:
			case 8:
				strResult += "Row [" + i +"] is changed.\n";
				bChangedData = true;
				break;
			default:
				strResult += "Row [" + i +"] Unknown status\n";				
		}

	}
	
	if(bChangedData == true)
		strResult += "\nGrid is changed.";
	else
		strResult += "\nGrid is not changed.";
		
	this.TextArea00.set_value(strResult);
	
};

QuickView(Ctrl + F6)를 실행하여 결과를 확인합니다.

Get row type 버튼을 눌러 Grid에서 변경된 데이터가 있는지 팝업창에서 확인합니다.

변경 내용 데이터셋에 반영하기 / 되돌리기

Grid에서 데이터를 수정할 때에는 수정 내용을 실제로 Dataset에 반영하기 위한 과정이 필요합니다. 이는 불필요한 트랜잭션의 발생을 줄여주며 데이터 수정이 잘못되었을 경우에 복구할 수 있는 안전장치 역할을 합니다.

Dataset의 applyChange 메소드는 그리드에서 변경된 내용을 데이터셋에 반영합니다. applyChange 메소드는 데이터 수정으로 인해 변경된 Grid의 상태를 ROWTYPE_NORMAL 상태로 되돌려 수정된 내용을 확정합니다.

Dataset의 reset 메소드는 Grid의 데이터를 마지막 저장 상태로 되돌립니다. 다시 말해 데이터를 수정하기 전 상태나 applyChange를 마지막으로 수행했던 상태로 되돌립니다.

예제

아래는 Grid의 데이터를 수정한 후 Dataset에 반영하는 applyChange 기능과 Dataset에 반영하기 전의 상태로 데이터를 복구하는 Reset 기능을 보여주는 예제입니다.

sample_grid_11.xfdl

Grid의 데이터를 수정한 후 Reset 버튼을 클릭하면 수정하기 전 상태로 복구됩니다.

Grid의 데이터를 수정한 후 applyChange 버튼을 클릭하면 수정 내용이 Dataset에 반영됩니다. 한번 Dataset에 반영되면 다시 Reset 버튼을 눌러도 이전 상태로 복구할 수 없습니다.

예제에서 사용한 핵심 기능

applyChange

Dataset의 모든 Row 타입을 ROWTYPE_NORMAL로 변경하여 수정된 데이터를 Dataset에 최종 반영합니다.

Reset

Dataset의 데이터를 마지막 저장 상태로 복구하는 메소드입니다.

예제 구현 방법

툴바에서 Grid , Button 컴포넌트를 예제의 그림과 같이 적절히 배치합니다. 컴포넌트를 선택한 후 Form 위에 놓고 그대로 클릭하면 기본 크기로 생성됩니다.

Grid에 출력할 데이터 아이템 목록을 가진 Dataset을 생성합니다.

1. 툴바에서 Dataset 을 선택한 후, Form 위 적당한 공간에 클릭하여 Dataset을 생성합니다.

2. 생성한 Dataset에 데이터 아이템 목록을 입력합니다. Invisible Objects 영역에 있는 Dataset00을 더블 클릭하면 Dataset Editor가 뜨는데 Columns와 Rows에 아래 그림과 같이 입력합니다.

Dataset을 Grid 컴포넌트에 바인딩합니다.

Invisible Objects 영역에 있는 Dataset00을 Form에 생성한 Grid 컴포넌트로 드래그 앤 드롭하면 바인딩이 완료됩니다.

• applyChange 버튼의 onclick 이벤트 함수

this.btn_apply_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Dataset00.applyChange();
};

• Reset 버튼의 onclick 이벤트 함수

this.btn_reset_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Dataset00.reset();
};

QuickView(Ctrl + F6)를 실행하여 결과를 확인합니다.

Grid의 데이터를 수정한 후 Reset 버튼을 눌러 데이터가 초기 상태로 복구되는지 확인합니다.

Grid의 데이터를 수정한 후 applyChange 버튼을 눌러 Dataset에 반영하고, 다시 데이터를 수정한 후 Reset 버튼을 눌러 applyChange 버튼을 눌렀던 상태로 복구되는지 확인합니다.

텍스트의 길이가 긴 경우 툴팁(tooltip)으로 보여주기

텍스트 데이터의 크기가 Grid의 각 Cell 넓이보다 클 때 모든 내용을 표시하지 못하는 문제가 발생합니다. 이는 화면 상의 제약 때문에 Grid와 Cell의 크기를 충분히 크게 확보하지 못했거나 혹은 예상치 못한 텍스트 데이터의 크기 때문일 수 있습니다. 이런 경우에 잘려 보이는 텍스트 내용을 툴팁을 사용해 모두 표시해 줄 수 있습니다.

예제

다음은 텍스트 데이터의 크기가 커서 Cell에서 잘려 보이는 부분을 툴팁을 이용해 표시해주는 Grid 예제입니다.

sample_grid_36.xfdl

텍스트 크기가 셀 영역을 넘어가는 Address, Department, Salary 칼럼에만 툴팁 기능을 적용하였습니다. 마우스 커서를 칼럼 위에 올리면 Cell에 표시된 텍스트 내용이 툴팁에으로도 표시되는 것을 확인할 수 있습니다.

예제에서 사용한 핵심 기능

tooltiptext

Grid의 Cell 영역에 마우스 커서를 올려 놓았을 때 표시되는 풍선 도움말을 설정하는 속성입니다.

예제 구현 방법

툴바에서 Grid 컴포넌트를 예제의 그림과 같이 적절히 배치합니다.

Grid에 출력할 데이터 아이템 목록을 가진 Dataset을 생성합니다.

1. 툴바에서 Dataset 을 선택한 후, Form 위 적당한 공간에 클릭하여 Dataset을 생성합니다.

2. 생성한 Dataset에 데이터 아이템 목록을 입력합니다. Invisible Objects 영역에 있는 Dataset을 더블 클릭하면 Dataset Editor가 뜨는데 Columns와 Rows에 아래 그림과 같이 입력합니다.

Dataset을 Grid 컴포넌트에 바인딩합니다.

Invisible Objects 영역에 있는 Dataset을 Form에 생성한 Grid 컴포넌트로 드래그 앤 드롭하면 바인딩이 완료됩니다.

Grid Contents Editor를 열어 Address, Salary 칼럼의 Cell을 선택한 후 tooltiptext 속성을 설정합니다. 각 칼럼에 맞게 Dataset을 바인딩합니다. text 속성에 설정된 값과 동일하게 설정하여 툴팁에서도 Cell의 내용이 표시될 수 있도록 합니다.

다음은 Address 칼럼의 Cell에서 tooltiptext 속성을 설정하는 예를 보여줍니다. 마찬가지로 Salary 칼럼도 동일하게 설정합니다.

QuickView(Ctrl + F6)를 실행하여 결과를 확인합니다.

Address, Salary 칼럼에 마우스 커서를 위치시킨 후 해당 Cell의 텍스트 데이터가 툴팁에 표시되는지 확인합니다.

Smart Scroll 기능 사용하기

Grid 컴포넌트는 화면에 표시할 데이터 Row가 많아지면 스크롤바가 표시됩니다. 이런 경우 스크롤바를 움직여서 데이터를 탐색하게 되는데 스크롤바를 움직이면서 화면에 표시되는 데이터를 계속 표시해 주어야 합니다. 브라우저 입장에서도 스크롤바를 움직이는 동안 데이터를 표시해 주는 작업이 부담이 될 수 있고 사용자 입장에서는 스크롤바를 움직이면서 원하는 데이터를 찾기가 쉽지 않습니다.

Smart Scroll 기능은 이런 불편을 어느 정도 해소해 주는 팁 같은 기능입니다. Grid 컴포넌트에 fastvscrolltype 속성값을 설정하면 Smart Scroll 기능을 적용할 수 있습니다.

예제

[Data Loading] 버튼 클릭 시 For 반복문으로 생성한 1,000,000개 데이터를 Dataset 오브젝트에 추가합니다. Combo 컴포넌트에 표시되는 fastvscrolltype 속성값을 변경하면 스크롤바 트랙바를 이동했을때 Smart Scroll 기능이 적용된 것을 확인할 수 있습니다.

sample_grid_39.xfdl

예제에서 사용한 핵심 기능

fastvscrolltype

Smart Scroll 기능 구현 시 어느 위치의 데이터를 보여줄 시 지정합니다. Grid 컴포넌트를 기준으로 첫 번째 Row, 가운데 Row, 표시되는 화면의 마지막 Row 중에서 선택할 수 있으며 두 개 이상의 데이터를 보여주는 "topbottomdisplay", "topcenterbottomdisplay" 속성값을 지원합니다. 스크롤바 트랙바 위치를 따라 데이터를 보여주는 "trackbarfollow" 속성도 사용할 수 있습니다.

예제 구현 방법

Grid, Combo, Button 컴포넌트를 예제 화면과 같이 배치합니다. Combo 컴포넌트의 innerdataset 속성값은 아래와 같이 지정합니다. fastvscrolltype 속성에서 지원하는 속성값입니다.

Dataset 오브젝트를 추가합니다. Columns 속성값만 6개의 칼럼을 추가하고 Rows 속성값은 추가하지 않습니다. 다음 단계에서 For 반복문으로 채워줄 겁니다. Dataset 오브젝트를 선택하고 마우스 드래그앤드롭으로 Grid 컴포넌트에 바인딩해줍니다.

Button 컴포넌트 클릭 시 Dataset에 데이터를 로딩해주는 이벤트를 작성합니다. For 반복문에서 Dataset 오브젝트의 setColumn 메소드를 호출하는 방식입니다. For 반복문을 시작하기 전에 enableevent 속성값을 false로 지정하는데 그렇게 하지 않으면 setColumn 메소드를 호출할 때마다 Grid 컴포넌트에 변경된 데이터에 대한 이벤트가 전달되어 For 반복문 처리속도가 늦어집니다.

For 반복문이 완료되면 enableevent 속성값을 다시 true로 수정합니다. 속성값 변경 시 Dataset 오브젝트의 onrowsetchanged 이벤트가 발생하는데 이때 바인딩된 Grid 컴포넌트에 데이터를 반영하게 됩니다.

this.btnData_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var rIdx;
	this.dsTest.set_enableevent(false);
	for(var i=0;i<1000000;i++)	{
		rIdx = this.dsTest.addRow();
		this.dsTest.setColumn(rIdx, "Column0", i);
		this.dsTest.setColumn(rIdx, "Column1", i);
		this.dsTest.setColumn(rIdx, "Column2", i);
		this.dsTest.setColumn(rIdx, "Column3", i);
		this.dsTest.setColumn(rIdx, "Column4", i);
		this.dsTest.setColumn(rIdx, "Column5", i);
	}
	this.dsTest.set_enableevent(true);
};

Combo 컴포넌트의 아이템 선택 시 Grid 컴포넌트의 fastvscrolltype 속성값을 변경합니다. 속성값 변경 시 바로 Grid 컴포넌트의 Smart Scroll 기능이 동작합니다.

this.cbType_onitemchanged = function(obj:nexacro.Combo,e:nexacro.ItemChangeEventInfo)
{
	this.gridData.set_fastvscrolltype(e.postvalue);
};

QuickView(Ctrl + F6)로 실행한 후 데이터를 로딩하고 Combo 컴포넌트에서 fastvscrolltype 속성값을 바꾸어가며 확인합니다.

속성 지정해서 선택한 셀 테두리선 표현하기

showselection 속성값을 true로 지정하면 선택한 셀 테두리선을 표현할 수 있습니다.

예제

선택한 셀 영역의 테두리선을 표시합니다. 셀 선택이 해제되면 테두리선도 사라집니다. [selectArea] 버튼을 클릭하면 0번째 셀 선택을 추가합니다. [clearSelect] 버튼을 클릭하면 셀 선택 상태를 해제합니다.

아래 예제 이미지는 다음과 같은 방식으로 선택했습니다.

1. Salary 칼럼 첫 번째 항목(15,000) 클릭

2. Ctrl 키를 누른 상태에서 Name 칼럼의 세 번째 항목(Donald) 클릭

3. Shift 키를 누른 상태에서 Company 칼럼의 네 번째 항목(1dollar) 클릭

4. Ctrl 키를 누른 상태에서 Name 칼럼의 여섯 번째 항목(Michael) 클릭

5. Shift 키를 누른 상태에서 Department 칼럼의 일곱 번째 항목(Quality Assurance) 클릭

6. [selectArea] 버튼 클릭

sample_grid_83.xfdl

예제에서 사용한 핵심 기능

showselection

속성값을 true로 지정하면 선택한 셀 영역의 테두리선을 보여줍니다. 테두리선을 표현하기 위한 스타일 속성값이 같이 지정되어 있어야 합니다.

clearSelect

셀 선택 상태를 초기화합니다. 선택한 셀 테두리선도 같이 사라집니다.

예제 구현 방법

.Grid.sample_grid_83 .body .selection
{
	-nexa-border : 2px dotted hotpink;
}

기본 테마를 수정해서 사용하는 경우에는 아래와 같은 형식으로 코드를 추가합니다.

.Grid .body .selection
{
	-nexa-border	: 2px solid #125dae;
}

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Grid00.selectArea(0,0,0,0);
};

this.Button01_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Grid00.clearSelect();
};

스크롤바가 생기지 않게 Grid 컴포넌트의 높이 조정하기

미리 정해진 데이터라면 스크롤바가 생기지 않게 Grid 컴포넌트의 높이를 설정해서 배포하면 되지만, 데이터값이 실시간으로 들어와서 변경되는 경우에는 Row 건수가 늘어나거나 하나의 셀 안에 많은 데이터가 들어가면서 지정된 Grid 컴포넌트의 높이보다 데이터가 많아지면서 스크롤바가 생길 수 있습니다.

getRealRowFullSize 메소드는 Grid 컴포넌트에 표시되는 데이터 영역의 실제 높이값을 구해서 Grid 컴포넌트의 높이값을 적절하게 조정할 수 있습니다.

예제

[getRealRowFullSize] 버튼을 클릭하면 5개의 Row에 맞게 Grid 컴포넌트의 높이가 변경됩니다. TextArea 컴포넌트에 2줄 이상의 텍스트를 입력하고 특정 셀을 선택한 후 [Set Text] 버튼을 클릭하면 해당 데이터가 선택한 셀에 반영되면서 Grid 컴포넌트에 스크롤바가 생길 수 있습니다. 이때 다시 [getRealRowFullSize] 버튼을 클릭하면 Grid 컴포넌트의 높이가 변경됩니다.

sample_grid_85.xfdl

예제에서 사용한 핵심 기능

getRealRowFullSize

head, body, summary 영역의 Row 높이의 합을 반환합니다. 파라미터를 지정하면 각 영역의 높이를 반환하며 지정하지 않으면 전체 영역의 높이를 반환합니다.

autosizingtype, extendsizetype

속성값으로 "col", "row", "both" 값을 설정하면 데이터에 맞게 크기를 자동 조절합니다. 이때 전체 Row의 높이가 같이 조절되기 때문에 변경된 Row 높이만 조절하고 싶다면 extendsizetype 속성값을 지정해주어야 합니다.

예제 구현 방법

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var nH = this.Grid00.getRealRowFullSize();
	//computed style (border-top + border-bottom = 3)
	this.Grid00.set_height(nH + 3);
};

Grid 컴포넌트의 height 속성값 지정 시 더해주는 3은 border 속성값입니다. border 속성값은 애플리케이션 실행 중에는 확인할 수 없으며 Grid 컴포넌트를 선택하고 속성창에서 [Computed Style] 탭을 선택하면 실제 적용될 border 속성값을 알 수 있습니다. border 속성값은 적용되는 테마에 따라 달라집니다.

selecttype 속성값을 "cell"로 지정했기 때문에 하나의 셀만 선택할 수 있습니다. selectstartrow 속성값은 하나의 셀만 선택하더라도 배열로 값을 반환합니다.

this.Button01_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Dataset00.setColumn(this.Grid00.selectstartrow[0], this.Grid00.selectstartcol[0], this.TextArea00.value);
};

Grid 컴포넌트의 Row 높이를 직접 지정하기

특정 Row 또는 조건에 맞는 Row의 높이를 직접 지정하는 방법을 살펴봅니다.

예제

트리 형태로 표현되는 Grid 컴포넌트의 레벨에 따라 Row 높이와 글꼴 스타일을 다르게 적용합니다.

sample_grid_94.xfdl

예제에서 사용한 핵심 기능

setRealRowSize

특정 Row의 높이값을 지정할 수 있습니다. 예제에서는 트리 레벨에 따라 다른 값으로 Row를 지정합니다.

extendsizetype

Row 크기를 각각 조정하기 때문에 해당 속성값을 "row"로 지정해주어야 합니다. 그렇지 않으면 원하는 모양과 다른 형태로 표시될 수 있습니다.

예제 구현 방법

displaytype: treeitemcontrol
edittype: tree
treelevel: bind:Column0

extendsizetype: row
treeinitstatus: expand,all
treeusecheckbox: false
treeuseline: true

this.Dataset00_onload = function(obj:nexacro.NormalDataset,e:nexacro.DSLoadEventInfo)
{
	var tempColValue;
	
	for(var i=0; i < this.Grid00.rowcount; i++)
	{
		tempColValue = this.Dataset00.getColumn(this.Grid00.getDatasetRow(i), "Column0");
		
		if(tempColValue==0) {
			this.Grid00.setRealRowSize(i,"60");
		}
		else if(tempColValue==1) {
			this.Grid00.setRealRowSize(i,"40");
		}
		else if(tempColValue==2) {
			this.Grid00.setRealRowSize(i,"25");
		}
	}
};

.Grid .body .row .cell.sample_grid_94_level_0 .celltreeitem .treeitemtext
{
	font : normal bold 20pt/normal "Arial";
	color : blue;
}

.Grid .body .row .cell.sample_grid_94_level_1 .celltreeitem .treeitemtext
{		
	font : normal bold 15pt/normal "Arial";
}

.Grid .body .row .cell.sample_grid_94_level_2  .celltreeitem .treeitemtext
{
	color : firebrick;		
	
}

Column0 칼럼의 값에 따라 다른 스타일 속성을 적용합니다.

Column0==0?'sample_grid_94_level_0':Column0==1?'sample_grid_94_level_1':'sample_grid_94_level_2'

칼럼 너비보다 큰 텍스트만 툴팁으로 보여주기

텍스트의 길이가 긴 경우 툴팁(tooltip)으로 보여주기에서는 특정 칼럼은 모두 툴팁으로 보여주었는데, 실제 텍스트 길이에 따라 필요한 경우만 툴팁으로 보여주는 방법을 살펴봅니다.

예제

칼럼의 실제 너비보다 텍스트 길이가 큰 경우에만 툴팁을 표시합니다. 칼럼 너비와 텍스트 너비 정보를 TextArea 컴포넌트에 표시합니다.

sample_grid_95.xfdl

예제에서 사용한 핵심 기능

getTextSize

지정된 폰트 설정에 따라 텍스트가 어느 정도의 영역을 차지하는지 계산합니다. 가로, 세로 크기 정보를 오브젝트로 반환하며 nx, ny 속성으로 값을 확인할 수 있습니다. font 정보가 있어야 하기 때문에 테마 또는 XCSS 파일에서 지정한 스타일을 참조하는 경우에는 사용할 수 없습니다.

getFormatColSize

칼럼 크기를 계산합니다. Grid Contents Editor에서 설정한 값을 반환합니다. 동적으로 칼럼 크기를 조정하도록 설정했다면 getRealColSize 메소드를 사용합니다.

예제 구현 방법

font: bold 14px/normal "Arial"

this.Grid00_onmousemove = function(obj:nexacro.Grid,e:nexacro.GridMouseEventInfo)
{
	var nCellSize = obj.getFormatColSize(e.cell);
	var strText   = obj.getCellText(e.row, e.cell);
	var nTextLen  = nexacro.getTextSize( strText, obj.font );
	
	this.TextArea00.set_value("strText: "+strText+"\n");
	this.TextArea00.insertText("nCellSize: "+nCellSize+"\n");
	this.TextArea00.insertText("nTextLen: "+nTextLen.nx+"\n");

	if( nCellSize < nTextLen.nx){
		obj.setCellProperty( "Body", e.cell, "tooltiptext", strText);
	} else {
		obj.setCellProperty( "Body", e.cell, "tooltiptext", "");
	}	
};

한 행씩 스크롤하기

데이터가 많아서 스크롤바가 생겼을때 스크롤을 이동하는 방법은 여러가지가 있습니다. 마우스 휠 동작으로 이동할 수 있고, 스크롤바 양쪽에 버튼을 클릭해서 이동할 수도 있습니다. 아니면 스크롤바에 있는 트랙바를 잡은 상태에서 원하는 방향으로 끌어서 이동할 수도 있습니다.

Grid 컴포넌트는 원하는 목적에 따라 스크롤 형식을 설정할 수 있습니다. 예제에서는 한 행씩 스크롤하는 방법을 살펴봅니다.

예제

Grid 컴포넌트 아래에 있는 버튼을 클릭하거나 마우스 휠 동작으로 움직이거나 트랙바를 잡아서 끌어 이동할때 오른쪽 Grid 컴포넌트는 한 행씩 움직입니다.

sample_grid_102.xfdl

예제에서 사용한 핵심 기능

wheelscrollrow

마우스 휠 동작 시 한번 스크롤 시 이동하는 Row를 설정합니다.

scrollpixel

스크롤 동작 단위를 설정합니다. 기본값은 "default"이며 데스크탑에서 "none"으로 동작합니다. Row 단위로 이동하도록 설정하면 "all"로 속성값을 설정합니다.

예제 구현 방법

15개 정도 Row를 추가하고 첫 번째 칼럼값을 1부터 15까지 설정합니다.

Button 클릭 시 User Property 값과 연산을 통해 이동 방향을 조정하도록 합니다.

this.Btn_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Grid00.scrollBy(0,this.Grid00.getRealRowSize(0)*obj.nVoffsetpos);
	this.Grid01.scrollBy(0,this.Grid01.getRealRowSize(0)*obj.nVoffsetpos);
};

Row 위치 변경하기

바인딩된 Dataset 오브젝트의 Row 인덱스를 변경합니다. 예제에서는 Grid 컴포넌트의 ondrag 이벤트 발생 시 Row 인덱스를 확인하고 ondrop 이벤트에서 Row 위치를 변경합니다.

예제

이동할 Row를 클릭한 후 드래그해서 원하는 위치의 Row로 이동합니다.

sample_grid_106.xfdl

예제에서 사용한 핵심 기능

moveRow

지정한 Row를 특정 위치로 이동합니다. 이동하는 위치에 따라 나머지 Row의 위치도 같이 변경됩니다.

예제 구현 방법

Static 컴포넌트는 Row 이동 시 이동하는 위치를 표시하기 위해 사용합니다.

visible: false
border: 2px dotted black

이벤트가 시작하는 지점에 Row 정보를 확인하고 Row 인덱스값을 GridDragEventInfo 오브젝트의 userdata로 설정합니다. 그리고 선택한 Row 정보를 Static 컴포넌트에 표시합니다.

this.Grid00_ondrag = function(obj:nexacro.Grid,e:nexacro.GridDragEventInfo)
{
	e.set_userdata(e.row);
	var strVal = this.Dataset00.getColumn(e.row, "Column0");
		strVal += " : " + this.Dataset00.getColumn(e.row, "Column1");
	this.Static00.set_text(strVal);
	this.Static00.set_visible(true);
	var nL = obj.getOffsetLeft() + e.clientx;
	var nT = obj.getOffsetTop() + e.clienty;
	this.Static00.move(nL, nT);
	return true;
};

Static 컴포넌트가 마우스 포인터 위치를 따라가도록 합니다. Grid 컴포넌트가 아닌 Form 오브젝트의 ondragmove 이벤트 함수에서 처리해주기 때문에 Grid 컴포넌트 영역을 벗어나도 계속 드래그 동작을 유지합니다.

this.sample_grid_106_ondragmove = function(obj:nexacro.Form,e:nexacro.DragEventInfo)
{
	this.Static00.move(e.clientx, e.clienty + 10);
};

userdata로 받아온 값을 이전 Row 인덱스로 설정하고 현재 위치를 새로운 인덱스로 설정해 Row의 위치를 변경합니다.

this.Grid00_ondrop = function(obj:nexacro.Grid,e:nexacro.GridDragEventInfo)
{
	this.Static00.set_visible(false);
	var nRow = e.userdata;
	this.Dataset00.moveRow(nRow, e.row);	
};

연속된 여러 Row 선택하기

Grid 컴포넌트의 selecttype 속성값을 "multirow"로 설정한 경우 여러 Row를 선택할 수 있지만 선택할 Row가 많거나 특정 위치의 Row를 빠르게 선택해야 하는 경우 직접 선택할 Row 인덱스를 설정해 메소드를 실행할 수 있습니다.

예제

선택할 Row 인덱스를 입력하고 선택된 Row를 확인합니다.

sample_grid_109.xfdl

예제에서 사용한 핵심 기능

selectMultiRow

연속된 Row의 시작과 끝 인덱스를 설정해 선택된 상태로 처리합니다.

예제 구현 방법

Grid 컴포넌트의 selecttype 속성값은 "multirow"로 설정하고 선택한 Row를 강조하기 위해 showselection 속성값은 true로 설정합니다.

Dataset은 아래 그림과 같은 Column, Row 정보를 가지고 있습니다.

사용자가 Edit 컴포넌트에 콤마 구분자로 입력한 문자열을 selectMultiRow 메소드의 파라미터 값으로 전달합니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Grid00.selectMultiRow.apply(this.Grid00, (this.Edit00.value).split(","));
};

this.Button01_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Grid00.clearSelect();
};

selectMultiRow 메소드는 기존에 선택되어 있던 영역이 유지된 상태에서 선택영역이 추가됩니다. 예를 들어 첫 번째 실행 시 선택 범위를 "0, 2"로 설정하고 두 번째 실행 시 "4, 5"로 설정한 경우에는 아래와 같이 선택된 상태가 표시됩니다.