Cell 크기 조절하기 (Row 크기 일괄 조절)

Grid에서 한 Cell에 많은 양의 데이터가 들어 있으면 전체 내용을 다 볼 수 없는 경우가 있습니다. 이럴 때 엑셀에서처럼 자유롭게 컬럼과 로우 크기를 조절하는 기능이 있으면 사용자가 좀 더 편하게 Grid를 이용할 수 있습니다.

cellsizingtype 속성은 사용자가 마우스를 Cell이나 Head의 경계 부분에 가져가면 포인터가 바뀌고 그 상태에서 마우스 버튼을 누르고 움직이면 셀의 크기를 변경할 수 있습니다. cellsizingtype 속성은 none, col, row, both 중 하나로 설정할 수 있습니다. col로 설정하면 너비만 변경할 수 있고 row로 설정하면 높이만 변경할 수 있습니다. both로 설정하면 너비와 높이 모두 변경이 가능하며 none으로 설정하면 셀 크기 변경을 할 수 없습니다.

예제

다음은 컬럼과 로우의 크기를 변경할 수 있는 Grid 예제입니다.

sample_grid_12.xfdl

cellsizingtype 속성이 both로 설정되어 있으므로 컬럼이나 로우의 크기를 모두 변경할 수 있습니다. 여기서 한가지 유의할 점은 한 로우의 높이를 변경하면 모든 로우 높이가 동일하게 적용된다는 것입니다. 로우 별로 높이를 따로 조절하려면 extendsizetype 속성을 따로 설정해줘야 합니다. 이에 대한 설명은 Cell 크기 조절하기 (특정 Row 크기 조절)를 참조하시기 바랍니다.

너비를 변경하려면 Head Column의 경계 부분에서 포인터가 변경되었을때 마우스 버튼을 누른 상태로 이동하고, 높이를 변경하려면 각Row의 경계 부분에서 포인터가 변경되었을때 마우스 버튼을 누른 상태로 이동합니다.

예제에서 사용한 핵심 기능

cellsizingtype

사용자가 마우스로 Row 또는 Column의 크기를 변경할 수 있게 설정하는 속성입니다.

예제 구현 방법

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

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

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

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

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

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

Grid를 선택한 후 cellsizingtype 속성을 both로 설정합니다.

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

Grid의 Head Column의 경계나 Grid의 Cell의 경계를 마우스로 드래그해 너비가 변경되는지 확인합니다.

Cell 크기 조절하기 (특정 Row 크기 조절)

Grid에서 한 Cell에 많은 양의 데이터가 들어 있으면 전체 내용을 다 볼 수 없는 경우가 있습니다. 이럴 때 엑셀에서처럼 자유롭게 컬럼과 로우 크기를 조절하는 기능이 있으면 사용자가 좀 더 편하게 Grid를 이용할 수 있습니다.

Grid의 cellsizingtype 속성은 사용자가 마우스로 Cell과 Head의 경계 부분을 드래그해 레코드의 크기를 변경할 수 있게 합니다. 설정에 따라 너비 혹은 높이만 조절하거나 둘 다 조절하게 할 수도 있습니다.

기본적으로 Cell의 높이는 하나를 변경하면 모두 같이 적용됩니다. 높이를 Cell 별로 조절하려면 extendsizetype 속성을 설정해야 합니다.

예제

다음은 컬럼과 로우의 크기를 변경할 수 있는 Grid 예제입니다.

sample_grid_13.xfdl

extendsizetype 속성을 row로 설정했기 때문에 각 Row 별로 높이를 자유롭게 변경할 수 있습니다.

너비를 변경하려면 Head Column의 경계 부분을 마우스로 드래그하고, 높이를 변경하려면 각Row의 경계 부분을 마우스로 드래그합니다.

예제에서 사용한 핵심 기능

cellsizingtype

사용자가 마우스로 Row 또는 Column의 크기를 변경할 수 있게 설정하는 속성입니다.

extendsizetype

Row의 높이가 변경될 때 Row 높이를 어떻게 조절할지 설정하는 속성입니다.

예제 구현 방법

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

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

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

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

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

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

Properties 창에서 cellsizingtype 속성을 both로, extendsizetype 속성을 row로 설정합니다.

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

Grid의 Head Column의 경계를 마우스로 드래그해 너비가 변경되는지 확인합니다.
Grid의 Cell 경계를 마우스로 드래그해 높이가 변경되는지 확인합니다.

다중 헤드와 다중 레코드 표현하기

Grid에서 하나의 레코드에 출력할 정보가 많거나 가로의 너비가 좁아 한 화면에 다 출력하기 힘들 때도 있습니다. 이 때, Grid의 다중 헤드와 레코드를 사용하면 좀 더 효율적으로 화면을 구성할 수 있습니다.

예제

아래는 Head 밴드와 Body 밴드에서 다중 헤드와 다중 레코드를 사용한 예제입니다.

EMail와 Department Column을 각각 Address와 Company Column의 밑에 배치하여 좁은 가로 너비를 효율적으로 활용하였습니다.

sample_grid_14.xfdl

예제에서 사용한 핵심 기능

없음.

예제 구현 방법

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

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

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

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

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

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

1. Grid 컴포넌트를 더블 클릭하여 Grid Contents Editor를 엽니다.

2. Head row, Body row를 하나씩 추가합니다. row를 추가하기 위해서는 Grid Contents Editor에서 Add Head Row 버튼과 Add Body Row 버튼을 한 번씩 눌러줍니다. Grid Contents Editor에서 마우스 오른쪽 버튼을 눌러도 row를 추가할 수 있는 같은 컨텍스트 메뉴가 나옵니다.

3. 새로 추가된 head row에서 Address, Company Column 밑의 cell을 각각 선택하여 text 속성에 EMail, Department라고 입력합니다.

4. 필요 없어진 Department, EMail Column을 선택한 후 Delete 버튼을 눌러 삭제합니다.

5. EMail, Department Column에 해당하는 Body row3의 Cell을 선택한 후 각 Column에 맞게 Dataset의 EMail, Department로 바인딩합니다.

6. head row와 body row의 추가로 인해 Name, Salary Column이 두 줄씩 생겼으므로 이를 하나로 합쳐줍니다. 병합할 Cell을 선택 후에 Merge Cells 버튼을 누르면 하나의 Cell로 합쳐집니다.

Cell 병합까지 완료되면 최종적으로 아래와 같은 모양이 됩니다. OK 버튼을 누릅니다.

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

다중 헤드와 레코드로 출력되는지 확인합니다.

자동 줄 바꾸기와 자동 Cell 크기 조절하기

데이터의 길이가 Cell의 크기보다 너무 길거나 여러 줄로 되어 있으면 데이터가 잘려 보일 수 있습니다. 이럴 때 자동 줄 바꿈, Cell 높이 조절 기능을 사용하면 데이터 길이에 상관없이 Grid에 표현할 수 있습니다.

자동 줄 바꿈은 데이터 길이가 Cell의 너비보다 큰 경우 데이터가 잘려 보이지 않게 자동으로 Cell의 너비에 맞게 자동으로 줄 바꿈이 되는 기능입니다. Cell의 wordwrap 속성을 사용하여 글자, 단어 단위로 줄 바꿈을 할 수 있습니다.

자동 Cell 높이 조절은 데이터 길이가 길거나 여러 줄로 된 경우 데이터가 잘려보이지 않게 자동으로 Cell의 높이를 설정해주는 기능입니다. Grid의 autosizingtype 속성을 설정하여 Column, Row를 설정할 수 있습니다.

예제

아래는 자동 줄 바꿈 기능과 자동 Cell 높이 조절 기능을 적용한 Grid 예제입니다.

자동 줄 바꿈 기능은 wordwrap의 설정에 따라 다음과 같이 달리 보입니다. 1은 wordwrap 속성을 char로 설정한 경우로 Cell의 너비를 넘어서는 글자는 글자 단위로 줄 바꿈이 됩니다. 2는 wordwrap 속성을 english로 설정한 경우로 Cell의 너비를 넘어서는 글자는 단어 단위로 줄 바꿈이 됩니다.

Grid의 autosizingtype 속성이 row로 설정되어 있어 자동 줄 바꿈이 발생해도 Cell의 높이가 자동 조절되어 데이터가 잘리지 않습니다.

sample_grid_15.xfdl

예제에서 사용한 핵심 기능

autosizingtype

Grid에 데이터가 모두 표시되도록 Row, Column의 크기를 자동 조절할지 설정하는 속성입니다.

wordwrap

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

예제 구현 방법

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

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

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

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

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

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

Properties 창에서 autosizingtype 속성을 row로 설정합니다.

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

2. Address Column에 해당하는 Body 밴드의 row를 선택합니다.

3. wordWrap 속성을 아래 그림과 같이 char로 설정합니다.

4. Department Column에 해당하는 Body 밴드의 row를 선택합니다.

5. wordWrap 속성을 아래 그림과 같이 english로 설정합니다.

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

Grid의 Address Column이 글자 단위, Department Column이 단어 단위로 각각 줄바꿈이 되었는지 확인합니다.

줄 바꿈 된 데이터가 Grid에서 잘려 보이지 않는지 확인합니다.

Head Column에 여러 줄 입력하기

Grid의 Head Column은 기본적으로 한 줄의 텍스트로 처리됩니다. 그러나 텍스트가 너무 길거나 텍스트를 의미있게 표현하기 위해 여러 줄로 입력해야 할 경우가 있습니다. Grid Contents Editor는 간단한 키보드 입력 처리만으로 여러 줄을 입력할 방법을 제공합니다.

예제

아래는 Grid Contents Editor를 사용해 Head Column의 텍스트를 여러 줄로 입력한 Grid 예제입니다.

Grid에서 1은 두 줄, 2는 세 줄로 처리하여 한 줄로 되어 있는 Grid의 Head Column에 비해 가로 사이즈를 줄이는 효과를 얻을 수 있습니다.

sample_grid_16.xfdl

예제에서 사용한 핵심 기능

없음.

예제 구현 방법

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

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

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

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

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

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

Head 밴드의 Address Column과 Company Column을 아래와 같이 수정합니다.

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

• Address Column 설정

Head 밴드의 1Address Column을 선택합니다. Properties 창의 text 속성에서 2 버튼을 누르면 버튼 밑에 3편집할 수 있는 작은 창이 뜹니다. 3에 다음을 차례로 입력합니다.

입력을 다 끝내면 아래 그림과 같이 좌측의 Head Column에 수정 내용이 반영됐는지 확인합니다.

• Company Column의 설정

Head 밴드의 1Company Column을 선택합니다. Properties 창의 text 속성에서 2 버튼을 누르면 버튼 밑에 3편집할 수 있는 작은 창이 뜹니다. 3에 다음을 차례로 입력합니다.

입력을 다 끝내면 아래 그림과 같이 좌측의 Head Column에 수정 내용이 반영됐는지 확인합니다.

모든 수정이 완료되면 OK 버튼을 눌러 Grid Contents Editor를 종료합니다.

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

Address와 Company의 Head Column이 각각 두 줄, 세 줄로 표시되는지 확인합니다.

틀 고정하기 - Column

Grid의 크기는 데이터양에 비례하여 늘어나기 때문에 제한된 크기의 화면에서는 모든 데이터를 한 번에 보기 힘듭니다. 특히 데이터를 서로 비교하며 봐야 할 경우에 스크롤바를 이동하며 보는 것은 여간 불편한 일이 아닙니다. 이런 경우 계속 화면상에 놓고 봐야 할 데이터를 Gird의 한쪽에 고정해놓고 볼 수 있다면 Grid의 활용성을 더욱 높일 수 있습니다.

이런 기능을 틀 고정이라 합니다. 틀 고정은 Grid의 특정 Column이나 Row를 스크롤에 상관없이 한 자리에 고정해 볼 수 있는 기능입니다. 엑셀에서 자주 사용하는 틀 고정 기능과 유사합니다.

Grid는 기본적으로 틀 고정을 지원하지 않지만, Grid를 구역에 따라 나누는 Band를 활용하여 틀 고정 기능을 구현할 수 있습니다. 아래는 Grid의 밴드 구간을 표시한 그림입니다.

빨간색으로 표시된 부분이 left, right 밴드로 이 밴드에 속한 Column은 고정되어 움직이지 않습니다.

여기서 한가지 유의할 점은 body 밴드에 속한 Column이나 Row는 틀 고정이 안 된다는 것입니다. 다시 말해 Grid 중간에 있는 Column, Row는 틀 고정이 안 되고 Grid의 왼쪽(left 밴드), 오른쪽(right 밴드) 그리고 위쪽(head 밴드), 아래쪽(summary 밴드)에 있는 Column, Row만이 소속 밴드를 변경하여 틀 고정이 가능합니다.

이번 장에서는 Column을 틀 고정하는 방법에 대해 설명합니다.

예제

아래는 Name과 Salary Column을 틀 고정한 Grid 예제입니다.

빨간색 박스로 표시된 Name, Salary Column을 각각 left, right 밴드로 설정하여 틀 고정하였기 때문에 스크롤바를 움직이면 가운데 위치한 Address, Company, Department Column만 이동됩니다.

sample_grid_17.xfdl

예제에서 사용한 핵심 기능

band

Grid에서 Column이 소속될 밴드 명을 설정하는 속성입니다. left, right 밴드는 각각 Grid의 왼쪽, 오른쪽 고정 영역에 표시되며 스크롤시 고정되어 움직이지 않습니다.

band 속성의 값을 얻거나 설정할 경우에는 각각 getFormatColProperty, setFormatColProperty 메소드를 사용합니다.

this.Grid00.setFormatColProperty( 0, "band", "left" );

예제 구현 방법

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

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

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

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

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

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

Body 밴드에 속해 있는 Name Column을 left 밴드로, Salary Column을 right 밴드로 설정합니다.

1. Grid를 더블클릭하여 Grid Contents Editor를 엽니다.

2. body 밴드에서 Name Column이 속해 있는 col0을 선택한 후 오른쪽 Properties 창에서 band 속성을 left로 설정합니다.

3. body 밴드에서 Salary Column이 속한 col4를 선택한 후 오른쪽 Properties 창에서 band 속성을 right로 설정합니다.

4. 아래 그림의 빨간색 박스와 같이 Name, Salary Column이 각각 left, right 밴드로 변경되었는지 확인한 후 OK 버튼을 눌러 설정을 완료합니다.

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

Grid의 스크롤바를 움직여 왼쪽의 Name Column과 오른쪽의 Salary Column이 고정되어 움직이지 않는지 확인합니다.

틀 고정하기 - Row

Grid의 크기는 데이터양에 비례하여 늘어나기 때문에 제한된 크기의 화면에서는 모든 데이터를 한 번에 보기 힘듭니다. 특히 데이터를 서로 비교하며 봐야 할 경우에 스크롤바를 이동하며 보는 것은 여간 불편한 일이 아닙니다. 이런 경우 계속 화면상에 놓고 봐야 할 데이터를 Gird의 한쪽에 고정해놓고 볼 수 있다면 Grid의 활용성을 더욱 높일 수 있습니다.

이런 기능을 틀 고정이라 합니다. 틀 고정은 Grid의 특정 Column이나 Row를 스크롤에 상관없이 한 자리에 고정해 볼 수 있는 기능입니다. 엑셀에서 자주 사용하는 틀 고정 기능과 유사합니다.

Grid는 별도로 틀 고정 기능을 지원하지 않지만, Grid를 구역에 따라 나누는 Band를 활용하여 틀 고정 기능을 구현할 수 있습니다. Row 틀 고정은 head나 summary 밴드에 row를 추가하는 것만으로 별도의 설정없이 자동으로 구현됩니다.

아래는 Grid의 밴드 구간을 표시한 그림입니다.

빨간색으로 표시된 부분이 head, summary 밴드로 이 밴드에 속한 Row는 스크롤에 상관없이 고정되어 움직이지 않습니다. head와 summary 밴드 모두 틀 고정은 가능하지만, left, right 밴드와는 틀 고정의 용도가 다릅니다.

head의 경우는 Column 이름을 표시하는 용도로만 사용하는 것이 좋습니다. head에 row를 추가하여 데이터를 연산한 결과나 문자열 등을 표시할 수도 있지만, head 영역에 보이기 때문에 보는 입장에서 혼란스러울 수 있습니다. 따라서 이 영역에서 Row 틀 고정은 하지 않습니다.

summary의 경우는 일반적으로 합계, 평균 등과 같이 데이터를 연산한 값이나 고정 문자열 등을 보여주기 위한 용도로 사용합니다.

결론적으로 하단 Row 틀 고정은 Grid에 바인딩된 Row 데이터를 고정하는 용도가 아니라 Grid에 항상 보여줘야 하는 내용을 고정하는 용도로 사용합니다. 참고로 head, summary의 Row에 Dataset을 바인딩시켜도 아무것도 표시하지 않습니다.

이번 장에서는 하단 Row를 틀 고정하는 방법에 대해 설명합니다.

예제

아래는 Summary 밴드에 Salaray Column의 Average(평균값), Max(최고값), Min(최소값) Row를 추가하여 틀 고정한 Grid 예제입니다.

빨간색 박스로 표시된 Average, Max, Min Row는 summary 밴드로 추가하였기 때문에 스크롤바를 움직이면 가운데 위치한 body 밴드에 속한 Row만 이동됩니다.

sample_grid_18.xfdl

예제에서 사용한 핵심 기능

band

Grid에서 Row가 소속된 밴드 명을 갖는 읽기전용 속성입니다. head, summary 밴드는 각각 Grid의 위쪽, 아래쪽 고정 영역에 표시되며 스크롤 시 고정되어 움직이지 않습니다.

Row의 band 속성 값을 얻으려면 getFormatRowProperty 메소드를 사용합니다.

var strBand = this.Grid00.getFormatRowProperty( 1, "band" );

예제 구현 방법

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

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

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

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

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

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

1. Gird를 더블클릭하여 Grid Contents를 연 후 아래 그림과 같이 Summary 밴드에 Average, Max, Min Row를 추가합니다. Grid Contents Editor의 메뉴중 버튼(Add Summary Row)을 누르면 Summary 밴드에 Row가 추가됩니다.

2. Average, Max, Min Row의 설정

각 Cell의 속성을 아래 표와 같이 설정합니다.

설정이 모두 완료되면 Grid Contents Editor의 OK 버튼을 누릅니다.

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

Grid의 스크롤바를 위, 아래로 움직여 Average, Max, Min Row가 고정되어 움직이지 않는지 확인합니다.

Column 위치 이동하기

Grid의 cellmovingtype 속성을 설정하면 사용자가 마우스 드래그 앤 드롭을 이용하여 Column의 위치를 변경할 수 있습니다.

예제

아래는 cellmovingtype 속성을 col로 설정한 Grid 예제입니다. 사용자는 Column의 위치를 원하는 곳으로 이동시킬 수 있습니다.

Column의 위치 이동은 Column 헤더를 마우스로 드래그하여 원하는 위치에 있는 Column 헤더에 드롭합니다. 예를 들어 Department 헤더를 드래그하여 Address 헤더 위에서 드롭하면 그 위치에 Department Column이 위치하게 되고 Address Column은 한 칸 오른쪽으로 밀려납니다. Column이 새로운 위치로 이동하게 되면 그 위치와 그 오른쪽에 있던 Column들은 전부 오른쪽으로 한 칸씩 밀려납니다.

sample_grid_19.xfdl

예제에서 사용한 핵심 기능

cellmovingtype

Grid에서 Column의 Head 영역을 드래그하여 Column 순서를 변경할 수 있게 설정하는 속성입니다.

예제 구현 방법

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

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

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

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

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

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

Grid를 선택한 후 오른쪽 Properties 창에서 cellmovingtype 속성을 col로 설정합니다.

QuickView(Ctrl + F6)를 실행하여 결과를 확인합니다. 위치를 변경하려는 Column의 헤더를 마우스로 드래그하여 원하는 위치에 드롭합니다.

변경된 Column 상태의 포맷 복사하기

Column 위치 이동하기 예제와 비슷한 내용이지만, 사용자가 변경한 상태 정보를 활용하는 예제입니다.

예제

마우스로 드래그해서 첫번째 Grid 컴포넌트의 컬럼 위치를 변경하고 [Change] 버튼 클릭 시 변경된 컬럼 위치가 두번째 Grid 컴포넌트에 적용됩니다.

sample_grid_43.xfdl

예제에서 사용한 핵심 기능

formats

넥사크로 스튜디오에서 Dataset 오브젝트를 Grid 컴포넌트에 바인딩했을 때 formats 속성이 자동으로 생성됩니다. Dataset 오브젝트의 정보를 가지고 자동으로 생성해주는 정보입니다. 직접 생성된 formats 정보를 지정할 수도 있습니다.

getCurFormatString

Grid 컴포넌트의 컬럼 위치를 변경한 경우 formats 속성값을 확인해보면 변경된 내용이 반영되어 있지 않습니다. 변경된 내용의 format 정보를 확인하려면 getCurFormatString 메소드를 사용해야 합니다.

예제 구현 방법

Grid 컴포넌트를 두 개 배치하고 Dataset 오브젝트를 추가합니다. Dataset 오브젝트의 데이터는 아래와 같이 지정합니다. 그리고 두 개의 Grid 컴포넌트에 같은 Dataset 오브젝트를 바인딩합니다.

Button 컴포넌트를 배치하고 onclick 이벤트 함수를 작성합니다. 첫번째 Grid 컴포넌트의 format 정보를 가져와서 두번째 Grid 컴포넌트의 formats 속성값으로 지정합니다. 이때 getCurFormatString 메소드에서 가져온 값은 <Formats>라는 태그를 가지고 있지 않기 때문에 해당 태그를 추가해줍니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var sFormatContents = this.Grid00.getCurFormatString();
	this.Grid01.set_formats("<Formats> "+sFormatContents+" </Formats>");
	
};

QuickView(Ctrl + F6)를 실행하여 결과를 확인합니다. 첫번째 Grid 컴포넌트의 컬럼 헤더를 마우스로 드래그해서 위치를 변경합니다. 그리고 버튼을 클릭하면 두번째 Grid 컴포넌트의 컬럼 위치가 변경된 것을 확인할 수 있습니다.

포맷 정보 확인하기

Grid 컴포넌트의 formats 속성값은 XML 형식으로 지정하도록 되어 있습니다. 넥사크로 스튜디오에서는 Grid Contents Editor를 실행해 어떤 formatid를 사용할 수 있는지 확인할 수 있지만 애플리케이션 실행 중에는 이를 확인할 수 없습니다. 예제에서는 간단하게 사용할 수 있는 포맷 정보를 확인하는 기능을 살펴봅니다.

예제

버튼을 클릭하면 Grid 컴포넌트가 가지고 있는 포맷 정보를 TextArea 컴포넌트에 표시합니다.

sample_grid_49.xfdl

예제에서 사용한 핵심 기능

getFormatString

포맷 정보를 XML 형식의 문자열로 반환합니다. 반환된 문자열 자체가 XML이 아니기 때문에 DOMParser를 사용해 XML 문서로 변환한 후 관련 정보를 확인합니다.

예제 구현 방법

Grid 컴포넌트를 배치하고 Button 컴포넌트와 TextArea 컴포넌트를 배치합니다. 이번 예제에서는 바인딩 없이 포맷 정보만 사용하기 때문에 Dataset 오브젝트는 생성하지 않습니다.

Grid 컴포넌트를 더블클릭해서 Grid Contents Editor를 실행합니다. [Add Head Row] 항목을 선택해 Head Row를 추가하고 [Add Body Column] 항목을 선택해 컬럼을 3개 추가합니다. 그리고 Head Row의 셀 영역을 선택하고 text 속성값을 지정해줍니다.

dafault 포맷 위에서 마우스 오른쪽 버튼을 클릭하면 표시되는 컨텍스트 메뉴에서 [Copy & Add Format] 항목을 선택합니다. 복사된 포맷 이름을 변경하고 세번째 컬럼을 삭제합니다.

Button 컴포넌트를 클릭했을때 Grid 컴포넌트의 formats 속성값으로 지정된 정보를 가져와서 XML 형태로 바꾸고(parseFromString) "Format" 태그에 해당하는 정보를 콜렉션 형태로 생성합니다. 해당 정보에서 포맷의 갯수나 id 정보를 확인합니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var parser, xmlDoc;
	parser = new DOMParser();
	xmlDoc = parser.parseFromString(this.Grid00.getFormatString(), "text/xml");
	var formatList = xmlDoc.getElementsByTagName('Format');
	var formatStr = "== format info =="+"\n"
		+"format length: "+formatList.length+"\n"
		+"format id:"+this.getFormatid(formatList, formatList.length)+"\n"
		+"current format:"+this.Grid00.formatid;
	this.TextArea00.set_value(formatStr);
};

포맷이 여러개인 경우 id 정보값을 표시하기 위해 함수를 하나 더 추가합니다.

this.getFormatid = function(arr, length)
{
	var str = "";
	for(var i=0;i<length;i++)
	{
		str += arr[i].getAttribute("id");
		if(i!=length-1) str += ", ";
	}
	return str;
}

QuickView(Ctrl + F6)를 실행하여 버튼을 클릭하면 포맷 정보가 TextArea 컴포넌트에 표시됩니다.

틀 고정하기 - 선택한 Column

화면 설계 시 틀 고정하기 기능을 사용할 수 있습니다. 하지만 사용자에게 틀 고정 위치를 지정하도록 허용해야 하는 경우도 있습니다. 이번 예제에서는 선택한 Column 기준으로 틀 고정하는 기능을 설명합니다.

예제

고정하기 원하는 컬럼 head 영역을 클릭하면 해당 컬럼이 고정된 상태로 변경됩니다.

sample_grid_52.xfdl

예제에서 사용한 핵심 기능

setFormatColProperty

컬럼 속성을 설정하는 메소드입니다. band, size 2가지 파라미터를 지정할 수 있는데, 예제에서는 band 속성을 변경합니다.

예제 구현 방법

Grid 컴포넌트를 배치하고 Dataset 오브젝트를 생성합니다. 예제에서는 컬럼 고정 기능만 살펴볼 것이기 때문에 Dataset 오브젝트의 데이터는 지정하지 않습니다.

Head Row를 하나 추가합니다.

그리고 아래와 같이 Head row를 합쳐줍니다.

아래와 같은 형식이 되도록 구성합니다. 순서는 상관없습니다. 2개 이상의 Head 영역을 합친 상태에서 동작하는 기능을 확인하기 위함입니다.

Grid 컴포넌트의 head 영역을 클릭했을때 틀 고정 기능이 동작하도록 합니다.

this.Grid00_onheadclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
	var iCnt=0;
	
    for (var j = e.cell; j >= 0; j--) 
    {
        var iColCur = this.Grid00.getCellProperty("Head", j, "col");
        var iCell = e.cell;
		
        for (var i = iCell; i >= 0; i--) 
        {
            if (this.Grid00.getCellProperty("Head", i, "row") == 0 
				&& iColCur == this.Grid00.getCellProperty("Head", i, "col")) 
            {             
                if (iCnt==0) 
                {
                    var iCol = this.Grid00.getCellProperty("Head", i, "col");					
                    var iSpan = this.Grid00.getCellProperty("Head", i, "colspan")-1;
                    var iTotCol = iCol + iSpan;                    
                    for (var k = 0; k <= iTotCol; k++)
                    {
                        this.Grid00.setFormatColProperty(k, "band", "left");
                    }
					for(var l = iTotCol;l<this.Grid00.getCellCount("head"); l++)
					{
					   this.Grid00.setFormatColProperty(k, "band", "body");
					}
                }
                iCnt++;
            } 
        }
    } 
};

QuickView(Ctrl + F6)를 실행하여 head 영역을 클릭하면서 틀 고정이 되는지 확인합니다.

컬럼 크기 조정 기능 제한하기

컬럼 크기를 사용자가 직접 조정할 수 있게 허용할 수 있습니다. 하지만 너무 작게 조정하면 데이터를 보기 힘들 수 있다면 기능 일부를 제한할 수 있습니다.

예제

사용자가 컬럼 크기를 조정할 수 있지만, 너무 작게 조정하면 지정된 크기로 재조정됩니다.

sample_grid_54.xfdl

예제에서 사용한 핵심 기능

oncolresized

컬럼 너비가 변경된 경우 발생하는 이벤트입니다. GridSizeChangedEventInfo 오브젝트를 통해 변경되기 전 크기값(oldvalue)을 확인하거나 변경된 크기값(newvalue)을 확인할 수 있습니다.

예제 구현 방법

Grid 컴포넌트를 배치하고 Dataset 오브젝트를 생성합니다. 예제에서는 컬럼 크기 변경 기능만 살펴볼 것이기 때문에 Dataset 오브젝트의 데이터는 지정하지 않습니다.

컬럼 크기를 조정할 수 있도록 cellsizingtype 속성값을 "col"로 지정합니다.

컬럼 크기 조정 시 지정된 크기보다 작은 경우 지정된 크기로 고정하는 기능을 추가합니다. 예제에서는 컬럼의 크기가 80으로 지정되어 있습니다.

this.Grid00_oncolresized = function(obj:nexacro.Grid,e:nexacro.GridSizeChangedEventInfo)
{
	this.Grid00.setFormatColProperty(e.formatindex,"size",e.newvalue);
	if( e.newvalue < 70 ){
		this.Grid00.setFormatColProperty(e.formatindex,"size",70);
		this.Grid00.formats = "<Formats>"+this.Grid00.getCurFormatString()+"</Formats>";
		obj.setFocus();
	}
};

QuickView(Ctrl + F6)를 실행하여 컬럼 크기를 작게 줄였을때 어떻게 변하는지 확인합니다.

병합된 Head 영역의 컬럼 타이틀 텍스트 구하기

Grid 컴포넌트에서 컬럼 타이틀(Head) 영역과 Body 영역이 같은 경우에는 컬럼 인덱스 정보로 해당 컬럼의 Head 텍스트를 확인할 수 있습니다. 하지만, Head 컬럼이 병합된 경우에는 인덱스가 달라지면서 원하는 정보를 바로 가져올 수 없습니다. 이런 경우 어떤 식으로 컬럼 타이틀을 확인하는지 알아봅니다.

예제

Body 영역의 셀을 클릭하면 해당하는 컬럼 타이틀을 셀에 표시합니다.

sample_grid_96.xfdl

예제에서 사용한 핵심 기능

getCellCount

셀의 갯수를 반환합니다. 병합된 셀은 하나로 계산합니다.

getHeadValue

Head 밴드 영역에서 특정 셀의 text 속성값을 반환합니다. getCellProperty("Head", i, "text")와 같은 값을 반환합니다.

예제 구현 방법

셀 클릭 시 셀의 인덱스 정보를 가지고 Head 영역의 컬럼 타이틀 텍스트를 확인하고 해당 텍스트를 셀의 text 속성값으로 설정합니다.

this.Grid00_oncellclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
	var str = this.fn_getHeadText(obj, e.cell);
	obj.setCellProperty("body", e.cell, "text", str);
};

this.fn_getHeadText = function(obj, nCell)
{
	for(j=nCell; j>=0; j--) {
		var nCellColIndex = obj.getCellProperty("Body", j, "col");
		var icell = obj.getCellCount("Head");
	
		for(i=icell; i>=0; i--) {
			if(obj.getCellProperty("Head", i, "row")==0 && nCellColIndex == obj.getCellProperty("Head", i, "col")) {
				return obj.getHeadValue(i);
			} else if(obj.getCellProperty("Head", i, "row")==1 && nCellColIndex == obj.getCellProperty("Head", i, "col")) {
				return obj.getHeadValue(i);
			}
		}
	}
}

병합된 셀의 자식셀 속성 지정하기

넥사크로 스튜디오에서 병합된 셀의 자식셀을 선택하고 속성을 지정하는 방법을 살펴봅니다.

예제

병합된 셀에서 아래에 있는 자식셀의 color 속성값을 다르게 표시합니다. 해당 셀을 클릭하면 Edit 컴포넌트에 자식셀의 color 속성값을 표시합니다.

sample_grid_97.xfdl

예제에서 사용한 핵심 기능

getSubCellProperty

서브셀의 속성값을 반환합니다. 넥사크로 스튜디오에서 설정한 값을 확인할 수 있습니다.

예제 구현 방법

Body 영역을 선택하고 컨텍스트 메뉴에서 [Add Body Row]를 선택해 Row를 추가합니다.

셀 클릭 시 셀의 인덱스 정보를 가지고 두 번째 자식셀의 color 속성값을 Edit 컴포넌트에 표시합니다.

this.Grid00_oncellclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
	this.Edit00.set_value(obj.getSubCellProperty("body", e.cell, 1, "color"))
};