[HOONS] 그리드에서 셀병합하기 (RowSpan,ColSpan)

출처 : 훈스닷넷(http://hoons.kr)

1. Introduction

이번 강좌는 초급자들을 대상으로 한 데이터 그리드의 셀을 병합하는 방법을 남겨드리도록 하겠습니다.
셀을 병합하는 요청이 들어오면 많은 대부분 그리드내에서 처리를 하지 않고 테이블을 동적으로 생성해서
해결하려 했던 분들을 많이 봤었습니다. 이번 예제는 순수 그리드에서만 셀을 병합하는 예제를 다루어 
보도록 하겠습니다.


2. 정적인 셀의 병합


정적으로 셀을 병합한다라는 의미는 내가 무슨 몇번째 혹은 무슨 열을 병합할지 알고 있을때를 가정한
방법입니다. 이부분은 아주 쉽게 해결 할 수 있습니다. 고정된 데이터를 출력하거나 정적인 테이블을
출력할때 사용하면 되겠습니다. 셀 병합 결과를 먼저 보고 코드를 보도록 하겠습니다.



이 셀의 병합은 고정된 데이터를 가져온다는 전제로 셀을 병합한 것입니다. 
그럼 코드를 살펴보겠습니다.

private void Page_Load(object sender, System.EventArgs e) {         DataGrid1.DataSource=CreateDataSource();         DataGrid1.DataBind();           //Row 병합하기         DataGrid1.Items[3].Cells[1].RowSpan =3; //RowSpan         DataGrid1.Items[3].Cells[1].BackColor=Color.Gainsboro; //배경색         DataGrid1.Items[4].Cells[1].Visible=false;         DataGrid1.Items[5].Cells[1].Visible=false;                 DataGrid1.Items[6].Cells[1].RowSpan =3;//RowSpan         DataGrid1.Items[6].Cells[1].BackColor=Color.Gainsboro;//배경색         DataGrid1.Items[7].Cells[1].Visible=false;         DataGrid1.Items[8].Cells[1].Visible=false;           //Column 병합하기         DataGrid1.Items[0].Cells[1].ColumnSpan=2;         DataGrid1.Items[0].Cells[2].Visible= false;         DataGrid1.Items[0].Cells[1].HorizontalAlign=HorizontalAlign.Center;         DataGrid1.Items[0].Cells[1].BackColor=Color.Gainsboro; }

RowSpan과 ColumnSpan의 값을 할당해 줍니다. 각 셀의 기본 값은 1이겠죠.
그리고 Visible을 통해서 열을 병합하여 결과를 얻어 올 수 있는 것입니다.
이렇게 수동으로 혹은 정적으로 셀을 병합해주어야 할 일은 그다지 많지 않을 것입니다.
그럼 다음 예제를 보면서 좀더 의미있는 셀병합을 다루어 보도록 하겠습니다.



3. 동적으로 셀 병합하기


먼저 아래와 같은 데이터가 출력되고 있는 상황입니다. StringValue 컬럼에 보면 같은 이름이
중복으로 출력되고 있습니다. 이때 위와 아래의 컬럼이 같을 경우 셀을 병합해 달라는 요구가
있을 수 있습니다. 요구가 없어도 아래와 같은 셀을 병합해 준다면 상당히 보기 편한 UI를 제공
할 수 있을 것입니다. 



그럼 코드를 통해서 같은 데이터셀이 출력 될 경우 셀을 합쳐 보도록 하겠습니다.

private void Page_Load(object sender, System.EventArgs e) {           DataGrid1.DataSource=CreateDataSource();         DataGrid1.DataBind();           //RowSpan갯수         int RowSpan=1;                 for(int i = DataGrid1.Items.Count-1 ; i>0;i--)//아이템 검색         {                if(DataGrid1.Items[i].Cells[1].Text==DataGrid1.Items[i-1].Cells[1].Text)                {                        RowSpan++;                        DataGrid1.Items[i-1].Cells[1].RowSpan =RowSpan; //RowSpan                        DataGrid1.Items[i-1].Cells[1].BackColor=Color.Gainsboro; //배경색                        DataGrid1.Items[i].Cells[1].Visible= false;                }                else                {       RowSpan=1;}         } }

코드를 설명 드리겠습니다. 이 코드는 for룹을 이용하여 데이터 그리드에 바인딩 된 아래의 열부터
셀을 검색합니다. 현재의 열과 바로 위의 열을 비교해서 만약 같은 이름의 셀이라면 RowSpan은 ++하고
자신은 Visible false로 처리 되는 것입니다. 바로윗 열에게 합쳐주는 개념이 되는것입니다.

동적코드로 처리한 셀의 병합 결과는 아래와 같습니다.



4. 정리

그리드의 기능을 많이 알고 최대한 활용하도록 합시다.

작성자 : HOONS(박경훈)   이메일 : tajopkh@hanmail.net   홈페이지 : http://www.hoonsbara.com