본문에서는 FlexGrid의 행, 열 수를 설정하고, 각 열의 셀 유형을 설정하여 아래와 같은 그리드를 만들어보겠습니다.

시작하기

각각의 기능을 살펴보기에 앞서, 폼에 FlexGird 컨트롤을 불러오겠습니다.

1. 도구상자에서 c1FlexGrid 컨트롤을 더블클릭하여 Form에 불러옵니다. 　

   　

2. c1FlexGrid 컨트롤의 크기를 적절히 조절합니다.

행 갯수 설정하기

그리드가 데이터 원본에 바인딩된 경우, 행 수는 데이터 원본에서 사용 가능한 레코드 수에 따라 결정됩니다. 그러나 언바운드 모드의 경우, RowColooection 클래스의 Count 속성에 정수값을 설정하여 그리드에 표시할 행 수를 설정할 수 있습니다. 아래 코드를 사용하여 FlexGrid의 행 수를 설정합니다.

행 갯수에는 열 헤더도 포함됩니다.

// 행 수를 9개로 설정합니다.
c1FlexGrid1.Rows.Count = 9;

열 갯수 설정하기

그리드가 데이터 소스에 바인딩된 경우, 열 수는 데이터 소스에서 사용 가능한 필드 수에 따라 결정됩니다. 그러나 언바운드 모드의 경우, ColumnCollectiion 클래스의 Count 속성에 정수값을 설정하여 그리드에 표시할 열 수를 설정할 수 있습니다. 아래 코드를 사용하여 FlexGrid의 열 수를 설정할합니다.

열 갯수에는 행 헤더도 포함됩니다.

// 열 개수를 5개로 설정
c1FlexGrid1.Cols.Count = 5;

열 헤더 셀에 텍스트 입력하기

Column 개체의 Caption 속성으로 원하는 문자열을 입력하여, 열 헤더 셀에 텍스트를 입력할 수 있습니다.

// 1열부터 4열까지의 열 헤더 셀에 'Text, Images, Checkbox, Editable Combobox'을 순서대로 입력
c1FlexGrid1.Cols[1].Caption = "Text";
c1FlexGrid1.Cols[2].Caption = "Images";
c1FlexGrid1.Cols[3].Caption = "Checkbox"
c1FlexGrid1.Cols[4].Caption = "Editable Combobox";

셀 데이터 설정하기

내장 편집기

각 셀의 데이터 설정에 앞서, FlexGrid에서 제공하는 내장 편집기에 대해 알아보겠습니다.

FlexGrid는 효율적인 셀 내 편집을 가능하게 하는 여러 내장 편집기를 제공합니다. 그리드는 TextBox 컨트롤을 기본 편집기로 합니다. 그러나 숫자, 날짜, 체크박스 및 콤보박스 같은 다른 내장 편집기도 지원합니다. 이러한 편집기는 일반적으로 열의 DataType 속성과 같은 일부 특정 속성값을 기반으로 자동 할당됩니다.

체크박스

Column 객체의 DataType 속성이 Boolean으로 설정되면 자동으로 활성화됩니다.

c1FlexGrid1.Cols[colIndex].DataType = typeof(Boolean);

숫자

DataType 속성이 Int 또는 Decimal 과 같은 숫자 데이터 유형으로 설정 되면 자동으로 활성화됩니다 .

c1FlexGrid1.Cols[colIndex].DataType = typeof(Int32);

날짜

Column 객체의 DataType 속성이 Date 또는 DateTime 으로 설정된 경우 자동으로 활성화됩니다 .

c1FlexGrid1.Cols[colIndex].DataType = typeof(DateTime);

콤보박스

Column 객체의 ComboList 속성값으로 모든 선택항목을 포함하는 문자열을 할당하여 드롭다운 목록을 만들 수 있습니다.

c1FlexGrid1.Cols[colIndex].ComboList = "Apple|Banana|Orange|Mango";

미리 설정된 선택 항목 외에 사용자가 사용자 정의 항목을 입력해야 할 경우엔, 다음과 같이 파이프 문자('|')로 선택 항목 문자열을 시작하여 ComboList 속성 값을 할당해줄 수 있습니다.

c1FlexGrid1.Cols[colIndex].ComboList = "|Apple|Banana|Orange|Mango";

마스크

마스크 편집기는 사용자가 데이터를 입력할 때 자동으로 유효성을 검사하기 위해 미리 정의된 템플릿을 나타냅니다. Column 객체의 EditMask 속성으로 마스크 문자열을 입력하여 설정합니다.

c1FlexGrid1.Cols[colIndex].EditMask = "(999) 999-9999";

매핑된 목록(Mapped List)

매핑된 목록은 그리드에 저장된 데이터를 사용자에게 표시되는 값으로 매핑하는 것을 나타냅니다. 그리드에 저장된 실제 데이터가 인코딩되거나 사용자가 이해하기 어려운 경우 사용자에게 친숙한 값을 표시하는 데 자주 사용됩니다.

FlexGrid에서는 DataMap 속성을 사용하여 데이터 매핑을 수행합니다. Column 객체의 DataMap 속성값으로 그리드에 저장된 값과 사용자에게 표시되는 값 간의 매핑을 설정하는 IDictionary 객체로 설정하면 매핑된 목록이 활성화됩니다.

유효한 데이터 맵을 제공하는 IDictionary 객체로는 "HashTable", "ListDictionary", "SortedList" 등이 있습니다.

ListDictionary customerNames = new ListDictionary();
customerNames.Add("AJK18F", "Sam Anders");
customerNames.Add("BBK21D", "Daneil");
customerNames.Add("AEF25N", "Henry Hussain");
customerNames.Add("BZD42S", "Owen Romanov");
customerNames.Add("AKC16G", "Serena Nguyen");
​
c1flexGrid1.Cols["Name"].DataMap = customerNames;
c1flexGrid1.ShowButtons = ShowButtonsEnum.WithFocus;

셀 버튼

셀 버튼 편집기는 작업을 완료하거나 버튼 클릭으로 대화 상자를 열어야 할 때 사용됩니다. ComboList 속성을 말줄임표 문자열("...")로 설정하여 활성화할 수 있습니다. 이후 CellButtonClick 이벤트를 사용하여 대화 상자를 표시하거나 다른 작업을 수행할 수 있습니다.

c1flexGrid1.Cols["colIndex"].ComboList = "...";
​
c1flexGrid1.CellButtonClick += C1flexGrid1_CellButtonClick;

각 열마다 셀 유형 및 데이터 입력

1열: 텍스트

C1FlexGrid 클래스의 Items 속성(인덱서) 또는 SetData 메소드를 사용하여 셀에 값을 입력할 수 있습니다.

c1FlexGrid1[1, 1] = "SpreadJS";
c1FlexGrid1[2, 1] = "Spread.NET";
c1FlexGrid1.SetData(3, 1, "Wijmo");
c1FlexGrid1.SetData(4, 1, "ComponentOne");

2열: 이미지

Column 개체의 DataType 속성으로 typeof(Image)를 주어, 해당 열의 셀 유형을 Image로 설정할 수 있습니다.

이때, ImageAlign 속성 값으로 ImageAlignEnum.Scale을 설정하면, 이미지가 원래의 종횡비를 유지하면서, 셀 내에서 맞는 최대 크기로 조정됩니다.

c1FlexGrid1.Cols[imageCol].ImageAlign = C1.Win.C1FlexGrid.ImageAlignEnum.Scale;

셀에 이미지를 설정할 때에는 C1FlexGrid 클래스의 SetCellImage 메소드를 사용합니다. 또는 CellRange 클래스의 Image 속성을 통해 지정한 셀 영역에 이미지를 삽입할 수 있습니다.

기본적으로 한 셀 내에 텍스트와 이미지가 모두 보여지지만, ImageAndText 속성값을 false로 설정하여 오직 이미지만 보이게 할 수 있습니다.

// 셀 (1,1)부터 (2,1)에 이미지 입력
C1.Win.C1FlexGrid.CellRange cr;
cr = c1FlexGrid1.GetCellRange(1, 2, 2, 2);
cr.Image = Image.FromFile("Spread.png");
​
// 셀 (3,1)에 이미지 입력
c1FlexGrid1.SetCellImage(3, 2, Image.FromFile("Wijmo.png"));
​
// 셀 (4,1)에 이미지 입력
c1FlexGrid1.SetCellImage(4, 2, Image.FromFile("..\\..\\Properties\\ComponentOne.png"));

3열: 체크박스

Column 개체의 DataType 속성을 Boolean으로 설정하여 3열에 체크박스를 설정합니다.

// 3열을 체크박스 열로 설정
c1FlexGrid1.Cols[3].DataType = typeof(Boolean);

C1FlexGrid 클래스의 Items 속성(인덱서) 에 true/false를 입력하여 체크박스를 체크하거나 해제할 수 있습니다.

// 체크박스 선택 및 해제
c1FlexGrid1[1, checkCol] = true;
c1FlexGrid1[2, checkCol] = false;
c1FlexGrid1[3, checkCol] = true;
c1FlexGrid1[4, checkCol] = false;

4열: 편집 가능한 콤보박스

4열에는 사용자 정의 항목을 입력할 수 있는 콤보박스 셀을 설정하겠습니다. ComboList 속성에 할당하는 문자열을 파이프라인 문자('|')로 시작함으로써 사용자 정의 항목을 입력할 수 있도록 설정할 수 있습니다.

// 4열을 편집 가능한 콤보박스로 설정
c1FlexGrid1.Cols[4].ComboList = "|JS|.NET|Java";

열 너비 자동 조정

열 너비를 텍스트 사이즈에 맞게 자동으로 조절하기 위해 AutoSizeCol 메소드를 사용할 수 있습니다.

// 열 너비 자동 조정
c1FlexGrid1.AutoSizeCol(1);
c1FlexGrid1.AutoSizeCol(3);
c1FlexGrid1.AutoSizeCol(4);

입력된 텍스트에 맞게 열 너비를 조정하기 위해서는, 데이터가 입력된 후 AutoSizeCol 메소드를 호출해야 합니다.

결과 확인하기

프로젝트를 실행하면 다음과 같이 헤더를 포함하여 9개의 행과, 5개의 열을 가진 그리드가 보여집니다.

Editable ComboBox열에 속한 셀을 클릭하여, 리스트 중 하나를 선택하거나 리스트에 속하지 않는 임의의 값을 입력할 수 있습니다.

샘플 이미지와 코드가 포함된 간단한 프로젝트를 첨부드리니 참고하여주시기 바랍니다.

지금 바로 ComponentOne을 다운로드하여 직접 테스트해보세요!

• ComponentOne 공식 홈페이지

• ComponentOne 튜토리얼 및 샘플

• ComponentOne Q&A

• ComponentOne FAQ