DevExpress QuantumGrid 사용법 004( Tutorial – 002 : 가장 기본적인 사용법 )

이번장은 QuantumGrid의 Object Instpector의 내용을 알아 보도록 하겠습니다.
몰론 이외에 퀀텀을 놓으면 생성되는 컬럼의 내용과 이들의 속성값(property의 값)을 변경하는 법에 대해서도 알아 보도록 하겠습니다.

본 제작자가 이동 또는 게시하지 않는 경우를 제외하고는 이곳 외에 다른곳에서 볼수 없습니다. 이를 어길시 정말 법적 제제가 가해질수 있습니다.

Tutorial – 001에서와 같이 화면을 구성하고 cxGrid.Levels.BandedTableView에 DataSource를 설정 하였습니다.

cxGrid의 내용에 들가기전 Btn_Close에 Click 이벤트를  주고 Close; 문을 넣습니다.

 

자 본격적으로 BandedTableView의 설정에 대해 알아 보도록 하겠습니다.
우선 이름을 바꿔 봅시다. 이름이 촌스럽게 cxGrid1.cxGrid1Level1.cxGrid1BandedTableView1과 같은 이름으로 등록이 되었습니다.

참고 : 아래 내용은 처음부터 다시 만든다는 가정하에 작업합니다.

우선 이름을 그림과 같이 변경해 보겠습니다. 귀찮게 이름을 왜 바꾸냐고요? 그냥 버릇입니다.

왼쪽넘을 오른쪽으로 이름을 바꾸어 봅니다.

자 이제 가장 핵심인 BandTV_Simple에 대한 설정을 시작해 보겠습니다.

DataSource 연결
우선 마우스 우클릭 말고 Object Inspect에서 DataSource를 어떻게 연결하는지 알아보도록 하겠습니다.

비교적 숨겨져 있는 것처럼 보이는 프로퍼티안에 들어 있습니다.
프로퍼티의 내용이 직관이지 않은가요?

잠시 원론 적인 얘기로 들어 가면, 퀀텀 그리드는 각각의 프로퍼티들이 Class구조로 나워어 설계되어 있어 어떤 TableView라도 그 클래스의 사용법이나 구조만 알면 쉽게 적응 할수 있습니다.
그예로 DataController 라는 클래스는 실제 데이타를 구성하는 하는 곳으로 Bound이던 UnBound이던 구조만 조금 다를뿐 참조 해야하는 클래스는 동일 하다는 것입니다.

아래는 기본적인 클래스의 구조를 표현한것으로 메뉴얼에서 훔쳐 왔습니다.
참고 하시기 바라면서 다시 Property설정으로 들어가 보겠습니다.

PopupMenu를 통해 DataSource를 설정하면 자동으로 모든 필드가 만들어지지만 Object Inspector에서 DataSource를 설정하면 자동으로 컬럼이 만들어지지 않습니다.

좌측 그리처럼 Popup Menu를 이용하여 컬럼을 설정하거나 QuantumGrid를 더블클릭하여 나타나는 Component Editor(필자는 그냥 디자이너라 부릅니다.) 를 이용하여 컬럼이나 기타 View를 설정할수 있습니다.

일단 모든 필드를 구성하고 아래 디자이너(Component Editor)로 몇가지 작업을 순서대로 해보도록 하겠습니다.
참고 : 여기서 QuantumGrid가 다른 Grid들과는 조금 다르게 생성된 컬럼은 해당하는 Object들이 따로 만들어 집니다.  해당 Unit의 소스를 보시면, 아래 Column의 내용이 추가 되어 있는것을 보실수 있습니다.

    BandTV_SimpleNAME: TcxGridDBBandedColumn;
BandTV_SimpleSIZE: TcxGridDBBandedColumn;
BandTV_SimpleWEIGHT: TcxGridDBBandedColumn;
BandTV_SimpleAREA: TcxGridDBBandedColumn;
BandTV_SimpleBMP: TcxGridDBBandedColumn;


컬럼이 추가되어 있음으로서의 장점을 최대한 살리기 위한 방편으로 보입니다. 뭐 추가 된다고 크게 지장 받는 것도 없고 다른 그리드 처럼 귀찮게 찾아 다녀야 하는 불편함도 없으니 일단 그러려니 하고 넘어가 보도록 하겠습니다.

Component Editor의 모습

우선 Bands를 추가합니다.
추가 하는 방법은 몇 가지가 있습니다.  이중 필자는 Component Editor 를 이용한 방법을 추천합니다.

Component Editor 를 이용한 방법

가장 추천하는 방식이만 조금 불편하기도 합니다. 비주얼한 화면에서 바로 수정 삭제가 가능하지만 그리드의 특성상 각각의 내용은 모두 View의 Class와 연계되므로 화면이 Refresh가 늦거나 하는등의 문제점이 나타납니다.

그림과 같이 Add를 눌러 3개의 Bands를 추가해 보도록 하겠습니다.

추가된 Bands에 아래와 같이 각각의 Caption을 입력합니다. 각 Band Object Inspector에서 caption을 수정하시면 됩니다. 이외에 밴드의 Caption모양을 변경한다거나 위치를 바꾸시려는 경우는  Object Inspector를 참고하시기 바랍니다.

일단 그림처럼 Caption을 수정했으면 컬럼의 위치를 변경해 보시죠.
컬럼의 이동은 마우스 드래그와 Object Inspector를 이용한 방법이 있는데 우선 마우스 드래그를 이용해서 옮긴후 그리드상의 각 컬럼을 클릭하셔서 Object Inspector의 Position부분을 확인해 보시기 바랍니다.

컬럼의 이동을 마쳤으면, 본격적인 View의 설정에 대해 알아보도록 하겠습니다.

생각날때 시간날때 쓰는 글이라 글이 길어지니 정신이 복잡해서 또 글이 너무 늘어지는 관계로 여기서 Tutorial – 002 를 마치고 Tutorial – 003에서 뵙도록 하겠습니다.

Author: yyjksw