포맷 변경해서 적용하기

Grid에서 데이터를 어떤 형태로 표현할지 정의한 형식을 포맷이라고 합니다. Grid를 사용하기 위해 꼭 필요한 것이 데이터와 포맷이며 두 가지 요소가 모두 있어야 데이터를 Grid에 표현할 수 있습니다.

Grid는 다중 포맷을 지원합니다. Grid에 여러 포맷을 정의해 놓고 필요에 따라 변경해가며 사용할 수 있습니다. 포맷은 개발 시 미리 정의해 놓고 사용할 수도 있고 애플리케이션 수행 시 생성하거나 변경할 수도 있습니다. 다중 포맷을 사용하면 사용자나 상황에 맞게 Grid의 모양을 변경할 수 있다는 장점이 있습니다.

Grid를 처음 생성하면 어떤 데이터가 어떤 형태로 표현될지 알 수 없기 때문에 포맷이 정의되어 있지 않습니다. 포맷이 만들어지려면 사용자가 직접 Grid Contents Editor를 사용해 만들어 주거나 Dataset을 바인딩 해주면 됩니다.

Grid에 Dataset을 바인딩하면 Dataset의 Column 정보를 기준으로 default라는 포맷이 자동 생성되기 때문에 다중 포맷을 사용하지 않는 경우에는 개발자가 별도로 포맷을 만들어 줄 필요가 없습니다.

예제

아래는 Grid에 default, format00이라는 두 개의 포맷을 만들어 놓고 Select format 콤보박스를 사용해 포맷을 전환하는 예제입니다.

사용자는 아래의 Select format 콤보박스를 사용하여 포맷을 전환하며 같은 데이터가 포맷에 따라 어떻게 보이는지 확인할 수 있습니다. 선택할 수 있는 포맷은 Dataset을 바인딩해 자동으로 생성된 default 포맷과 Grid Contents Editor를 사용해 별도로 생성한 format00 포맷이 있습니다.

sample_grid_20.xfdl

예제에서 사용한 핵심 기능

formatid

Grid에 정의된 포맷 중에 Grid에 적용할 포맷의 ID를 설정하는 속성입니다. Grid의 포맷 정보는 모두 formats 속성에 문자열 형태로 정의되어 있습니다.

예제 구현 방법

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

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

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

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

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

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

1. Combo 메뉴 만들기

단계 1에서 생성한 Combo를 선택한 후 Properties 창에서 innerdataset 속성을 찾습니다. innerdataset 속성 옆에 ... 버튼을 클릭하여 InnerDataset Editor 창이 뜨면 아래와 같이 입력합니다. 입력이 완료되면 OK 버튼을 눌러 바인딩을 완료합니다.

2. Combo에 이벤트 추가하기

Form에 있는 Combo를 선택한 후 onitemchanged 이벤트 핸들러를 아래와 같이 추가합니다.

this.Combo00_onitemchanged = function(obj:nexacro.Combo,e:nexacro.ItemChangeEventInfo)
{
	var strFormat = e.posttext;
	
	this.Grid00.set_formatid(strFormat);
};

1. Grid를 선택한 후 더블클릭하여 Grid Contents Editor를 띄웁니다.

2. Grid Contents Editor 왼쪽 상단에서 + 버튼을 누르면 format00이라는 빈 포맷이 생성됩니다.

3. format00 포맷을 설정합니다. 예제에서는 편의를 위해 default 포맷에 있는 Column을 아래와 같이 선택한 후 Ctrl + C로 복사합니다.

4. default 포맷에서 복사한 Column을 아래 그림과 같이 format00 포맷에 Ctrl + V로 붙여넣습니다.

5. format00 포맷이 정상적으로 생성되었는지 확인하기 위해 Grid Contents Editor에서 아래와 같이 Design Source 탭을 눌러 소스에 아래와 같이 format00 정보가 추가되었는지 확인합니다.

6. format00 포맷이 정상적으로 생성된 것을 확인한 후 Grid Contents Editor의 OK 버튼을 누릅니다.

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

Select format 콤보박스에서 default, format00을 번갈아 선택해 보며 Grid가 어떻게 변하는지 확인합니다.

바인딩된 Dataset 오브젝트의 포맷을 생성하여 보여주기

Grid에서 데이터를 어떤 형태로 표현할지 정의한 형식을 포맷이라고 합니다. Grid를 사용하기 위해 꼭 필요한 것이 데이터와 포맷이며 두 가지 요소가 모두 있어야 데이터를 Grid에 표현할 수 있습니다.

Grid의 포맷은 바인딩할 Dataset이 하나뿐이고 추후 다른 Dataset을 바인딩하지 않는다면 개발 시에 생성합니다. 그러나 애플리케이션 수행 중에 다른 Dataset을 바인딩해야 한다면 Grid의 포맷을 생성하는 별도의 과정이 필요합니다. 그 과정에 사용되는 메소드가 createFormat입니다.

createFormat은 Grid에 바인딩한 Dataset의 Column 정보를 기준으로 새로운 포맷을 생성하는 메소드입니다. 애플리케이션 수행 중에 Dataset을 바인딩한 후 createFormat 메소드를 수행하지 않는다면 Grid는 데이터를 어떤 형식으로 출력할지 알 수 없으므로 정상적으로 동작하지 않습니다. 따라서 Dataset의 바인딩 후에는 반드시 createFormat을 수행해줘야 합니다.

동적으로 Grid의 포맷을 생성하는 기능은 하나의 Grid에 여러 Dataset을 상황에 따라 바인딩하는 경우에 매우 유용합니다.

예제

다음은 Select dataset 콤보박스를 사용해 Grid에 Dataset00, Dataset01이라는 두 개의 Dataset을 바인딩하는 예제입니다.

Select dataset 콤보박스에서 데이터셋을 선택하면 Grid에 해당 Dataset이 바인딩됩니다. 그리고 createFormat 메소드가 수행되어 각 Dataset의 Column 구조에 맞게 Grid의 포맷이 생성됩니다. createFormat 메소드 수행 후 생성된 포맷은 Grid에 즉시 반영됩니다.

sample_grid_21.xfdl

다음은 Dataset00과 Dataset01의 Column 구조를 보여줍니다. 각기 다른 데이터와 Column 구조로 되어 있어 같은 포맷을 공유해 사용할 수 없습니다.

예제에서 사용한 핵심 기능

createFormat

Grid에 바인딩한 Dataset의 Column 정보를 기준으로 새로운 포맷을 생성하는 메소드입니다.

binddataset

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

예제 구현 방법

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

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

1. 툴바에서 Dataset 을 선택한 후, 폼 위 적당한 공간에 클릭하여 Dataset을 생성합니다. 두 개의 Dataset을 생성해야 하므로 같은 작업을 한 번 더 반복합니다.

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

• Dataset00의 아이템 목록 작성

• Dataset01의 아이템 목록 작성

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

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

1. Combo 메뉴 만들기

단계 1에서 생성한 Combo를 선택한 후 Properties 창에서 innerdataset 속성을 찾습니다. innerdataset 속성 옆에 ... 버튼을 클릭하여 InnerDataset Editor 창이 뜨면 아래와 같이 입력합니다. 입력이 완료되면 OK 버튼을 눌러 바인딩을 완료합니다.

2. Combo에 이벤트 추가하기

Form에 있는 Combo를 선택한 후 onitemchanged 이벤트 핸들러를 아래와 같이 추가합니다.

this.Combo00_onitemchanged = function(obj:nexacro.Combo,e:nexacro.ItemChangeEventInfo)
{
	//Binding selected dataset
	this.Grid00.set_binddataset(e.posttext);

	//Creating new format for bound dataset
	this.Grid00.createFormat();	
};

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

Select dataset 콤보박스에서 dataset00, dataset01을 번갈아 선택하며 Grid가 정상적으로 출력되는지 확인합니다.

다양한 형식으로 데이터 표현하기

Grid에서 Cell의 displaytype 속성을 설정하면 데이터를 다양한 형식으로 표현할 수 있습니다.

displaytype은 Cell의 내용을 화면에 표시하는 형식을 설정하는 속성으로 normal, currency, date, number, text 등과 같은 텍스트 형태를 비롯하여 combo, checkbox, button, tree 등과 같은 컴포넌트 형태로도 설정할 수 있습니다.

여러 타입 중 combo, date, tree 등의 컴포넌트 형태로 설정할 경우에는 별도로 Cell의 속성을 설정해야 합니다. Cell의 속성에 대한 설정은 Grid Contents Editor에서 가능하며 해당 Cell을 선택한 후 Properties 창의 GridCombo, GridDate, GridTree 카테고리에서 세부 설정이 가능합니다.

예를 들어, Combo 타입으로 설정하는 경우에는 Cell의 설정에서 콤보에 출력할 데이터셋을 바인딩하고, code와 data를 설정해줘야 합니다.

Tree 타입으로 설정하는 경우에는 Cell의 설정에서 트리의 깊이를 나타내는 treelevel, 트리의 상태를 나타내는 treestate, 트리의 체크박스를 설정하는 treecheck 속성을 설정해야 합니다.

예제

다음은 Cell의 displaytype 속성을 설정한 Grid 예제입니다. 두 개의 Grid 중 위는 displaytype 속성을 설정한 Grid이고 아래는 아무 설정도 하지 않은 Grid입니다.

두 Grid를 비교해 보며 데이터가 Cell의 displaytype 속성 설정에 따라 어떻게 표현되는지 확인할 수 있습니다.

sample_grid_22.xfdl

예제에서 사용한 핵심 기능

displaytype

Grid의 Cell에서 데이터가 표시되는 형식을 설정하는 속성입니다. 아무 값도 설정하지 않으면 normal이 기본값으로 설정됩니다.

예제 구현 방법

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

Grid 생성 작업을 두 번 반복하면 Grid00, Grid01이 생성됩니다. Grid00은 셀의 displaytype을 설정할 Grid이고 Grid01은 Grid00과 비교를 위한 아무 설정도 하지 않는 Grid입니다.

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

1. 툴바에서 Dataset 을 선택한 후, 폼 위 적당한 공간에 클릭하여 Dataset을 생성합니다. Grid와 Combo 용으로 두 개의 Dataset을 생성해야 하므로 같은 작업을 한 번 더 반복합니다. 그리고 Grid를 위한 Dataset의 id는 ds_data로 하고, Combo를 위한 Dataset의 id는 ds_combo로 설정합니다.

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

• ds_data의 아이템 목록 작성

• ds_combo의 아이템 목록 작성

ds_data를 Grid 컴포넌트에 바인딩합니다. Invisible Objects 영역에 있는 ds_data를 Form에 생성한 Grid 컴포넌트로 드래그 앤 드롭하면 바인딩이 완료됩니다. Grid00, Grid01에 똑같이 ds_data를 바인딩시킵니다.

1. Grid00을 더블클릭하여 Grid Contents Editor를 엽니다. 아래 그림과 같이 좌측의 col0부터 col11까지 Cell을 선택한 후 우측 Properties 창에서 displaytype을 설정합니다.

아래 표와 같이 각 Cell의 속성을 설정합니다. head 밴드의 Cell 설정은 헤드 칼럼에 표시될 타이틀을 설정하는 부분이고 body 밴드의 Cell 설정은 displaytype 속성을 설정합니다.

2. Grid Combo 설정하기

Combo로 설정할 Cell을 선택한 후 Properties 창에서 combodataset 속성을 찾습니다. combodataset 속성 옆에 버튼을 클릭하여 ds_combo를 선택하여 바인딩합니다. 그리고 combocodecol, combodatacol 속성도 아래와 같이 설정합니다.

이 예제에서는 Cell의 속성에 대한 설정만을 다루기 때문에 Combo의 동작에 대한 구현은 다루지 않습니다.

3. Grid Tree 설정하기

Tree로 설정할 Cell을 선택한 후 Properties 창에서 GridTree 카테고리를 찾습니다. treecheck 속성 옆의 버튼을 클릭하여 checkbox를 선택하고, 마찬가지로 treelevel 속성 옆의 버튼을 클릭하여 tree를 선택합니다. treecheck는 트리의 체크박스 값으로 사용할 Column을 바인딩하는 속성이고, treelevel은 트리의 레벨값으로 사용할 Column을 바인딩하는 속성입니다.

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

위의 Grid와 아래 Grid의 수행 결과를 비교해 보며 데이터가 Grid의 Cell 타입에 따라 어떻게 표현되는지 확인합니다.

다양한 형식으로 데이터 편집하기

Grid에서 Cell의 edittype 속성을 설정하면 데이터를 다양한 형식으로 편집할 수 있습니다.

edittype은 Cell에 어떤 형식으로 입력할지 설정하는 속성으로 normal, date, mask, text, textarea 등과 같은 텍스트 형태를 비롯하여 combo, checkbox, tree 등과 같은 컴포넌트 형태로도 설정할 수 있습니다.

여러 타입 중 combo, date, tree 등의 컴포넌트 형태로 설정할 경우에는 별도로 Cell의 속성을 설정해야 합니다. Cell의 속성에 대한 설정은 Grid Contents Editor에서 가능하며 해당 Cell을 선택한 후 Properties 창의 GridCombo, GridDate, GridTree 카테고리에서 세부 설정이 가능합니다.

예를 들어, Combo 타입으로 설정하는 경우에는 Cell의 설정에서 콤보에 출력할 데이터셋을 바인딩하고, code와 data를 설정해줘야 합니다.

Tree 타입으로 설정하는 경우에는 Cell의 설정에서 트리의 깊이를 나타내는 treelevel, 트리의 상태를 나타내는 treestate, 트리의 체크박스를 설정하는 treecheck 속성을 설정해야 합니다.

예제

다음은 Cell의 edittype 속성을 설정한 Grid 예제입니다. 각 데이터가 Cell의 edittype 속성 설정에 따라 어떻게 표시되는지 확인할 수 있습니다.

sample_grid_23.xfdl

예제에서 사용한 핵심 기능

edittype

Grid의 Cell에서 편집 창의 형식을 설정하는 속성입니다. 아무 값도 설정하지 않으면 none이 기본값으로 설정됩니다.

autoenter

Grid에서 입력이 가능한 Cell을 선택하면 자동으로 입력 모드로 변경되는 방법을 설정하는 속성입니다.

wordwrap

Grid의 Cell에 표시되는 데이터가 Cell의 넓이보다 길 경우 자동으로 줄 넘김이 되도록 설정하는 속성입니다.

예제 구현 방법

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

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

1. 툴바에서 Dataset 을 선택한 후, 폼 위 적당한 공간에 클릭하여 Dataset을 생성합니다. Grid와 Combo 용으로 두 개의 Dataset을 생성해야 하므로 같은 작업을 한 번 더 반복합니다. 그리고 Grid를 위한 Dataset의 id는 ds_data로 하고, Combo를 위한 Dataset의 id는 ds_combo로 설정합니다.

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

• ds_data의 아이템 목록 작성

• ds_combo의 아이템 목록 작성

ds_data를 Grid 컴포넌트에 바인딩합니다.

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

1. Grid00을 더블클릭하여 Grid Contents Editor를 엽니다. 아래 그림과 같이 좌측의 col0부터 col10까지 Cell을 선택한 후 우측 Properties 창에서 edittype 속성을 설정합니다.

아래 표와 같이 각 Cell의 속성을 설정합니다. head 밴드의 Cell 설정은 헤드 칼럼에 표시될 타이틀을 설정하는 부분이고 body 밴드의 Cell 설정은 edittype과 displaytype 속성을 설정합니다.

2. Grid Combo 설정하기

Combo로 설정할 Cell을 선택한 후 Properties 창에서 combodataset 속성을 찾습니다. combodataset 속성 옆에 버튼을 클릭하여 ds_combo를 선택하여 바인딩합니다. 그리고 combocodecol, combodatacol 속성도 아래와 같이 설정합니다.

3. Grid Mask 설정하기

mask로 설정할 Cell을 선택한 후 Properties 창에서 mask 관련 속성을 다음과 같이 설정합니다.

AA-###은 (영어 알파뱃 대문자 2자)-(0~9까지의 10진수 숫자 3자리)로만 입력받는다는 의미입니다.

4. Grid Textarea 설정하기

textarea로 설정할 Cell을 선택한 후 Properties 창에서 wordWrap 속성을 english로 설정합니다. english로 설정하면 영어 단어 단위로 줄 바꿈이 이뤄집니다.

5. Grid Tree 설정하기

Tree로 설정할 Cell을 선택한 후 Properties 창에서 GridTree 카테고리를 찾습니다. treecheck 속성 옆의 버튼을 클릭하여 checkbox를 선택하고, 마찬가지로 treelevel 속성 옆의 버튼을 클릭하여 tree를 선택합니다. treecheck는 트리의 체크박스 값으로 사용할 Column을 바인딩하는 속성이고, treelevel은 트리의 레벨값으로 사용할 Column을 바인딩하는 속성입니다.

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

각 타입별로 Column을 편집해 보며 edittype 속성의 설정에 따라 어떻게 동작하는지 확인합니다.

레코드 그룹핑하기

그룹핑은 SQL의 GROUP BY 문과 유사하게 Grid의 데이터를 작은 그룹으로 분류하는 기능으로 주로 그룹별로 통계 정보를 계산하기 위해 사용합니다. 그룹으로의 분류는 사용자가 지정한 공통된 값을 갖는 Column을 기준으로 나누고 공통되는 값이 없는 레코드 역시 각각 그룹이 만들어집니다.

그룹핑시 여러 Column을 지정하면 다중 그룹핑이 가능합니다. 예를 들어, 대그룹, 중그룹, 소그룹과 같이 나누어 그룹별 연산을 수행할 수 있습니다. 또한, 여러 Column을 지정하여 하나의 그룹으로 묶는 것도 가능한데 두 개 이상의 Column을 그룹핑하여 연산을 수행할 수 있습니다. 다중 그룹핑은 논리적으로 생성되는 레코드가 많아져 Grid가 지저분해질 수 있으므로 레코드 수 혹은 공통되는 Column을 가진 레코드에 따라 판단하는 것이 좋습니다. 다중 그룹핑에 대한 예제는 별도의 예제에서 다룹니다.

그룹핑을 하면 부가적으로 그룹별 연산 기능을 이용할 수 있습니다. 기본적으로는 그룹별 연산이 이뤄지지 않으나 INT 타입인 Column이 존재하면 해당 타입의 Column에 대해 자동으로 그룹별 합계 연산이 이뤄집니다. 어떤 연산을 수행할지는 prop 속성을 통하여 결정되며 사용자가 설정할 수 있습니다. 그룹별 연산의 결과는 각 그룹의 바로 밑에 논리적 레코드가 만들어져 출력됩니다. 논리적 레코드는 Dataset에 실재하지 않는 논리적으로만 생성된 레코드로 Dataset의 데이터 처리 작업에는 영향을 미치지 않습니다. prop 속성에 대한 더 자세한 내용은 별도의 예제에서 다룹니다.

연산의 종류는 다음과 같습니다.

그룹핑은 Dataset의 keystring 메소드를 사용해 수행할 수 있습니다. 자세한 사용법은 관련 요소를 참조하시기 바랍니다.

예제

다음은 keystring 메소드를 사용해 그룹핑을 수행하는 Grid 예제입니다.

그룹핑은 Company Column을 기준으로 해당 Column 값이 같은 레코드들이 재정렬되어 모입니다. 그리고 각 그룹별로 합계가 계산되어 그룹 바로 밑에 새로운 레코드로 추가되었음을 확인할 수 있습니다.

sample_grid_24.xfdl

예제에서 사용한 핵심 기능

keystring

Dataset에 로드된 데이터를 그룹/정렬할 기준이 되는 조건식을 설정하는 속성입니다. 그룹 타입을 생략하면 G 옵션이 적용됩니다.

this.Dataset00.set_keystring( "column0" );
this.Dataset00.set_keystring( "G:column0" );
this.Dataset00.set_keystring( "G:+column0-column1" );
this.Dataset00.set_keystring( "G:+column0,S:-column1" );

예제 구현 방법

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

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

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

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

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

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

Form에 있는 Button을 선택한 후 onclick 이벤트 핸들러를 아래와 같이 추가합니다.

• GROUP by Company 버튼의 onclick 이벤트 핸들러

this.btn_group_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Dataset00.set_keystring("G:Company");	

};

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

위치를 변경하려는 Column의 헤더를 마우스로 드래그하여 원하는 위치에 드롭합니다.

레코드 정렬하기

정렬은 데이터를 특정한 조건에 따라 일정한 순서가 되도록 다시 배열하는 작업을 의미합니다. 그리드에서는 레코드를 특정 칼럼을 기준으로 정렬해서 제공해야 사용자 입장에서 데이터를 살펴보기에 좋으므로 정렬은 필수 기능입니다.

정렬의 종류에는 오름차순 정렬과 내림차순 정렬이 있습니다. 오름차순은 숫자나 문자가 낮은 것부터 차례로 배열되는 정렬이고 내림차순은 높은 것부터 차례로 배열되는 정렬입니다. 정렬 수행 시 칼럼을 지정하면 오름차순 혹은 내림차순으로 자유롭게 정렬할 수 있습니다.

정렬 시 여러 칼럼을 지정하면 다중 정렬이 가능합니다. 예를 들어, Column1과 Column2를 같이 지정하면 우선 Column1을 정렬하고, Column1이 같은 레코드들은 다시 Column2로 정렬합니다.

그리드에서 정렬 기능은 데이터셋의 keystring 메소드를 사용해 구현합니다. 자세한 사용법은 관련 요소를 참조하시기 바랍니다.

예제

다음은 keystring 메소드를 사용해 정렬을 수행하는 Grid 예제입니다.

SORT by Name 버튼을 누르면 Name Column을 기준으로 오름차순으로 정렬됩니다.

sample_grid_25.xfdl

예제에서 사용한 핵심 기능

keystring

Dataset에 로드된 데이터를 그룹/정렬할 기준이 되는 조건식을 설정하는 속성입니다. 그룹 타입을 생략하면 G 옵션이 적용됩니다.

this.Dataset00.set_keystring( "S:column0" );
this.Dataset00.set_keystring( "S:column0+column0" );
this.Dataset00.set_keystring( "G:+column0,S:-column1" );

예제 구현 방법

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

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

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

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

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

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

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

• SORT by Name 버튼의 onclick 이벤트 함수

this.btn_sort_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Dataset00.set_keystring("S:Name");	
	
};

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

Sort by Name 버튼을 눌러 Name 칼럼이 오름차순으로 정렬되는지 확인합니다.

값이 동일한 셀을 하나의 셀로 표시하기 - Suppress

Grid는 공통되는 특징을 가진 다량의 데이터를 사용자에게 전달하기 위한 컴포넌트입니다. 다량의 데이터를 Grid에 출력하기 때문에 복잡하며 사용자가 레코드를 비교해 보기가 쉽지 않습니다.

Grid에서는 데이터의 복잡함을 줄이고 효율적으로 사용자에게 전달하기 위해 suppress 기능을 제공합니다. suppress 기능은 한 Column에 같은 값을 가진 Cell이 여러 개 반복적으로 나열되어 있을 경우 하나의 Cell로 합쳐 보여줍니다. 예를 들어, 아래 그림과 같이 1dollar나 hangul과 같이 반복되는 Cell들을 하나의 Cell로 합쳐 보여준다면 좀 더 Grid의 가독성을 높일 수 있습니다.

suppress 기능은 같은 값을 갖는 Cell이 연속해서 나열되어 있을 경우에 효율적으로 동작합니다. 예를 들어, 아래 Grid의 Company Column과 같이 값이 연속해서 출력되어 있지 않은 경우에는 suppress 기능의 효과를 볼 수 없습니다. 따라서 suppress 기능을 사용하기에 앞서 suppress를 수행하려는 Column을 먼저 정렬해줘야 합니다.

suppress는 레벨 값으로 설정하는데 레벨 값에 따라 어떤 Column의 Cell에서 먼저 suppress가 수행될지 결정합니다. 예를 들어, Company Cell의 suppress 값을 1로 설정하고 Department Cell의 suppress 값을 2로 설정했을 경우 Company Column의 Cell에서 먼저 suppress를 수행하고 그다음 레벨인 Department Column의 Cell에서 suppress가 수행됩니다. 그리고 suppress 레벨을 설정하지 않은 다른 Column의 Cell에서는 suppress를 수행하지 않습니다. 이런 식으로 suppress 값으로 레벨을 설정함으로써 각 Column의 Cell에 우선순위를 줄 수 있습니다.

예제

다음은 suppress 기능을 수행한 Grid 예제입니다.

Suppress 버튼을 누르면 먼저 공통되는 값을 갖는 Company와 Department를 기준으로 정렬한 후 suppress 기능을 수행하여 같은 값을 갖는 Cell을 합쳐줍니다.

Company Column의 Cell에 suppress 값을 1로 설정하고 Department Column의 Cell에 suppress 값을 2로 설정했기 때문에 Company Column에서 먼저 suppress가 수행되고 난 후 그 결과를 바탕으로 다시 Department Column에서 suppress가 수행됩니다. 그 이외의 Column에서는 suppress를 설정하지 않았기 때문에 아무런 변화가 없습니다.

sample_grid_26.xfdl

예제에서 사용한 핵심 기능

suppress

Grid Cell에 suppress 기능을 설정하는 속성입니다.

var retVal;

retVal = this.Grid00.setCellProperty("body", 2, "suppress", "1");
retVal = this.Grid00.setCellProperty("body", 3, "suppress", "2");

예제 구현 방법

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

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

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

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

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

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

suppress 기능을 구현하기 위해 suppress를 수행하려는 Column을 먼저 정렬하고 Cell의 suppress 속성을 설정합니다.

1. Company Column을 먼저 정렬하고 그 결과를 바탕으로 다시 Department Column을 정렬합니다.

2. Company Cell의 suppress 속성을 1로, Department Cell의 suppress 속성을 2로 설정합니다. Company Column의 Cell이 먼저 suppress 되고 그 결과를 바탕으로 다시 Department Column의 Cell이 suppress 됩니다.

• suppress 버튼의 onclick 이벤트 핸들러

this.btn_suppress_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	//Sorting records
	this.Dataset00.set_keystring("S:Company+Department");

	//Suppressing cells
	var retVal = this.Grid00.setCellProperty("body", 2, "suppress", "1");
	var retVal = this.Grid00.setCellProperty("body", 3, "suppress", "2");

};

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

셀 속성 설정하기

Grid 컴포넌트는 GridBandControl, GridCellControl, GridColumnControl, GridRowControl와 같은 여러 오브젝트로 구성됩니다. 그 중 GridCellControl 오브젝트는 Grid에 바인딩된 데이터를 실제 Grid에 출력하는 중요한 역할을 합니다. 따라서 Grid에 원하는 형태로 데이터를 출력하거나 연산처리를 하기 위해서는 GridCellControl 오브젝트를 설정해야 합니다.

GridCellControl 오브젝트를 설정하려면 Grid Contents Editor를 이용하는 방법과 스크립트에서 메소드를 호출하는 두 가지 방법이 있습니다.

• Grid Contents Editor를 이용하는 방법은 설정하기 원하는 Cell을 선택한 후 Properties 창에서 원하는 속성을 설정합니다. 이 방법은 애플리케이션 개발 시에 Cell 속성을 설정하는 경우에 사용합니다.

• 스크립트에서 메소드를 호출하는 방법은 getCellProperty, setCellProperty 메소드를 사용하여 속성을 설정합니다. getCellProperty 메소드는 지정한 Cell의 속성값을 반환하는 메소드이고, setCellProperty 메소드는 지정한 Cell의 속성값을 설정하는 메소드입니다. 이 방법은 애플리케이션 수행 중에 Cell 속성을 설정하는 경우에 사용합니다.

this.btn_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var nCellIdx = this.Grid00.currentcell;

	var varCellProp = this.Grid00.getCellProperty("body",nCellIdx,"displaytype");

	var bRet = this.Grid00.setCellProperty("body",nCellIdx,"displaytype","button");
};

Grid Contetns Editor를 이용하는 방법은 다른 Grid 예제에서 계속해서 다뤄왔기 때문에 이번 예제에서는 스크립트에서 메소드를 사용하여 Cell 속성을 설정하는 방법을 중심으로 설명합니다.

예제

다음은 getCellProperty, setCellProperty 메소드를 사용하여 지정한 Cell의 속성값을 가져오거나 설정하는 Grid 예제입니다. 예제에는 getCellProperty와 setCellProperty 메소드를 호출하는 두 개의 버튼이 존재합니다.

• getCellProperty 버튼은 현재 선택한 Cell의 displaytype 속성값을 화면에 팝업으로 출력합니다. 아래 그림은 Salary Column의 Cell을 선택한 후 getCellProperty를 수행한 결과입니다. Cell의 displaytype 속성이 currency로 설정되어 있음을 확인할 수 있습니다.

• setCellProperty 버튼은 현재 선택한 Cell의 displaytype 속성값을 buttoncontrol으로 설정합니다. 아래 그림은 Salary Column의 Cell을 선택한 후 setCellProperty를 수행한 결과입니다. Cell의 모양이 버튼으로 변경되었고 getCellProperty 버튼을 눌러 확인해보면 buttoncontrol으로 나옴을 알 수 있습니다.

sample_grid_27.xfdl

예제에서 사용한 핵심 기능

getCellProperty

Grid Cell의 특정 속성 값을 반환하는 메소드입니다.

var strHeadCellColor = this.Grid00.getCellProperty( "head", 0, "color" );

setCellProperty

Grid Cell의 특정 속성 값을 설정하는 메소드입니다.

var bSucc = this.Grid00.setCellProperty( "head", 0, "color", "black");

currentcell

Grid에서 현재 선택된 Cell의 인덱스를 갖는 속성입니다. 인덱스는 0부터 시작하며 선택된 Cell이 없는 경우 -1 값을 갖습니다.

예제 구현 방법

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

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

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

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

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

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

getCellProperty 버튼의 id를 btn_getCellProperty로 설정하고 onclick 이벤트 핸들러를 추가합니다.

• getCellProperty 버튼의 onclick 이벤트 핸들러

현재 선택된 Cell의 displaytype 속성값을 가져와 팝업으로 출력합니다.

this.btn_getCellProperty_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	//Getting index of selected cell
	var nCellIdx = this.Grid00.currentcell;

	//Getting displaytype property of selected cell
	var varCellProp = this.Grid00.getCellProperty("body", nCellIdx, "displaytype");
	
	alert("displaytype of selected cell is " + varCellProp);
	
};

setCellProperty 버튼의 id를 btn_setCellProperty로 설정하고 onclick 이벤트 핸들러를 추가합니다.

• setCellProperty 버튼의 onclick 이벤트 핸들러

현재 선택된 Cell의 displaytype 속성을 buttoncontrol으로 설정합니다.

this.btn_setCellProperty_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	//Getting index of selected cell
	var nCellIdx = this.Grid00.currentcell;

	//Setting displaytype property of selected cell
	var bRet = this.Grid00.setCellProperty("body", nCellIdx, "displaytype", "buttoncontrol");
	
};

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

Grid의 Cell을 선택한 후 getCellProperty 버튼을 눌러 displaytype 속성의 값을 확인합니다. 마찬가지로 Cell을 선택한 후 setCellProperty 버튼을 눌러 displaytype 속성이 buttoncontrol으로 설정되는지 결과를 확인합니다.

셀 병합하기

그리드에서는 같은 열이나 행에 있는 두 개 이상의 셀을 하나의 셀로 병합하는 기능을 제공합니다. 이는 엑셀의 셀 병합 기능과 같은 기능으로 그리드에서 데이터를 표현하는데 매우 유용합니다.

셀 병합은 1A big cell(하나의 큰 셀로 실제 병합하는 방식)과 2Having child cells(하나의 셀로 병합되지만, 내부적으로는 여러 개의 3서브 셀로 구성되는 방식)의 두 가지로 나뉩니다.

• A big cell은 여러 셀을 하나로 합칠 때 가장 앞의 (셀 인덱스가 앞서는)셀을 기준으로 다른 셀들과 합쳐집니다. 다시 말해 기준이 되는 가장 앞의 셀을 제외한 다른 셀의 속성은 사라지고 기준이 되는 셀의 속성을 갖는 큰 셀로 병합됩니다. 이 방법은 셀을 실제로 하나로 병합할 필요가 있을 때 사용합니다.

• Having child cells는 외부적으로는 셀이 하나로 합쳐지지만, 내부적으로는 각 셀의 속성을 그대로 유지합니다. 따라서 아래 2와 같이 서브 셀들이 각각의 text를 그대로 화면에 출력하는 형태가 됩니다. 이 방법은 외부적으로 하나의 셀처럼 보여야 하고 내부적으로 별개의 셀로 동작할 필요가 있을 때 사용합니다.

예제

다음은 셀 병합을 수행한 Grid 예제입니다.

sample_grid_28.xfdl

그림에서 빨간색으로 표시된 부분이 A big cell 방식으로 병합한 셀이고, 파란색으로 표시된 부분이 Having child cells 방식으로 병합한 셀입니다.

A big cell 방식으로 병합한 셀은 실제 하나의 셀로 동작합니다. Having child cells 방식으로 병합한 셀은 하나의 셀처럼 보이나 내부적으로 서브 셀이 각각 데이터를 출력합니다.

그리드 예제의 실제 포맷은 아래와 같습니다. 위 그림의 병합된 셀 부분과 아래의 포맷을 비교해 보면 두 방식의 차이점을 확인할 수 있습니다.

예제에서 사용한 핵심 기능

없음.

예제 구현 방법

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

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

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

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

그리드를 더블 클릭하여 Grid Contents Editor를 열어 아래와 같이 Column과 Row를 구성합니다.

1. 그리드에 데이터셋을 바인딩합니다.

그리드를 선택한 후 Properties 창에서 binddataset 속성에 Dataset00을 바인딩합니다. 바인딩을 시도하면 데이터셋에 맞게 포맷을 재구성하려 시도하기 때문에 아래와 같은 Confirm 창이 뜹니다. 그러나 우리는 앞서 별도의 포맷을 사용하기 위해 만들어 놨기 때문에 No를 선택합니다.

2. 셀에 데이터를 바인딩합니다.

그리드에 데이터셋을 바인딩한 상태에서 Grid Contents Editor를 열어 body 밴드에 속한 각 셀의 text 속성에 데이터를 바인딩합니다. 아래 빨간 글씨에 있는 위치의 셀을 선택하여 글씨에 해당하는 값을 text 속성에서 선택합니다.

아래와 같이 셀을 병합합니다. 빨간색으로 표시된 부분은 A big cell 방식으로 병합하고 파란색으로 표시된 부분은 Having child cells 방식으로 병합합니다.

셀 병합은 Grid Contents Editor에서 병합하고자 하는 셀을 마우스 드래그로 선택한 후 마우스 오른쪽 버튼을 눌러 컨텍스트 메뉴에서 [Merge Cells]을 선택합니다. Merge Cells를 선택하면 세부 메뉴를 선택할 수 있는데 Merge Cells(A big cell)과 Merge Cells(Having child cells) 중에 원하는 병합 방식을 선택합니다.

병합이 잘못되었을 경우 Split Cell 메뉴로 병합을 풀 수 있습니다. Split Cell은 병합된 셀을 선택한 후 마우스 오른쪽 버튼을 눌러 컨텍스트 메뉴에서 [Split Cell]을 선택합니다.

병합이 모두 완료되면 OK 버튼을 눌러 Grid Contents Editor를 닫습니다.

• A big cell 병합 방법

• Having child cells 병합 방법

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

Grid의 각 셀이 병합되었는지 병합된 셀에 데이터가 정상적으로 출력되는지 확인합니다.

서브 셀 속성 설정하기

서브 셀은 병합된 셀 내부에 있는 셀입니다. 서브 셀이 모여 하나의 셀을 구성하며 병합된 후에도 속성을 그대로 유지하기 때문에 각각의 서브 셀을 컨트롤 할 수 있습니다.

그리드에서 서브 셀을 컨트롤하기 위해서 getSubCellProperty, setSubCellProperty 메소드를 사용합니다. 두 메소드를 사용하려면 반드시 셀 인덱스와 서브 셀 인덱스를 알아야 합니다. 그래야 서브 셀의 속성값을 읽어오거나 설정할 수 있습니다.

셀 인덱스는 셀 병합이 발생하면 달라집니다. 셀 병합으로 인해 줄어든 셀 수만큼 감소하여 조정되기 때문에 주의해야 합니다. 서브 셀은 병합된 셀의 셀 인덱스를 공유하면서 별도의 서브 셀 인덱스를 갖습니다. 서브 셀 인덱스는 병합된 셀 내에 정의된 순서대로 0부터 시작합니다.

아래는 병합한 셀을 포함하고 있는 그리드의 구조를 보여줍니다. Body 밴드의 각 셀에는 숫자가 마킹되어 있는데 빨간색이 셀 인덱스를 파란색이 서브 셀 인덱스를 나타냅니다. 그림에는 표시되어 있지 않지만 헤드 밴드도 Body 밴드와 같은 구조이므로 인덱스 구조 또한 같습니다.

셀과 서브 셀 인덱스는 좌상단에서 우하단쪽으로 순서대로 매겨집니다. 인덱스는 Grid Contents Editor에서 그리드 포맷을 보고 세면 되지만 구조가 복잡한 경우에는 Design Source 탭에서 직접 그리드 코드를 보는 방법도 있습니다. 그리드 코드에서 셀의 인덱스는 나열된 순서대로 매겨지기 때문에 소스에서 확인하는 것이 가장 확실합니다.

예제

다음은 병합된 셀을 갖는 그리드에서 서브 셀의 속성을 설정하고 값을 읽어오는 예제입니다.

1. 먼저 getSubCellProperty 버튼을 눌러 First Name에 해당하는 서브 셀의 background 속성값을 확인합니다. 아무 색깔도 설정되지 않았기에 undefined로 나옵니다.

2. setSubCellProperty 버튼을 눌러 해당 서브 셀의 background 속성값을 khaki로 변경합니다.

3. 다시 getSubCellProperty 버튼을 눌러 해당 서브 셀의 background 속성값을 확인하여 khaki로 변경되었는지 확인합니다.

두 개의 버튼은 구체적으로 다음과 같은 기능을 합니다.

• getSubCellProperty 버튼은 Body 밴드에서 First Name에 해당하는 셀의 backgroud 속성값을 읽어와 팝업으로 출력합니다. First Name은 5번째 셀에서 0번째 서브 셀입니다. setSubCellProperty 버튼을 누르지 않은 상태에서 getSubCellProperty 버튼을 누르면 background 속성에 아무 값도 설정되어 있지 않기 때문에 'undefind'로 나옵니다.

• setSubCellProperty 버튼은 Body 밴드에서 First Name에 해당하는 셀의 background 속성값을 'khaki'로 설정하여 배경색을 변경합니다. 버튼을 누르면 First Name 셀의 배경색이 Khaki로 변경됩니다.

sample_grid_29.xfdl

예제에서 사용한 핵심 기능

getSubCellProperty

Grid의 Cell이 서브 셀 구조일 경우 지정한 서브 셀의 속성값을 반환하는 메소드입니다.

setSubCellProperty

Grid의 Cell이 서브 셀 구조일 경우 지정한 서브 셀의 속성값을 설정하는 메소드입니다.

예제 구현 방법

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

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

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

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

그리드를 더블 클릭하여 Grid Contents Editor를 열어 아래와 같이 Column과 Row를 구성합니다.

1. 그리드에 데이터셋을 바인딩합니다.

그리드를 선택한 후 Properties 창에서 binddataset 속성에 Dataset00을 바인딩합니다. 바인딩을 시도하면 데이터셋에 맞게 포맷을 재구성하려 시도하기 때문에 아래와 같은 Confirm 창이 뜹니다. 그러나 우리는 앞서 별도의 포맷을 사용하기 위해 만들어 놨기 때문에 No를 선택합니다.

2. 셀에 데이터를 바인딩합니다.

그리드에 데이터셋을 바인딩한 상태에서 Grid Contents Editor를 열어 body 밴드에 속한 각 셀의 text 속성에 데이터를 바인딩합니다. 아래 빨간 글씨에 있는 위치의 셀을 선택하여 글씨에 해당하는 값을 text 속성에서 선택합니다.

아래와 같이 셀을 병합합니다. 빨간색으로 표시된 부분은 A big cell 방식으로 병합하고 파란색으로 표시된 부분은 Having child cells 방식으로 병합합니다.

셀 병합은 Grid Contents Editor에서 병합하고자 하는 셀을 마우스 드래그로 선택한 후 마우스 오른쪽 버튼을 눌러 컨텍스트 메뉴에서 [Merge Cells]을 선택합니다. Merge Cells를 선택하면 세부 메뉴를 선택할 수 있는데 Merge Cells(A big cell)과 Merge Cells(Having child cells) 중에 원하는 병합 방식을 선택합니다.

병합이 잘못되었을 경우 Split Cell 메뉴로 병합을 풀 수 있습니다. Split Cell은 병합된 셀을 선택한 후 마우스 오른쪽 버튼을 눌러 컨텍스트 메뉴에서 [Split Cell]을 선택합니다.

병합이 모두 완료되면 OK 버튼을 눌러 Grid Contents Editor를 닫습니다.

• A big cell 병합 방법

• Having child cells 병합 방법

• Body 밴드에서 First 칼럼이 바인딩된 셀의 backgroud 속성값을 읽어와 팝업으로 출력합니다. First 칼럼이 바인딩된 셀은 5번 셀의 0번 서브 셀입니다.

• getCellProperty 버튼의 onclick 이벤트 함수

this.btn_getCellProperty_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var varProperty = this.Grid00.getSubCellProperty("body", 5, 0, "background");	
	
    alert("Background value of first name sub cell: " + varProperty);
};

• Body 밴드에서 First 칼럼이 바인딩된 셀의 background 속성값을 khaki로 설정하여 배경색을 변경합니다. First 칼럼이 바인딩된 셀은 5번 셀의 0번 서브 셀입니다.

• setSubCellProperty 버튼의 onclick 이벤트 함수

this.btn_setCellProperty_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var bRet = this.Grid00.setSubCellProperty("body", 5, 0, "background", "khaki");	
};

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

우선 setSubCellProperty 버튼을 눌러 First 칼럼의 배경색이 변경되는지 확인합니다. 그런 후 getSubCellProperty 버튼을 눌러 First 칼럼의 배경색 설정값을 확인합니다.

일부 데이터를 감추어 표시하기

Grid에 표시하는 데이터 중에서 전화번호나 주소 정보와 같이 모든 데이터를 표시하기 곤란할 경우, 일부를 감추어야 할 필요가 있습니다. 표시되는 문자열 일부를 지정해 감추는 방법을 살펴봅니다.

예제

Grid에 표시되는 데이터 중 전화번호 뒷자리 4자리를 "****"로 표시합니다.

sample_grid_41.xfdl

예제에서 사용한 핵심 기능

maskeditformat

Grid Contents Editor에서 maskeditformat 속성값을 지정하면 원하는 부분을 감추어 표시할 수 있습니다. "{ }"문자로 마스크 문자를 감싸면 해당 마스크 문자가 "*" 문자로 대체되어 출력됩니다. 입력되는 문자 일부를 감추어 표시하기 위해 사용합니다.

예제 구현 방법

화면에 Grid를 배치하고 Dataset 오브젝트를 생성합니다. Dataset 오브젝트의 데이터는 아래와 같이 작성합니다.

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

Grid 컴포넌트를 더블 클릭하면 Grid Contents Editor가 실행됩니다. Tel 칼럼을 선택하고 속성창에서 displaytype 속성값은 "mask"로 지정합니다. 그리고 maskedittype 속성값을 "string"으로 지정하고 maskeditformat 속성값은 "###-{####}"으로 지정합니다.

전화번호는 7글자로 입력되어 있는데 그 중에서 앞자리 3글자와 "-" 문자를 제외한 뒷자리 4글자는 감추어 표시한다는 의미입니다.

QuickView(Ctrl + F6)를 실행하여 결과를 확인합니다. 전화번호 뒷자리가 "*" 문자로 표시되는지 확인합니다.

선택한 Row 전체 칼럼을 입력 상태로 변환하기

Cell 오브젝트의 edittype 속성값을 지정한 경우에는 입력된 값을 편집할 수 있습니다. 하지만 셀을 선택했을때만 입력 상태로 변환되기 때문에 해당 항목을 입력할 수 있는 것인지 명확하게 알 수 없습니다. 그렇다고 Grid 컴포넌트 자체를 편집 상태로 보여주면 가독성이 줄어들 수 있습니다.

이번 예제에서는 특정 Row를 선택했을때 해당 Row 전체 칼럼을 입력 상태처럼 보이도록 변환해서 사용성을 높여주는 방법을 보여줍니다.

예제

특정 Row를 마우스로 클릭하거나 키보드로 이동해서 선택한 경우 해당 Row의 모든 칼럼이 입력 상태로 표시됩니다.

sample_grid_42.xfdl

예제에서 사용한 핵심 기능

comp.parent

Grid 컴포넌트 Cell 오브젝트에서 expr 속성값을 처리할 때는 Form에서 생성한 함수나 컴포넌트에 직접 접근할 수가 없습니다. expr 속성값을 가지는 오브젝트에만 comp라는 이름으로 접근할 수 있습니다. 그래서 Form에 접근하기 위해서는 comp.parent로 접근합니다.

예제 구현 방법

Grid 컴포넌트를 배치하고 2개의 Dataset 오브젝트를 추가합니다. 하나는 전체 데이터를 담을 것이고, 나머지 하나는 Combo 컨트롤을 처리하기 위해 사용합니다. 첫번째 Dataset은 Grid 컴포넌트에 바인딩합니다.

첫번째 Dataset을 바인딩한 후 Grid 컴포넌트를 더블클릭해 Grid Content Editor를 실행합니다. 각 칼럼별로 아래와 같이 지정합니다.

Name
displaytype: expr:comp.parent.iCurrow==currow?'editcontrol':'normal'
edittype: normal

Department
displaytype: expr:comp.parent.iCurrow == currow ? 'combocontrol' : 'combotext'
edittype: combo
combodataset: Dataset01
combocodecol: code
combodatacol: text

Vacation
displaytype: expr:comp.parent.iCurrow == currow ? 'checkboxcontrol' : 'normal'
edittype: checkbox

사용자가 선택한 Grid 컴포넌트의 Row 위치가 바뀔 때마다 바인딩된 Dataset 오브젝트의 onrowposchanged 라는 이벤트가 발생합니다. 이때 변경된 위치 정보(newrow)를 확인할 수 있는데 이 정보를 iCurrow라는 변수값으로 담습니다.

this.Dataset00_onrowposchanged = function(obj:nexacro.NormalDataset,e:nexacro.DSRowPosChangeEventInfo)
{
	this.iCurrow = e.newrow;
};

이렇게 하면 Cell 오브젝트의 displaytype 속성값에 지정한 expr이 어떻게 동작하는지 설명할 수 있습니다. expr 내에 사용한 currow는 모든 Row의 위치 정보입니다. 즉 사용자가 선택한 Row 위치와 각 Row 위치를 비교하는 것입니다. 조건이 맞는 경우에만 입력 상태처럼 보이도록 displaytype 속성값을 변경합니다.

comp.parent.iCurrow == currow?'editcontrol':'normal'

QuickView(Ctrl + F6)로 실행한 후 Grid의 선택한 Row를 변경해가면서 입력 상태로 변환되는지 확인합니다.

PopupDiv에서 선택한 값을 데이터로 입력하기

입력할 항목이 간단한 경우에는 edittype 속성값을 "combo"로 지정하고 목록에서 선택할 수 있지만 항목에 대한 설명이 있거나 복잡한 경우에는 새로운 창을 띄워서 선택하는 것이 편할 수 있습니다. PopupDiv 컴포넌트를 활용해 선택한 값을 입력하는 방법을 살펴봅니다.

예제

셀 영역에 버튼을 클릭하면 PopupDiv 컴포넌트에 배치한 Grid 컴포넌트가 표시되고 항목을 더블클릭해 선택하면 데이터가 입력됩니다.

sample_grid_44.xfdl

예제에서 사용한 핵심 기능

screenToClientX , screenToClientY

마우스 이벤트에서 얻을 수 있는 좌표값 중에서 screenx, screeny 값은 사용하고 있는 모니터를 기준으로 표시되는 좌표값입니다. 모니터를 두개 사용하고 있다면 전체 모니터를 기준으로 좌표값이 표시됩니다. 때문에 실제 애플리케이션을 기준으로 표시되는 값을 얻으려면 screenToClientX 또는 screenToClientY 메소드를 사용합니다.

trackPopupByComponent

PopupDiv 컴포넌트는 화면에 표시되지 않다가 trackPopupByComponent 메소드 호출 시 지정된 위치에 보여집니다. 6번째 파라미터는 콜백 함수인데 closePopup 메소드 호출 시 실행되는 함수입니다. 예제에서는 Grid에서 항목 선택 시 PopupDiv 컴포넌트가 닫히면서 콜백 함수를 실행합니다.

closePopup

PopupDiv 컴포넌트를 닫습니다. 이때 파라미터를 지정하면 해당 값이 콜백 함수로 넘겨집니다. 여기에서는 Grid 컴포넌트에서 선택한 값을 넘겨줍니다.

예제 구현 방법

Grid 컴포넌트를 배치하고 Dataset 오브젝트를 추가합니다. Dataset 오브젝트에는 name 칼럼만 항목을 채우고 Item 칼럼은 비워놓습니다. Item 칼럼은 PopupDiv에 있는 Grid 컴포넌트에서 선택한 값을 채울겁니다. 데이터를 설정하면 Grid 컴포넌트에 바인딩합니다.

PopupDiv 컴포넌트는 띄울때 위치를 다시 지정해주기 때문에 화면 디자인 시 위치는 아무곳에나 배치해도 상관없습니다. 주로 다른 컴포넌트를 가리지 않도록 주의해 사용하지 않는 영역에 배치합니다. PopupDiv 컴포넌트 안에 Grid 컴포넌트를 배치합니다. 그리고 바인딩할 Dataset 오브젝트를 생성하고 데이터를 채운 후 바인딩해줍니다.

셀 영역에 작은 버튼을 추가할 수 있습니다. 뭔가 확장 기능을 호출할때 주로 사용하는 버튼입니다. expandshow 속성값을 "show"로 변경하면 돋보기 모양의 이미지 버튼이 추가됩니다. 다른 속성값을 설정하면 이미지나 크기를 변경할 수 있습니다.

expandshow 속성값을 변경해 표시된 버튼 클릭 시 실행할 이벤트 함수를 작성합니다. PopupDiv 컴포넌트를 띄운 후 다시 값을 설정해주어야 하기 때문에 column, row 정보를 임시로 저장해놓습니다. 그리고 클릭한 위치에 PopupDiv 컴포넌트를 띄워주기 위해서 screenToClientX, screenToClientY 메소드를 사용해 좌표값을 설정합니다.

this.col;
this.row;

this.Grid00_onexpandup = function(obj:nexacro.Grid,e:nexacro.GridMouseEventInfo)
{
	this.col = e.cell;
	this.row = e.row;
	var nX = system.screenToClientX(this, e.screenx);
	var nY = system.screenToClientY(this, e.screeny);		
 	this.PopupDiv00.trackPopupByComponent(this, nX, nY, null, null, "call_back");
};

PopupDiv 컴포넌트 내 배치한 Grid 컴포넌트에서 원하는 항목을 찾아 더블클릭했을 때 이벤트를 처리합니다. 선택한 항목값을 가져와서(getColumn) 콜백함수에 전달합니다.

this.PopupDiv00_Grid00_oncelldblclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
	var value = this.Dataset00.getColumn(e.row , 1);
	this.PopupDiv00.closePopup(value);
};

PopupDiv 컴포넌트의 closePopup 메소드 실행 시 콜백 함수가 호출됩니다. onexpandup 이벤트 함수를 처리하면서 임시로 저장해놓았던 column, row 정보와 PopupDiv 컴포넌트가 닫히면서 전달된 값을 칼럼값으로 지정해줍니다.

this.call_back = function (strId,str)
{
	this.Dataset01.setColumn( this.row, this.col , str)
};

QuickView(Ctrl + F6)로 실행한 후 원하는 위치의 expand 버튼을 클릭하고 PopupDiv 컴포넌트에 표시된 항목을 더블클릭합니다.

데이터가 없는 경우 Calendar 대신 대체 텍스트 표시하기

문자열만 표시하는 경우에는 데이터가 없을 때 아무것도 표시하지 않으면 되지만 특정 형식을 가지는 데이터인 경우에는 어떤 식으로 표시할지 모호할 수 있습니다. 특히 날짜 형식을 표시하는 경우에는 여러가지 요구사항이 있을 수 있습니다. 이런 경우 데이터를 어떻게 표시하는지 이번 예제에서 살펴봅니다.

예제

데이터가 null인 경우 대체 텍스트를 표시합니다.

sample_grid_45.xfdl

예제에서 사용한 핵심 기능

calendardisplaynulltext

calendardisplaynulltype 속성값을 "nulltext"로 설정한 경우 대체 텍스트를 지정하는 속성입니다. calendardisplaynulltype 속성값을 "nulltext"로 설정하지 않으면 calendardisplaynulltext 속성값이 적용되지 않습니다.

calendardisplaynulltype

속성값이 "default"인 경우에는 "0000/01/01" 형식으로 값을 표시합니다.

예제 구현 방법

Grid 컴포넌트 하나를 먼저 배치합니다. 그리고 바인딩할 Dataset 오브젝트를 아래와 같이 생성하고 바인딩합니다. date 칼럼의 type은 "DATE"로 지정하고 두번째 Row 값은 빈값으로 세번째 Row 값은 Empty 값으로 설정합니다.

Grid 컴포넌트를 선택하고 더블클릭해서 Grid Contents Editor를 실행한 후 date 칼럼 Cell 오브젝트의 displaytype 속성값과 edittype 속성값을 "date"로 지정합니다.

QuickView(Ctrl + F6)로 실행한 후 빈 항목의 날짜값이 "0000-01-01" 형식으로 표시되는 것을 확인합니다.

Grid 컴포넌트를 복사해서 하나 더 생성합니다. 그리고 calendardisplaynulltype 속성값은 "nulltext"로 설정하고 calendardisplaynulltext 속성값은 "NULL"로 지정합니다.

QuickView(Ctrl + F6)로 실행한 후 빈 항목의 날짜값이 어떻게 표시되는지 확인합니다. 그리고 편집모드에서 어떻게 표시되는지도 확인해봅니다.

조건에 따라 displaytype 속성값 변경하기

Cell 오브젝트의 특정 속성값을 지정할때는 setCellProperty 메소드를 사용하는데 이때 expr 속성을 같이 사용하면 조건에 따라 속성값을 지정할 수 있습니다.

예제

버튼을 클릭하면 Column2 항목이 "Y"인 Row의 Column0 항목의 displaytype이 변경됩니다.

sample_grid_46.xfdl

예제에서 사용한 핵심 기능

setCellProperty

네 번째 파라미터로 설정할 속성값을 지정하는데 이때 expr 속성을 사용할 수 있습니다. 예를 들어 expr:Column2=='Y' 와 같은 조건을 추가하면 Column2의 값에 따라 다른 속성값을 지정할 수 있습니다.

예제 구현 방법

Grid 컴포넌트와 Button 컴포넌트를 배치합니다. Dataset 오브젝트를 하나 추가하고 아래와 같이 데이터값을 설정합니다. 그리고 Dataset 오브젝트를 Grid 컴포넌트에 바인딩해줍니다.

Button 컴포넌트를 클릭했을 때 Cell 오브젝트의 속성을 변경합니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Grid00.setCellProperty("body", 0, "displaytype", 
		"expr:Column2=='Y'?'checkboxcontrol':'normal'");
	this.Grid00.setCellProperty("body", 0, "edittype", 
		"expr:Column2=='Y'?'checkbox':'none'")
};

QuickView(Ctrl + F6)로 실행한 후 버튼을 클릭하고 첫번째 칼럼의 표시 형식이 변경되는 것을 확인합니다.

칼럼값이 "Y", "N"인 경우 checkboxcontrol 사용하기

Grid 컴포넌트 내에서 체크박스를 사용할때는 데이터값이 1, 0으로 설정되어야 합니다. 하지만 원본 데이터는 다양한 형태로 들어올 수 있습니다. 이런 경우 어떻게 체크박스의 표시를 제어할 수 있는지 살펴봅니다.

예제

원본 데이터는 "Y", "N"으로 체크되어 있지만, 체크박스가 표시됩니다. 체크박스의 체크 상태를 바뀌면 원본 데이터의 값이 "Y" 또는 "N"으로 입력됩니다.

sample_grid_50.xfdl

예제에서 사용한 핵심 기능

oncolumnchanged

Dataset 오브젝트의 칼럼 값이 변경되는 경우 발생하는 이벤트입니다. 예제에서는 체크박스의 상태가 변경될때 1 또는 0이라는 값이 설정되는데 이를 강제적으로 "Y" 또는 "N"으로 변경합니다.

예제 구현 방법

Grid 컴포넌트를 배치합니다. Dataset 오브젝트를 하나 추가하고 아래와 같이 데이터값을 설정합니다. 그리고 Dataset 오브젝트를 Grid 컴포넌트에 바인딩해줍니다.

Grid 컴포넌트를 더블클릭해 Grid Contents Editor를 실행합니다. 칼럼을 하나 추가합니다. 이때 [Add]가 아니라 [Insert]를 사용하면 선택된 칼럼 앞쪽에 새로운 칼럼을 추가할 수 있습니다.

head 영역의 셀을 선택하고 text 속성값을 수정해줍니다. 그리고 추가한 첫번째 body 셀을 선택하고 아래와 같이 설정합니다. 처음 바인딩한 칼럼과 마찬가지로 Column0의 데이터를 사용합니다. 하지만 expr 속성에서 데이터에 따라 값을 1 또는 0으로 변환해줍니다.

QuickView(Ctrl + F6)로 실행한 후 Grid 컴포넌트의 데이터가 원하는 형태로 표시되는지 확인합니다. 하지만 체크박스의 상태를 변경하면 두번째 칼럼이 "Y"가 아니라 1로 표시되는 것을 확인할 수 있습니다. 그리고 체크박스의 상태도 변경되지 않습니다.

체크박스 영역의 상태를 변경했을때 정상적으로 데이터를 처리하기 위해 oncolumnchanged 이벤트를 추가하고 이벤트 함수를 작성합니다. enableevent 속성값을 제어하는 것은 대용량의 데이터 처리시에 권장하고 있습니다. 아래 예제처럼 1건의 데이터를 변경하는 경우에는 큰 차이가 없을 수 있습니다.

this.Dataset00_oncolumnchanged = function(obj:nexacro.NormalDataset,e:nexacro.DSColChangeEventInfo)
{
	if(e.columnid == "Column0")
	{
		obj.set_enableevent(false);
		if(e.newvalue == '1')
		{
			obj.setColumn(e.row,"Column0",'Y');
		} else if(e.newvalue == '0')
		{
			
			obj.setColumn(e.row,"Column0",'N');  
		}
		obj.set_enableevent(true);
	}
};

QuickView(Ctrl + F6)로 실행한 후 Grid 컴포넌트의 데이터가 원하는 형태로 표시되고 변경되는지 확인합니다.

URL 링크 클릭 시 해당 사이트로 이동하기

바인딩된 데이터에 URL 링크가 포함된 경우 Grid 컴포넌트 클릭 시 해당 사이트로 이동하는 예제입니다.

예제

화면에 보이지 않는 bLink 칼럼값이 "Y"인 경우에는 url 칼럼에 밑줄이 표시되고 마우스 커서 모양이 변경됩니다. 해당 셀 클릭 시 지정된 사이트로 이동합니다.

sample_grid_53.xfdl

예제에서 사용한 핵심 기능

displaytype

displaytype 속성값을 "decoratetext"로 지정하면 줄바꿈이나 Decorate 태그를 사용할 수 있습니다. 지정된 태그가 없는 경우에는 텍스트를 그대로 표시합니다.

execBrowser

지정된 URL 경로를 웹브라우저에서 실행합니다. 웹브라우저에서 메소드가 실행된 경우에는 해당 웹브라우저의 새탭 또는 새창으로 실행합니다.

예제 구현 방법

Grid 컴포넌트를 배치합니다. Dataset 오브젝트를 하나 추가하고 아래와 같이 데이터값을 설정합니다. 그리고 Dataset 오브젝트를 Grid 컴포넌트에 바인딩해줍니다.

bLink 칼럼은 사용하지 않으니 삭제합니다. url 칼럼 항목을 선택하고 displaytype 속성값을 "decoratetext"로 지정하고 expr 속성값을 아래와 같이 지정합니다. bLink 칼럼값이 "Y"인 경우에는 Decorate 태그를 추가하고 그렇지 않은 경우에는 그냥 url 칼럼값을 사용합니다.

bLink=='Y'?"<u v='true'>"+url+"</u>":url

cssclass 속성값도 아래와 같이 설정합니다.

cssclass: expr:bLink=='Y'?'sample_grid_53_cursor':''

.Grid .body .row .cell.sample_grid_53_cursor[status=mouseover]
{
	cursor : pointer;
}

셀 클릭 시 해당 사이트로 이동하는 기능을 추가합니다. bLink 칼럼값이 "Y"인 경우에만 이동하도록 조건을 추가합니다.

this.Grid00_oncellclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
	if( e.cell == 1 ){
		if( this.Dataset00.getColumn(e.row, "bLink") == "Y")		
			system.execBrowser(this.Dataset00.getColumn(e.row, 1));
	}
};

QuickView(Ctrl + F6)로 실행한 후 URL 클릭 시 해당 사이트로 이동하는지 확인합니다.

expr 내에서 사용할 수 있는 속성

expr 내에서 사용할 수 있는 속성을 정리해봅니다.

예제

expr 속성값에 지정된 항목을 Grid 컴포넌트에 표시합니다. 선택된 cell을 변경하면 표시되는 항목이 바뀝니다.

sample_grid_57.xfdl

예제에서 사용한 핵심 기능

currentcell

선택된 Cell 인덱스를 표시합니다. Row 단위로 선택하는 경우에는 최초 선택 시 인덱스 값을 표시하기 때문에 예제에서는 Grid 컴포넌트의 selecttype 속성값을 "cell"로 지정합니다.

예제 구현 방법

Grid 컴포넌트를 배치합니다. Dataset 오브젝트를 하나 추가하고 아래와 같이 데이터값을 설정합니다. 그리고 Dataset 오브젝트를 Grid 컴포넌트에 바인딩해줍니다.

Grid 컴포넌트를 더블 클릭해 Grid Contents Editor를 실행하고 각 칼럼의 expr 속성값을 아래와 같이 지정합니다.

"this.col: "+this.col+"\n"+"dataset.rowcount: "+dataset.rowcount+"\n"+"dataset.rowposition: "+dataset.rowposition+"\n"+"comp.currentcell: "+comp.currentcell+"\n"+"currow: "+currow

데이터를 모두 표시하기 위해 autofittype 속성값은 "col", autosizingtype 속성값은 "row"로 지정합니다. 그리고 currentcell 속성값이 잘 표현될 수 있도록 selecttype 속성값을 "cell"로 수정합니다.

QuickView(Ctrl + F6)로 실행한 후 Grid 컴포넌트에 표시되는 데이터를 확인합니다. col, rowcount, currow 속성값은 고정되어 표시되고 rowposition, currentrow 속성값은 선택된 cell에 따라 값이 바뀝니다.

스크립트로 suppress 속성 적용하기

스크립트 내에서 동적으로 suppress 속성을 적용할 수 있습니다.

예제

Column0, Column1 head 영역을 클릭하면 suppress가 동작합니다. 버튼을 클릭하면 초기 상태로 돌아갑니다.

sample_grid_58.xfdl

예제에서 사용한 핵심 기능

suppress

Cell 오브젝트의 속성값을 지정하는 경우에는 setCellProperty 메소드를 사용합니다. 예제에서는 body 영역의 Column0, Column1에 해당하는 suppress 속성값을 변경합니다.

예제 구현 방법

Grid 컴포넌트를 배치합니다. Dataset 오브젝트를 하나 추가하고 아래와 같이 데이터값을 설정합니다. 그리고 Dataset 오브젝트를 Grid 컴포넌트에 바인딩해줍니다.

Grid 컴포넌트의 head 영역 클릭 시 해당 칼럼의 suppress 속성값을 변경합니다. 첫번째 칼럼을 클릭한 경우에는 첫번째 칼럼만, 두번째 칼럼을 클릭한 경우에는 첫번째와 두번째 칼럼의 suppress 속성값을 변경합니다.

this.Grid00_onheadclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
	var sCol = e.col;
	if(sCol==0)
	{
		this.Grid00.setCellProperty("Body", 0, "suppress", 1);
	} else if(sCol==1)	{
		this.Grid00.setCellProperty("Body", 0, "suppress", 1);
		this.Grid00.setCellProperty("Body", 1, "suppress", 2);
	}
};

버튼 클릭 시 suppress 상태를 초기화합니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
		this.Grid00.setCellProperty("Body", 0, "suppress", 0);
		this.Grid00.setCellProperty("Body", 1, "suppress", 0);
};

QuickView(Ctrl + F6)로 실행한 후 Grid 컴포넌트의 head 영역을 클릭해 suppress 상태가 변경되는 것을 확인합니다.

데이터가 없는 영역을 채우기

데이터 숫자가 동적으로 변경되는 경우에는 Grid 컴포넌트의 크기가 고정된 경우 데이터가 없는 영역은 아무것도 표시되지 않습니다. 이런 경우 빈 Row를 보여주는 방법을 설명합니다.

예제

Combo 컴포넌트의 항목 선택에 따라 7번째 Row 아래의 표시 방법이 변경됩니다.

sample_grid_59.xfdl

예제에서 사용한 핵심 기능

fillareatype

Grid 컴포넌트에서 Row가 표시되지 않는 영역을 채우는 방식을 지정합니다. 예제에서는 Combo 컴포넌트에서 속성값 선택 시 반영하도록 했습니다.

예제 구현 방법

Grid 컴포넌트를 배치합니다. Dataset 오브젝트를 하나 추가하고 아래와 같이 데이터값을 설정합니다. 그리고 Dataset 오브젝트를 Grid 컴포넌트에 바인딩해줍니다.

fillareatype 속성값을 "datarow" 또는 "allrow"로 설정했을때 보여지는 상수 영역을 표시하기 위해 칼럼 하나를 추가합니다. Grid 컴포넌트를 더블클릭해 Grid Contents Editor를 실행하고 칼럼을 추가합니다.

추가한 칼럼의 text 속성값은 "TEST"라는 고정된 문자열을 지정합니다. 이렇게 하면 첫번째 칼럼은 항상 "TEST"라는 문자열로 표시됩니다. Column0 항목의 displaytype 속성값은 "checkboxcontrol"으로 지정합니다.

fillareatype 속성값을 Combo 컴포넌트에서 설정합니다. Combo 컴포넌트를 배치하고 속성값을 innerDataset 항목값으로 지정합니다.

onitemchanged 이벤트 함수에 선택된 Combo 컴포넌트의 값을 fillareatype 속성값으로 지정하는 코드를 추가합니다.

this.Combo00_onitemchanged = function(obj:nexacro.Combo,e:nexacro.ItemChangeEventInfo)
{
	this.Grid00.set_fillareatype(e.posttext);
};

QuickView(Ctrl + F6)로 실행한 후 Grid 컴포넌트의 head 영역을 클릭해 suppress 상태가 변경되는 것을 확인합니다.

특정 Row를 깜빡이게 표시하기

타이머와 cssclass 속성값을 사용해 특정 Row를 깜빡이는 것처럼 표시합니다. blinkCell, blinkCellByInterval 메소드를 사용하는 방법도 같이 살펴봅니다.

예제

Grid 컴포넌트에 표시되는 두번째 Row의 flag 칼럼값이 바뀌면서 배경색이 깜빡이는 것처럼 표시됩니다. [blinkCell] 버튼 클릭 시에는 blinkCell, blinkCellByInterval 메소드를 실행해 배경색이 깜빡이는 것처럼 표시합니다.

sample_grid_62.xfdl

예제에서 사용한 핵심 기능

cellexprupdatecondition

expr값이 변경되었을때 값을 갱신하는 범위를 지정합니다. 기본값은 "all"입니다. 특정 Cell에 해당하는 expr값이 바뀌면 다른 Row, Cell을 같이 갱신합니다. 하지만 예제처럼 특정 영역의 배경색만 바꾸고 나머지 영역에는 영향을 미치지 않는다면 속성값을 "none"으로 설정합니다. 설정에 따라 애플리케이션의 성능에 영향을 미칠 수 있습니다.

blinkCell

특정 Row의 지정된 칼럼 항목에 깜빡임 효과를 처리합니다. 지정된 시간동안 blinked userstatus가 적용되고 userstatus가 해제되는 것을 반복합니다.

blinkCellByInterval

특정 Row의 지정된 칼럼 항목에 깜빡임 효과를 처리합니다. 500밀리초동안 blinked userstatus가 적용되고 지정된 시간동안 userstatus가 해제되는 것을 반복합니다.

예제 구현 방법

Grid 컴포넌트와 Button 컴포넌트를 배치합니다. Dataset 오브젝트를 하나 추가하고 아래와 같이 데이터값을 설정합니다. 그리고 Dataset 오브젝트를 Grid 컴포넌트에 바인딩해줍니다.

cssclass 속성값을 아래와 같이 지정합니다. 이때 body row에 해당하는 모든 칼럼을 다 선택해주면 한번에 속성값을 지정할 수 있습니다.

expr:comp.parent.setblink(currow)

속성창에서 값은 한번만 지정해주지만 실제 값은 각 칼럼 속성으로 들어갑니다.

<Band id="body">
	<Cell text="bind:label" cssclass="expr:comp.parent.setblink(currow)"/>
	<Cell col="1" text="bind:level" cssclass="expr:comp.parent.setblink(currow)"/>
	<Cell col="2" text="bind:flag" cssclass="expr:comp.parent.setblink(currow)"/>

Grid 컴포넌트를 선택하고 cellexprupdatecondition 속성값을 설정합니다. Grid 컴포넌트같은 경우에는 사용할 수 있는 속성이 많기 때문에 검색 기능을 사용하면 좀 더 빠르게 찾을 수 있습니다. 해당 속성을 찾아서 "none"으로 값을 지정합니다.

타이머 기능을 사용해 1초마다 배경색이 바뀌도록 설정합니다. 타이머 이벤트가 발생하면 flag 칼럼값을 1에서 0으로 또는 0에서 1로 변경합니다. 칼럼값이 바뀌면 setblink 함수에서 반환하는 값도 바뀌게 되고 각 Cell의 cssclass 속성값이 바뀌게 됩니다.

this.styleArr = ["sample_grid_62_blink2", "sample_grid_62_blink1", "sample_grid_62_blinkcell"];
this.idx = 0 ;
this.blinkRow = 0 ;

this.sample_grid_62_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)
{
	this.setTimer(1, 1000);
};

this.sample_grid_62_ontimer = function(obj:nexacro.Form,e:nexacro.TimerEventInfo)
{
	var v = this.Dataset00.getColumn(e.timerid,2)^1;
	this.Dataset00.setColumn(e.timerid, 2, v);
	
	this.idx = v;
	this.blinkRow = e.timerid;
};

setblink 함수는 앞에서 cssclass 속성값에 expr로 작성한 함수입니다. 세번째와 네번째 Row인 경우에는 blinkCell, blinkCellByInterval 메소드를 실행하기 위해 cssclass 속성값이 "sample_grid_62_blinkcell"로 지정되도록 합니다.

this.setblink = function (nRow)
{
	if(nRow >= 2)
	{
		return this.styleArr[2];
	}
	else if(this.blinkRow == nRow)
	{
		return this.styleArr[this.idx ];
	}
	return "";
};

xcss 파일을 열어서 아래 코드를 추가합니다. Advanced 탭에서 선택자를 추가하거나 Text 탭에서 직접 코드값을 입력할 수 있습니다.

.Grid .body .row .cell.sample_grid_62_blink1
{		
	background : gold;
}

.Grid .body .row .cell.sample_grid_62_blink2
{		
	background : white;
}

.Grid .body .row .cell.sample_grid_62_blinkcell[userstatus=blinked]
{		
	background : gold;
	color : #666666;
}

버튼 클릭 시 blinkCell, blinkCellByInterval 메소드를 실행합니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Grid00.blinkCell(2, "label, level, flag", 5000, 5);
	this.Grid00.blinkCellByInterval(3, "label, level, flag", 500, 5);
};

blinkCell 메소드는 Row 인덱스값이 2인 세번째 Row에 깜빡임 효과를 적용합니다. 대상 칼럼은 3개 칼럼 모두이며 5초동안 5번 깜빡입니다. blinkCellByInterval 메소드는 Row 인덱스값이 3인 네번째 Row에 깜빡임 효과를 적용합니다. 대상 칼럼은 3개 칼럼 모두이며 1초 간격으로 깜빡임 효과를 적용합니다.

QuickView(Ctrl + F6)로 실행한 후 Grid 컴포넌트의 두번째 Row 배경색이 바뀌는 것을 확인합니다. 버튼을 클릭해서 세번째, 네번째 Row 배경색이 바뀌는 것도 확인합니다.

데이터 변경 시 Cell 글자색을 바꾸어 표시하기

사용자가 Grid 컴포넌트의 데이터를 바꾸었을때 데이터가 바뀐 것인지 쉽게 알 수 있도록 Cell 스타일을 변경하는 예제입니다.

예제

세 번째 칼럼의 체크박스 상태를 변경하면 첫 번째 칼럼의 글자색을 붉은색으로 표시합니다.

sample_grid_64.xfdl

예제에서 사용한 핵심 기능

getOrgColumn

초기 데이터값을 반환합니다. Cell 오브젝트의 edittype 속성값이 지정되어 있고 사용자가 데이터를 수정하면 getOrgColumn 메소드로 반환된 값과 현재 상태의 값과 다를 수 있습니다.

예제 구현 방법

Grid 컴포넌트를 배치합니다. Dataset 오브젝트를 하나 추가하고 아래와 같이 데이터값을 설정합니다. 그리고 Dataset 오브젝트를 Grid 컴포넌트에 바인딩해줍니다.

Column2 Cell의 edittype, displaytype 속성값을 수정합니다. edittype은 "checkbox", displaytype은 "checkboxcontrol"입니다. 그리고 Column0 Cell의 cssclass를 아래와 같이 설정합니다.

expr:Column2==dataset.getOrgColumn(currow,'Column2')?'':'sample_grid_64_changevalue'

Column2의 값이 getOrgColumn 메소드 결과값과 같으면 변경이 없다고 판단해서 cssclass를 지정하지 않고 값이 다르면 cssclass 속성값을 "sample_grid_64_changevalue"로 지정합니다. 이렇게 하면 값이 변경된 경우에만 Column0 Cell의 글자색이 붉은색으로 표시됩니다.

xcss 파일을 열어서 아래 코드를 추가합니다. Advanced 탭에서 선택자를 추가하거나 Text 탭에서 직접 코드값을 입력할 수 있습니다.

.Grid .body .row .cell.sample_grid_64_changevalue
{
	color : red;
}

QuickView(Ctrl + F6)로 실행한 후 체크박스의 상태를 변경했을때 Column0의 글자색이 변경되는 것을 확인합니다.

행번호 표시하기

currow 속성값을 사용해 행번호를 표시하는 방법을 살펴봅니다.

예제

No 칼럼의 행번호가 자동으로 표시됩니다.

sample_grid_66.xfdl

예제에서 사용한 핵심 기능

currow

Cell 오브젝트의 expr 속성값으로 지정하게 되면 현재 Row index를 반환합니다. 인덱스 값은 0부터 시작하기 때문에 행번호를 표시하기 위해서는 currow+1 계산식을 사용합니다.

예제 구현 방법

Grid 컴포넌트를 배치합니다. Dataset 오브젝트를 하나 추가하고 아래와 같이 데이터값을 설정합니다. 그리고 Dataset 오브젝트를 Grid 컴포넌트에 바인딩해줍니다.

Column0을 선택하고 [Insert] 메뉴를 선택합니다. 선택한 칼럼 앞에 새로운 칼럼을 추가합니다. 추가된 칼럼 Head row의 text 속성값을 "No"로 입력하고 Body row의 expr 속성값에 currow+1을 입력합니다.

QuickView(Ctrl + F6)로 실행한 후 행번호가 표시되는지 확인합니다.

트리 레벨에 따라 글자색 바꾸어 표시하기

Grid를 Tree 형태로 표현할때 특정 레벨의 글자색이나 다른 스타일 속성을 바꾸어 표시할 수 있습니다.

예제

트리 레벨에 따라 다른 색으로 글자를 표시합니다. 버튼 클릭 시 다른 색으로 변경해 표시합니다.

sample_grid_60.xfdl

예제에서 사용한 핵심 기능

treeitemtext

CellTreeItemControl 오브젝트 하위의 Control입니다. 텍스트가 표시되는 영역입니다. XCSS 편집기에서는 아래와 같이 접근할 수 있습니다.

.GridCellControl .celltreeitem .treeitemtext  /** O **/
{
	color : red;
}

.GridCellControl.sample_grid_60_font_red .celltreeitem .treeitemtext  /** X **/
{
	color : red;
}

예제 구현 방법

Grid 컴포넌트를 배치합니다. Dataset 오브젝트를 하나 추가하고 아래와 같이 데이터값을 설정합니다. 그리고 Dataset 오브젝트를 Grid 컴포넌트에 바인딩해줍니다.

Grid 컴포넌트의 속성 중 트리 형태를 표현하기 위한 속성값을 아래와 같이 수정합니다.

treeinitstatus="expand,all"
autofittype="col"
treeusecheckbox="false"
treeuseimage="true"
treeuseline="true"

첫번째 칼럼의 Cell 속성을 아래와 같이 수정합니다.

displaytype="treeitemcontrol" 
treelevel="bind:level" 
edittype="tree"

xcss 파일을 열어서 아래 코드를 추가합니다. Advanced 탭에서 선택자를 추가하거나 Text 탭에서 직접 코드값을 입력할 수 있습니다.

.Grid .body .row .cell.sample_grid_60_font_red .celltreeitem .treeitemtext
{		
	color : red;
}

.Grid .body .row .cell.sample_grid_60_font_blue .celltreeitem .treeitemtext
{		
	color : blue;
}

.Grid .body .row .cell.sample_grid_60_font_lightgreen .celltreeitem .treeitemtext
{		
	color : lightgreen;
}

다시 Grid Contents Editor를 실행하고 첫번째 칼럼의 Cell 속성 중에서 cssclass 속성값을 아래와 같이 수정합니다. level 칼럼값에 따라 다른 스타일 속성이 적용되도록 지정했습니다.

expr:level == 0?'sample_grid_60_font_red':level==1?'sample_grid_60_font_blue':'sample_grid_60_font_lightgreen'

QuickView(Ctrl + F6)로 실행한 후 트리 레벨에 따라 첫번째 칼럼 글자색이 변경된 것을 확인합니다.

화면에 Button 컴포넌트를 추가하고 onclick 이벤트 함수를 아래와 같이 생성합니다. cssclass 속성값을 스크립트에서 변경해서 현재 설정된 글자색을 바꿀 수 있습니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Grid00.setCellProperty("body", 0, "cssclass", 
		"expr:level == 0?'sample_grid_60_font_lightgreen':level==1?'sample_grid_60_font_red':'sample_grid_60_font_blue'");
};

QuickView(Ctrl + F6)로 실행한 후 버튼 클릭 시 글자색이 변경된 것을 확인합니다.

아이콘 이미지 바꾸어 표시하기

Grid를 Tree 형태로 표현할때 아이콘 이미지를 바꾸어 표시할 수 있습니다.

예제

오른쪽에 있는 Grid 컴포넌트의 아이콘만 다르게 표시합니다.

sample_grid_61.xfdl

예제에서 사용한 핵심 기능

-nexa-icon

TreeItemIconControl 오브젝트에서 사용할 아이콘 이미지 파일을 지정합니다. 하위 레벨을 가지고 있는 경우에는 접히거나 펴진 상태의 아이콘 이미지를 지정하며 마지막 트리인 경우에는 항목을 표시하는 아이콘 이미지를 지정합니다.

예제 구현 방법

Grid 컴포넌트를 배치합니다. Dataset 오브젝트를 하나 추가하고 아래와 같이 데이터값을 설정합니다. 그리고 Dataset 오브젝트를 Grid 컴포넌트에 바인딩해줍니다.

Grid 컴포넌트의 속성 중 트리 형태를 표현하기 위한 속성값을 아래와 같이 수정합니다.

treeinitstatus="expand,all"
autofittype="col"
treeusecheckbox="false"
treeuseimage="true"
treeuseline="true"

첫번째 칼럼의 Cell 속성을 아래와 같이 수정합니다.

displaytype="treeitemcontrol" 
treelevel="bind:level" 
edittype="tree"

xcss 파일을 열어서 아래 코드를 추가합니다. Advanced 탭에서 선택자를 추가하거나 Text 탭에서 직접 코드값을 입력할 수 있습니다.

.Grid .body .row .cell.sample_grid_61 .celltreeitem .treeitemimage
{
	-nexa-icon : URL("theme://images/img_WF_Grdimg.png");
}

.Grid .body .row .cell.sample_grid_61 .celltreeitem .treeitemimage[userstatus=expand]
{
	-nexa-icon : URL("theme://images/btn_WF_Popmenunext_D.png");
}

이전 단계에서 만든 Grid 컴포넌트를 복사해 같은 속성을 가지는 Grid 컴포넌트를 생성합니다. 그리고 Grid Contents Editor를 실행하고 첫번째 칼럼의 Cell 속성 중에서 cssclass 속성값을 아래와 같이 수정합니다.

QuickView(Ctrl + F6)로 실행한 후 오른쪽에 생성한 Grid 컴포넌트의 트리 항목 아이콘이 변경된 것을 확인합니다.

선택한 Cell 속성 확인하기

Grid 컴포넌트의 특정 영역을 선택했을때 해당 영역이 head, body, summary 영역 중 어느 영역인지 확인할 수 있습니다.

예제

onlbuttondown 이벤트 발생 시 하단 TextArea 영역에 관련 정보를 표시합니다.

sample_grid_70.xfdl

예제에서 사용한 핵심 기능

row

예제에서는 GridMouseEventInfo 오브젝트의 속성값을 사용하지만 Grid 컴포넌트에 연결된 다른 이벤트 오브젝트에서도 row 속성값 정보를 제공합니다.

예제 구현 방법

Grid 컴포넌트를 배치합니다. Dataset 오브젝트를 하나 추가하고 아래와 같이 데이터값을 설정합니다. 그리고 Dataset 오브젝트를 Grid 컴포넌트에 바인딩해줍니다.

다양한 Cell 속성을 확인하기 위해 몇 가지를 수정합니다. Left Column을 추가하고 Head, Body Row를 하나씩 더 추가합니다. Summary Row도 추가합니다. A, B 칼럼을 표시하는 항목은 head, body 영역의 row를 merge해서 표시하도록 합니다.

Grid 컴포넌트의 각 영역을 클릭했을때 Cell 속성 정보를 확인할 수 있도록 onlbuttondown 이벤트 함수를 작성합니다.

this.Grid00_onlbuttondown = function(obj:nexacro.Grid,e:nexacro.GridMouseEventInfo)
{
	var strRow;
	switch(e.row) {
		case -1:
			strRow = 'Head Band';
			break;
		case -2:
			strRow = 'Summary Band';
			break;
		case -9:
			strRow = 'Blank Body';
			break;		
		default:
			strRow = 'Body Band';
	}
	this.TextArea00.set_value(strRow+'\n'+'row: '+e.row+'\n'+'subrow: '+e.subrow)
};

QuickView(Ctrl + F6)로 실행한 후 Grid 각 영역을 클릭하면서 정보를 확인합니다.

ComboControl 내에서 선택한 항목의 스타일 바꾸어 표시하기

Grid 컴포넌트 내에서 다양한 형식으로 표시되는 컨트롤 내 스타일을 변경해 표시할 수 있습니다.

예제

오른쪽 Grid 컴포넌트에는 기본 테마 설정에 따라 목록을 표시하고 왼쪽 Grid 컴포넌트에는 지정된 스타일에 따라 목록 내 선택된 항목 텍스트를 빨간색으로 표시합니다.

sample_grid_71.xfdl

예제에서 사용한 핵심 기능

combodataset

GridCellControl 오브젝트의 속성입니다. combocodecol, combodatacol 속성과 같이 사용합니다.

예제 구현 방법

Grid 컴포넌트를 배치합니다. Dataset 오브젝트를 하나 추가하고 아래와 같이 데이터값을 설정합니다. 그리고 Dataset 오브젝트를 Grid 컴포넌트에 바인딩해줍니다.

그리고 code, data 칼럼을 가지는 Dataset 오브젝트를 하나 더 생성합니다.

Cell 오브젝트의 속성을 아래와 같이 지정합니다.

displaytype: combocontrol
edittype: combo
combodataset: Dataset01
combodatacol: data
combocodecol: code

속성을 지정한 다음 해당 칼럼을 복사해서 붙여넣습니다. 붙여넣기를 할때는 선택한 칼럼 앞에 추가하거나(Insert) 뒤에 추가(Append)할 수 있습니다.

추가한 Cell 오브젝트의 clssclass 속성값을 지정합니다.

xcss 파일을 열어서 아래 코드를 추가합니다. Advanced 탭에서 선택자를 추가하거나 Text 탭에서 직접 코드값을 입력할 수 있습니다.

.Grid .body .row .cell.sample_grid_71 .cellcombo .combolist .listboxitem[userstatus=selected]
{		
	color : red;
}

QuickView(Ctrl + F6)로 실행한 후 Grid 각 영역을 클릭하면서 정보를 확인합니다.

Grid에서 특정 텍스트만 입력하기

Cell 편집 상태인 경우 입력되는 값을 확인하고 입력값을 제한할 수 있습니다.

예제

Column1 항목은 한글만 입력할 수 있습니다. 다른 텍스트를 입력하려고 시도하면 입력값을 빈값으로 대체합니다.

sample_grid_68.xfdl

예제에서 사용한 핵심 기능

getEditValue, setEditValue

Cell 편집 시 편집중인 값을 가져오거나 설정할 수 있습니다.

예제 구현 방법

Grid 컴포넌트를 배치합니다. Dataset 오브젝트를 하나 추가하고 아래와 같이 데이터값을 설정합니다. 그리고 Dataset 오브젝트를 Grid 컴포넌트에 바인딩해줍니다.

Column1 Cell 오브젝트의 edittype 속성값을 "normal"로 수정합니다.

Grid 컴포넌트의 oninput 이벤트 함수 내에서 입력값을 확인하고 한글인지 아닌지 판단한 후에 한글인 경우에는 그대로 입력하고 그렇지 않은 경우에는 빈값("")을 반환합니다.

this.Grid00_oninput = function(obj:nexacro.Grid,e:nexacro.InputEventInfo)
{
	var strControlValue  = obj.getEditValue();
	if(strControlValue)
	{
		obj.setEditValue(strControlValue.replace(/[^\ㄱ-ㅎㅏ-ㅣ가-힣]/g, ""));
	}
};

QuickView(Ctrl + F6)로 실행한 후 두번째 칼럼을 편집상태로 만든 후 텍스트를 입력해봅니다.

가로값이 동일한 셀을 하나의 셀로 표시하기

suppresshorzcell 속성은 Left, Right 칼럼에서 타이틀을 표시하는 경우 가로 방향으로 셀이 병합되는 효과를 처리할 수 있습니다. Grid 컴포넌트 속성이지만 Cell 오브젝트의 suppress 속성의 영향을 받습니다.

예제

L1~L3 칼럼은 suppresshorzcell 속성과 suppress 속성이 같이 동작합니다. B1~B3 칼럼은 Body 칼럼이기 때문에 suppresshorzcell 속성이 적용되지 않고 suppress 속성값만 적용됩니다. 1~3 칼럼은 suppress 속성을 적용하지 않은 원래 데이터를 표시합니다.

sample_grid_75.xfdl

예제에서 사용한 핵심 기능

suppresshorzcell 속성

Left, Right 칼럼 내에서 가로값이 동일한 경우 하나의 셀로 표시할 수 있습니다.

예제 구현 방법

Grid 컴포넌트와 Button 컴포넌트를 화면에 배치하고 Dataset 오브젝트를 생성합니다. Dataset 오브젝트의 값은 아래와 같이 설정하고 Grid 컴포넌트에 바인딩해줍니다.

Left 칼럼과 Boby 칼럼을 3개씩 추가합니다. 추가된 칼럼은 순서에 따라 text 속성값으로 Column1~Column3을 지정해줍니다.

각 칼럼 Head text 속성값을 구분을 위해 L1~L3, B1~B3, 1~3으로 지정합니다. 그리고 L1~L3, B1~B3 칼럼의 Body 셀을 모두 선택하고 suppress 속성값을 지정합니다. 여러 셀을 선택한 상태에서 특정 속성값을 수정하면 모든 셀에 같은 속성값이 반영됩니다.

Grid Contents Editor 창을 닫고 Grid 컴포넌트를 선택한 상태에서 suppresshorzcell 속성값을 "left"로 지정합니다.

버튼 클릭 시 L2, L3 칼럼 Cell의 suppress 속성값을 0으로 변경합니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Grid00.setCellProperty("body", 1, "suppress", "0");
	this.Grid00.setCellProperty("body", 2, "suppress", "0");
};

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

원하는 영역의 셀을 하나의 셀로 표시하기

데이터와 상관없이 지정된 영역의 셀을 하나의 셀로 표시할 수 있습니다. 동적으로 구성된 데이터보다는 고정된 데이터를 표시하면서 셀을 합칠 필요가 있는 경우 사용할 수 있습니다. 아래 예제는 식당 가격표에서 같은 금액대의 셀을 하나의 셀로 표시합니다.

HTML Table 태그에서 rowspan, colspan 기능을 동적으로 처리하는 것이라고 설명할 수 있습니다. rowspan, colspan 기능을 mergeCell 메소드 하나에서 모두 처리할 수 있습니다.

예제

mergeCell 버튼 클릭 시 지정된 영역의 셀을 하나의 셀로 표시합니다. splitCell 버튼을 클릭하면 adult에 해당하는 Row 정보만 원래의 셀로 분리해 표시합니다.

sample_grid_77.xfdl

예제에서 사용한 핵심 기능

mergeCell

nStartCol, nEndCol, nStartRow, nEndRow 4개의 파라미터로 병합할 셀 영역을 지정하고 셀을 병합합니다. 같은 Band 영역만 병합할 수 있으며 병합에 실패하거나 해당 영역이 이미 병합되어 있는 경우에는 false 값을 반환합니다.

splitCell

StartCol, nEndCol, nStartRow, nEndRow 4개의 파라미터로 병합을 해제할 셀 영역을 지정하고 셀병합을 해제합니다.

예제 구현 방법

type 칼럼값이 adult 인 항목은 dinner, weekend 가격이 같고, type 칼럼값이 student 인 항목은 lunch, dinner 가격이 같습니다. 가격이 같은 셀을 병합할 겁니다.

Button 컴포넌트의 text 속성값을 "mergeCell", "splitCell"로 수정합니다.

Button 컴포넌트의 text 속성값에 따라 mergeCell 또는 splitCell 메소드를 실행합니다.

this.Button_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	if(obj.text == 'mergeCell')
	{
		this.Grid00.mergeCell(2, 3, 0, 0); // 23900
		this.Grid00.mergeCell(1, 2, 1, 1); // 10900
		this.Grid00.mergeCell(1, 2, 2, 2); // 7500
		trace(this.Grid00.mergeCell(0, 1, 0, 0)); // adult, 14900
	}
	else if(obj.text == 'splitCell')
	{
		this.Grid00.splitCell(2, 3, 0, 0);
	}
};

파라미터는 Column 인덱스와 Row 인덱스를 지정합니다. type 칼럼값이 "adult"인 항목의 dinner, weekend 칼럼의 셀을 하나의 셀로 합치려면 Column 인덱스는 2부터 3까지, Row 인덱스는 0부터 0까지입니다. 그래서 파라미터값은 (2, 3, 0, 0)이 됩니다.

mergeCell 버튼 클릭 시 네 번째로 처리하는 스크립트는 파라미터값이 (0, 1, 0, 0)인데, type 칼럼은 band 속성값을 "left"로 수정해서 left 밴드와 body 밴드를 합치려고 시도합니다. 하지만 서로 다른 밴드는 합칠 수 없어서 false 값을 반환합니다.

선택한 영역의 셀을 하나의 셀로 표시하기

selecttype 속성값이 "area"인 경우 선택한 영역의 여러 셀을 하나의 셀로 표시하는 방법을 살펴봅니다.

예제

하나의 셀로 표시하기 원하는 셀을 선택하고 mergeCell 버튼 클릭 시 선택한 영역의 셀을 하나의 셀로 표시합니다. splitCell 버튼을 클릭하면 선택한 영역의 병합된 셀을 해제합니다.

sample_grid_78.xfdl

예제에서 사용한 핵심 기능

selectstartcol, selectendcol, selectstartrow, selectendrow

선택한 영역의 Column, Row 인덱스 정보를 확인할 수 있습니다. 해당 속성값은 배열 형태입니다. selecttype 속성값이 "area"인 경우에는 배열의 길이가 1이고, "multiarea"인 경우에는 선택한 영역에 따라 배열의 길이가 1 이상이 될 수 있습니다.

예제 구현 방법

Button 컴포넌트의 text 속성값을 "mergeCell", "splitCell"로 수정합니다.

Button 컴포넌트의 text 속성값에 따라 mergeCell 또는 splitCell 메소드를 실행합니다.

this.Button_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	if(obj.text == 'mergeCell')
	{
		this.Grid00.mergeCell(this.Grid00.selectstartcol[0], 
			this.Grid00.selectendcol[0],
			this.Grid00.selectstartrow[0],
			this.Grid00.selectendrow[0]);
	}
	else if(obj.text == 'splitCell')
	{
		this.Grid00.splitCell(this.Grid00.selectstartcol[0], 
			this.Grid00.selectendcol[0],
			this.Grid00.selectstartrow[0],
			this.Grid00.selectendrow[0]);
	}
};

파라미터는 선택한 영역의 Column 인덱스와 Row 인덱스를 지정합니다.

셀 실제 속성값 가져오기

셀 속성값을 expr로 설정한 경우 실제 셀 속성값을 가져올 수 있습니다.

예제

Column0 칼럼의 셀을 클릭하면 실제 컨트롤 이름과 expr로 설정한 스크립트를 TextArea 컴포넌트에 표시합니다.

sample_grid_82.xfdl

예제에서 사용한 핵심 기능

getCellPropertyValue

바인딩되거나 expr로 설정된 경우 실제 값을 반환합니다. 예제에서는 displaytype 속성값을 expr로 지정하고 실제 displaytype 속성으로 적용된 값을 확인합니다.

예제 구현 방법

Column0 항목의 displaytype 속성값을 아래와 같이 지정합니다.

this.Grid00_oncellclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{	
	this.TextArea00.set_value(obj.getCellPropertyValue(e.row, e.cell, "displaytype")+"\n"
		+obj.getCellProperty("body", e.cell, "displaytype"));
};

cssclass 속성값을 여러 개 지정하기

xcss 파일에서 지정할 수 있는 속성값이 여러가지입니다. 모든 케이스를 하나의 class로 작성하지 않고 중첩해서 적용할 수 있습니다. 예를 들어 배경색을 지정하는 class를 하나 만들고 상황에 따라 글자색을 변경하는 class를 여러개 만들 수 있습니다.

예제

cssclass 속성값에 따라 셀마다 다른 색상 스타일이 적용됩니다.

sample_grid_84.xfdl

예제에서 사용한 핵심 기능

cssclass

classname을 여러 개 지정할 수 있습니다. 이때 중복된 스타일 속성이 지정되는 경우 XCSS 파일 상에서 마지막에 등록된 항목이 적용됩니다. cssclass 속성값으로 지정하는 순서가 아니라 XCSS 파일 상에서의 순서입니다.

예제 구현 방법

sample_grid_84_background 에서는 배경색과 글자색을 둘 다 지정하고 sample_grid_84_font_a, sample_grid_84_font_b 에서는 짝수번째 Row에 대한 배경색과 글자색을 지정합니다.

.Grid .body .row .cell.sample_grid_84_background
{
	-nexa-background-odd : silver;
	background : silver;	
	color : white;
	-nexa-color-odd : white;	
}
.Grid .body .row .cell.sample_grid_84_font_a
{
	background : blue;	
	color : red;
}
.Grid .body .row .cell.sample_grid_84_font_b
{
	background : red;	
	color : pink;
}

<Band id="body">
	<Cell text="bind:Column0" cssclass="sample_grid_84_background, sample_grid_84_font_a"/>
	<Cell col="1" text="bind:Column1" cssclass="sample_grid_84_background, sample_grid_84_font_b"/>
	<Cell col="2" text="bind:Column2"/>
</Band>

편집중인 값 가져오기

edittype 속성값에 따라 사용자가 입력한 값을 확정한 상태에서만 값을 확인할 수 있습니다. 예를 들어 edittype 속성값이 "date"인 경우에 사용자가 직접 날짜값을 입력하는 경우가 그렇습니다. 그래서 편집중인 상태에서도 oninput 이벤트에서 값을 확인할 수 있는 getEditingValue, getEditingText 메소드가 추가됐습니다.

예제

edittype 속성값에 따라 각 메소드가 값을 어떤 식으로 처리하는지 확인할 수 있습니다.

sample_grid_86.xfdl

예제에서 사용한 핵심 기능

getEditingValue, getEditingText

편집중인 값을 확인하는 메소드입니다. edittype 속성값이 "date", "mask"인 경우에는 mask 속성값에 따라 getEditingValue, getEditingText 메소드의 결과값이 다를 수 있습니다.

setEditingValue

편집중인 값을 확인하고 수정하려는 경우 사용하는 메소드입니다.

예제 구현 방법

this.Grid00_oninput = function(obj:nexacro.Grid,e:nexacro.InputEventInfo)
{
	this.TextArea00.set_value("getCurEditType: "+obj.getCurEditType()+"\n"
		+"getEditValue: "+obj.getEditValue()+"\n"
		+"getEditText: "+obj.getEditText()+"\n"
		+"getEditingValue: "+obj.getEditingValue()+"\n"
		+"getEditingText: "+obj.getEditingText());
};

자식 노드 한 번에 펼치기

displaytype 속성값이 "treeitemcontrol"인 경우 상위 노드를 선택하면 하위 노드가 펼쳐지거나 접힙니다. 이때 하위 노드의 상태는 이전에 상태를 가지고 있습니다. 레벨이 깊은 하위 노드에 접근하려면 여러 번 펼치는 작업이 필요합니다. 이번 예제에서는 상위 노드에서 자식 노드를 한 번에 펼치는 방법을 살펴봅니다.

예제

Menu 1 또는 Menu 2 항목 선택 시 자식 노드가 한 번에 펼쳐집니다.

sample_grid_89.xfdl

예제에서 사용한 핵심 기능

TreeItemIconControl

Grid 컴포넌트를 트리 형식으로 표시할 때 펼침, 접힘 아이콘에 해당하는 콘트롤 오브젝트입니다. 이미지와 버튼 2가지가 표시되고 있어서, 오브젝트 이름과 id를 조건으로 선택 여부를 확인합니다.

isTreeLeafRow

특정 Row가 자식이 없는 Row인지 확인합니다. 자식이 없으면 true를 반환합니다.

예제 구현 방법

displaytype: treeitemcontrol
edittype: tree
text: bind:MenuName
treelevel: bind:Level
treestate: bind:Status

이벤트가 발생한 위치가 트리 아이템 버튼인지 확인하고 각 Row의 Status 값을 확인한 후 펼치거나 접을 때 상태값을 수정합니다. 작업 전에 Dataset 오브젝트의 enableevent 속성값을 false로 지정하고 작업이 끝나면 true로 지정합니다.

this.Grid00_oncellclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
	if(e.fromreferenceobject == "[object TreeItemIconControl]" && e.fromreferenceobject.id == "treeitembutton")
	{
		this.Dataset00.set_enableevent(false);
		if(this.Dataset00.getColumn(e.row,"Status") == null)
		{
			this.Dataset00.setColumn(e.row,"Status",1);
			for(var i=1; i < this.Dataset00.rowcount; i++)
			{
				if(obj.isTreeLeafRow(e.row+i) == false)
				{
					this.Dataset00.setColumn(e.row+i,"Status",1);
				} else {
					break;
				}
			}
		} else {
			this.Dataset00.setColumn(e.row,"Status",null);
			for(var i=1; i < this.Dataset00.rowcount; i++)
			{
				if(obj.isTreeRootRow(e.row+i) == false)
				{
					this.Dataset00.setColumn(e.row+i,"Status",null);
				} else {
					break;
				}
			}
		}
		this.Dataset00.set_enableevent(true);
	}
};

트리 형식에서 padding 속성 적용하기

Grid 컴포넌트가 트리 형식으로 표현될 때 레벨에 따라 원하는 너비로 들여쓰기를 하고자 하는 경우 사용할 수 있습니다.

예제

버튼을 클릭하면 padding 스타일 속성이 적용됩니다.

sample_grid_91.xfdl

예제에서 사용한 핵심 기능

setCellProperty

Cell 오브젝트의 특정 속성값을 지정합니다. 예제에서는 cssclass 속성값을 버튼 클릭 시 지정합니다.

예제 구현 방법

displaytype: treeitemcontrol
edittype: tree
text: bind:Column0
treelevel: bind:level

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Grid00.setCellProperty("body", 0, "cssclass", "expr:level==1?'sample_grid_91_padding1':level==2?'sample_grid_91_padding2':''");
};

Advanced 탭에서 선택자를 추가하거나 Text 탭에서 직접 코드값을 입력할 수 있습니다.

.Grid .body .row .cell.sample_grid_91_padding1
{
	-nexa-padding : 4px 4px 4px 40px;
}

.Grid .body .row .cell.sample_grid_91_padding2
{
	-nexa-padding : 4px 4px 4px 80px;
}

체크박스 병합해서 표시하기

suppress 속성을 사용해 특정 그룹 단위로 체크박스 값을 처리하는 예제입니다.

예제

Column1을 기준으로 병합해서 표시합니다. 체크박스 선택 시 병합된 그룹의 데이터는 같은 값으로 변경합니다.

sample_grid_92.xfdl

예제에서 사용한 핵심 기능

suppress

Cell 오브젝트의 displaytype 속성값이 "progressbarcontrol", "treeitemcontrol"인 경우를 제외한 설정에서는 suppress 속성을 적용할 수 있습니다. "checkboxcontrol"의 경우에는 데이터 값을 기준으로 병합을 처리합니다.

예제 구현 방법

각 칼럼별 속성값을 아래와 같이 지정합니다. suppress 우선순위를 Column1에 두었기 때문에 Column1에 표시되는 값을 기준으로 체크박스가 병합되어 표시됩니다.

== Column0
displaytype: checkboxcontrol
edittype: checkbox
text: bind:Column0
suppress: 2

== Column1
text: bind:Column1
suppress: 1

== CheckBox
text: bind:Column0

사용자가 체크박스를 선택해 값을 변경하면 Column0 칼럼의 값이 변경되는데 같은 그룹 내에 있는 Column0 칼럼값을 모두 같은 값으로 변경합니다.

this.Dataset00_oncolumnchanged = function(obj:nexacro.NormalDataset,e:nexacro.DSColChangeEventInfo)
{
	if( e.columnid == "Column0" ){
		obj.set_enableevent(false);
		for(var i=0; i<obj.rowcount; i++)
		{
			if( obj.getColumn(e.row,"Column1") == obj.getColumn(i,"Column1"))
				obj.setColumn(i,e.columnid, e.newvalue);
		}	
		obj.set_enableevent(true);
	}
};

셀에 입력한 문자열 길이 표시하기

TextArea 형태의 셀 사용 시 입력한 문자열 길이를 바로 표시하는 기능을 살펴봅니다.

예제

텍스트 입력 중인 셀 영역 옆에 입력할 수 있는 글자수와 입력한 글자수를 툴팁 형태로 표시합니다.

sample_grid_101.xfdl

예제에서 사용한 핵심 기능

getEditingText

셀 편집 시 입력중인 텍스트 값을 반환합니다. 편집 시에만 반환하기 때문에 이미 입력된 텍스트 길이를 가져오기 위해서는 getCellText 메소드를 사용해야 합니다.

getCellText

지정한 위치의 셀에 있는 텍스트값을 반환합니다. 예제에서는 편집중에는 getEditingText 메소드를 사용하고 셀 위치를 변경했을때 바로 텍스트 길이를 표시하기 위해 getCellText 메소드를 사용합니다.

예제 구현 방법

예제에서는 빈 영역에 값을 입력하는 것을 보여주려고 값을 설정하지 않은 Row를 3개 추가합니다.

displaytype: textareacontrol
edittype: textarea

세 번째 칼럼은 기본값(-1)을 유지합니다.

text: "0 / 10"
visible: false
border: 1px solid black
textAlign: center

TextArea 형태의 셀 편집을 위해 셀 위치가 변경될 때 Static 컴포넌트의 위치를 셀 옆에 위치하도록 처리합니다. textareamaxlength 속성값을 설정하지 않은 경우에는 길이 표시를 하지 않도록 처리합니다.

var maxlength = 0;

this.Grid00_oncellposchanged = function(obj:nexacro.Grid,e:nexacro.GridSelectEventInfo)
{
	if(this.Grid00.getCellProperty("body", e.cell, "edittype") == "textarea")
	{
		maxlength = this.Grid00.getCellProperty("body", e.cell, "textareamaxlength");
		if(maxlength == -1)
		{
			this.Static00.set_visible(false);
		}
		else
		{
			var objRet = this.Grid00.getCellRect(e.row, e.cell);
			var vL = this.Grid00.getOffsetLeft() + objRet.left + objRet.width;
			var vT = this.Grid00.getOffsetTop() + objRet.top;	
			
			this.Static00.move(vL, vT + 1);
			this.fn_checklength(e.row, e.cell);
			this.Static00.set_visible(true);		
		}
	}
	else 
		this.Static00.set_visible(false);
};

문자열 입력 시 글자수를 체크하고 Static 컴포넌트에 표시합니다.

this.Grid00_oninput = function(obj:nexacro.Grid,e:nexacro.InputEventInfo)
{
	this.fn_checklength();
};

this.fn_checklength = function(row, cell)
{
	var length = 0;
	if(this.Grid00.getEditingText())
		length = this.Grid00.getEditingText().length;
	else if(this.Grid00.getCellText(row, cell))
		length = this.Grid00.getCellText(row, cell).length;
	this.Static00.set_text(length + " / "+maxlength);
}

트리 형식에 마스크 문자 적용하기

셀에서 처리할 수 있는 displaytype 속성값은 하나이기 때문에 트리 형식과 마스크 문자를 동시에 적용할 수는 없습니다. 별도 함수를 사용해 마스크 문자를 적용하는 방법을 살펴봅니다.

예제

트리 형식의 셀에 마스크 문자를 적용해 표현합니다.

sample_grid_104.xfdl

예제에서 사용한 핵심 기능

getDisplayText

화면에 보여지는 문자열값을 반환합니다. MaskEdit 컴포넌트는 format 속성 등을 적용해서 최종적으로 화면에 보여지는 문자열값을 반환합니다.

예제 구현 방법

displaytype: treeitemcontrol
edittype: tree
expr: comp.parent.fn_getMaskString(currow)

MaskEdit 컴포넌트는 화면에 표시되지 않고 마스크 문자를 처리하기 위한 용도로만 사용합니다.

format: @@@@-@@@@-{@@@@}
type: String
visible: false

code 칼럼값을 가져와서 MaskEdit 컴포넌트 value 속성값으로 설정하고 화면에 보여지는 문자열을 가져와서 반환합니다. 반환한 문자열은 Grid 컴포넌트에 표시합니다.

this.fn_getMaskString = function(nRow)
{
	var nStr = this.Dataset00.getColumn(nRow,"code");
	this.MaskEdit00.set_value(nStr);
	var rtn = this.MaskEdit00.getDisplayText();
	return rtn;
};

병합된 셀의 체크박스 체크하기

두 개 이상의 셀을 병합해서 하나의 셀처럼 보이도록 할 수 있습니다. 하지만, 병합된 셀을 자식 셀을 유지하고 있더라도 하나의 셀처럼 동작하기 때문에 바로 편집을 할 수 없습니다. 예제에서는 병합된 셀에 포함된 체크박스를 다루는 방법을 살펴봅니다.

예제

같은 형태로 병합된 3개의 Grid 컴포넌트지만, 체크박스 처리 방식이 각각 다릅니다. 첫 번째 Grid 컴포넌트는 체크박스 영역을 선택해도 반응을 하지 않으며 두 번째 Grid 컴포넌트는 셀 영역 어느 곳이든 클릭하면 체크박스가 선택되고 세 번째 Grid 컴포넌트는 CheckBox 컨트롤 영역을 클릭하면 체크박스가 선택됩니다.

sample_grid_105.xfdl

예제에서 사용한 핵심 기능

fromreferenceobject

이벤트가 발생한 시작점이 되는 오브젝트를 반환합니다. 하위 컨트롤이 있는 경우에는 하위 컨트롤 오브젝트를 반환합니다. 예제에서는 셀을 병합했지만, 자식 셀을 유지하도록 했기 때문에 fromreferenceobject 속성은 하위 컨트롤 오브젝트를 반환합니다.

예제 구현 방법

병합 옵션은 "Merge Cells (Having child Cells)"를 선택합니다. 체크박스 컨트롤과 텍스트가 그대로 보이도록 합니다.

구분을 위해 헤더 텍스트만 변경해줍니다.

두 개의 이벤트 함수는 비슷해보이지만, 세 번째 Grid 컴포넌트는 GridClickEventInfo 오브젝트의 fromreferenceobject 속성값을 확인하고 "CheckBoxControl"인 경우에만 해당 칼럼값을 업데이트합니다.

this.Grid02_oncellclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
	if(this.Dataset00.getColumn(e.row, "Column0") == 1) 
		this.Dataset00.setColumn(e.row, "Column0", 0);
	else 
		this.Dataset00.setColumn(e.row, "Column0", 1);
};

this.Grid03_oncellclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
	if(e.fromreferenceobject == "[object CheckBoxControl]")
	{
		if(this.Dataset00.getColumn(e.row, "Column0") == 1) 
			this.Dataset00.setColumn(e.row, "Column0", 0);
		else 
			this.Dataset00.setColumn(e.row, "Column0", 1);
	}
};