RealGrid WEB Data Grid Component

RealGrid 컴포넌트 사용을 위한 기본 개념과 개발 절차에 대해서 설명 합니다.

RealGrid WEB Data Grid Component RealGrid 컴포넌트 사용을 위한 기본 개념과 개발 절차에 대해서 설명 합니다.

RealGrid 구성요소

RealGrid의 구성 요소를 설명합니다.

1.  GridView 구성요소

그리드는 아래 그림처럼 각각의 기능을 갖는 여러 구성요소로 이루어집니다. 위에서 부터 panel, header, indicator, stateBar, checkBar, footer, RowGrouping을 하면 생기는 Row Group Header, Row Group Footer가 그 것 입니다. 그리고 각 구성요소의 외관과 기능의 설정은 각 구성요소에 할당된 속성 변경 set함수를 통해 설정됩니다. 즉 Column관련 속성의 설정은 setColumn, setColumns 함수를 통해 단일 컬럼의 속성을 변경하거나 여러개의 컬럼 속성을 일괄 변경할 수 있습니다. Footer의 속성을 지정할 수 있는 setFooter가 있으며, Header 속성을 변경할 수 있는 setHeader가 존재 합니다.

Panel

RealGrid는 상단에는 Row Grouping한 컬럼을 보여주는 Panel 영역을 가지고 있습니다. 사용자가 Column Header를 마우스 드레그앤드롭으로 Panel영역으로 이동하면 해당 컬럼으로 Row Grouping이 됩니다. 이 Panel은 최소 높이와 Style을 가지고 있습니다.  여러 개의 컬럼을 Gtouping 할 수 있기 때문에 최대 높이를 지정하지 않고 최소 값만 지정합니다. Grouping을 하면 Row Group Header 와 Row Group Footer 영역이 생깁니다. 이 영역을 활성화 할지 여부와 최소 높이 그리고 Panel에 올라간 Column을 일렬로 배치할지 등의 설정을 할 수 있습니다.

Column

그리드가 동작하기 위해서는 하나 이상의 컬럼이 존재해야 합니다. 즉 Column.Count가 0 보다 커야 합니다. 컬럼은 Field를 GridView에 의해서 보여주기 위해 설정해야할 속성입니다.

Column Group

Column grouping 은 그리드나 트리의 컬럼을 다양한 방식으로 배치하는 리얼그리드의 특별한 기능입니다. 그리드나 컬럼은 Data Provider의 DataField를 참조하는데, Data Provider에 배치된 순서와 상관없이 그리드나 트리 상에 자유롭게 배치할 수 있습니다. 이 때, 업무적으로 관련된 컬럼들을 모아서 컬럼그룹의 형태로 정리할 수 있습니다. 컬럼그룹은 DataField와는 관련없이 단지 포함된 컬럼셋을 수평이나 수직으로 배치만 합니다. 또, 컬럼그룹은 하위 컬럼그룹을 포함할 수도 있기 때문에 다양한 형태의 배치가 가능해 집니다. 컬럼그룹은 컬럼 헤더에 컬럼 헤더들 상단에 컬럼그룹 헤더를 표시하거나, 컬럼그룹 헤더만 표시하고 컬럼들의 헤더들은 모두 감출 수도 있습니다. 현재 버젼에서 컬럼그룹에 포함된 컬럼들은 같은 그룹 내에서만 이동 가능합니다. 컬럼그룹에 포함된 컬럼들을 서로 다른 너비로 표시될 수 있을 뿐아니라, 컬럼 그룹이 수직 배치를 한다면 서로 다른 높이로 표시될 수도 있습니다.

Indicator

인디케이터는 그리드의 가장 왼쪽에 위치한 수직 Bar로 아이템이나 데이터행의 Index 혹은, 행의 편집 상태 등을 표시합니다. 기본적으로 표시되는 값은 아이템 Index입니다. Indicator.displayValue 속성으로 표시되는 값을 지정할 수 있습니다. 또한, Indicator.visible 속성으로 표시하거나 감출 수 있습니다. Bar의 너비는 Indicator minWidth, maxWidth, width 속성들 및 폰트 스타일값들로 설정됩니다.

State Bar

StateBar는 데이터 행의 상태(RowState)를 표시하는 수직 Bar입니다. 데이터셋이 처음 로드된 후 사용자 편집을 통해 각각의 데이터 행은 수정/추가/삭제의 상태를 가질 수 있습니다. 행 상태에 대해서는 Row States 페이지를 참조하십시오. StateBar.visible 속성으로 표시하거나 감출 수 있고, StateBar width 속성으로 바의 너비를 지정합니다. 표시되는 상태 아이콘의 색상과 크기 등은 StateBar의 스타일로 지정합니다.

Check Bar

사용자는 CheckBar를 통해 각 Item을 Checked 상태로 설정할 수 있습니다. 데이터 행에 연결된 Item의 Checked 상태는 정렬이나 필터링 후에도 유지됩니다. 선택된 아이템들은 그리드이 getCheckedItems나 getCheckedRows 메쏘드로 가져올 수 있습니다. 첫번째는 아이템들의 index, 두번째는 데이터행들의 index들을 배열로 리턴합니다

Footer

리얼그리드에서 컬럼별 합계를 구해서 표시하는 것은 간단한 일입니다. 컬럼 footer.expression에 통계값을 표시하는 expression을 지정하면 되는데, 그리드 summaryMode에 따라 expression에서 사용할 수 있는 값의 종류가 달라집니다. 그리드가 계산해서 제공하는 합계값이 정확하지 않거나 필요한 합산 식이 존재하지 않는 경우, 그리드 외부에서 계산한 그 값을 footer.text 속성으로 지정해서 표시하게 할 수 있습니다.
또, GridBase.getSummary(field, summary) 함수를 호출해서 필드의 합계값을 가져올 수도 있습니다. field는 필드명이나 필드인덱스가 될 수 있습니다. summary 지정할 수 있는 합계 목록은 아래 리스트에서 확인 하십시오.

댓글

댓글 본문
버전 관리
escaman
현재 버전
선택 버전
graphittie 자세히 보기