반응형
첫 번째 DataGrid 컨트롤은 데이터를 표시하기 위한 매우 강력하고 범용적인 컨트롤로서 ASP.NET 개발자에게도 친숙하다(DataGrid 취급에 익숙하지 않은 사람들은 우선 Scott Mitchell의 기사 ′An Extensive Examination of the DataGrid Control′을 읽기를 권장한다.나는 지금까지 많은 프로젝트에서 Data Grid 컨트롤을 사용을 해서 Data Grid의 외형을 더욱 좋게 만들려고 노력했다.그 중의 하나로 현재 Yahoo! Mail이나 Hotmail등의 사이트에서 이용되고 있는 것이, 마우스로 포인트 된 행을 자동적으로 하이라이트 표시하는 테크닉이다.즉, 최종 사용자가 Data Grid의 데이터 위에 마우스를 가져왔을 때 현재 마우스가 놓여 있는 Data Grid 행의 배경은 다른 행과 다른 색이 되는 것이다.DataGrid 컨트롤을 확장해서 이 기능을 추가하는 방법에 대해서는 이미 수많은 기사가 나와있기 때문에 마우스의 움직임에 따라 행을 하이라이트 하는 방법을 이미 알고 있는 사람도 많을 수 있다.이 방법의 한 예가 Scott의 ′Creating a Row-Selectable Data Grid Control′이다.이 기사나 그 밖의 많은 기사들에서 다루고 있는 것이 DataGrid를 확장하는 커스텀 ASP.NET 서버 컨트롤을 작성한다고 하는 솔루션으로 커스텀 서버 컨트롤에서 행을 하이라이트 표시하기 위한 클라이언트 사이드 스크립트를 발행하는 형식이다(특히 HTML 요소에는 onmouseover 속성과 onmouseout 속성이 추가되어 있다).커스텀 서버 컨트롤을 작성하는 방법은 간단하고 유용한 정보도 많다.그러나 나는 좀 더 단순한 접근방식으로 표준 Data Grid 컨트롤을 일체 변경하지 않고 동작하는 것을 만들고 싶다고 생각했다.이것을 실현하는 방법은, AListApart의 Web 사이트에서, CSS만으로 드롭 다운 메뉴를 작성하는 방법에 대한 기사를 읽은 후에 생각해 냈다.이 컨셉은 단순하고, 「CSS의 hover 스타일을 이용해, 다양한 계층 형식의 리스트의 표시/숨김을 전환한다」라고 하는 것이었다.나는 그 단순함과 참신한 컨셉에 마음이 끌렸고, 이를 조금만 손질하면 Data Grid의 행도 강조 표시할 수 있지 않을까 생각했다.내가 어떻게 클라이언트 사이드 CSS의 hover 기능을 이용해서 표준 Data Grid에 행의 하이라이트 표시 기능을 추가했는지를 설명한다.완성되기까지의 과정에 몇 가지 문제가 있었지만 그 문제와 회피 방법에 대해서도 설명한다.계속 읽기 전에, 우선 실제의 데모를 봐 주기 바란다.첫걸음 : DataGrid에 데이터를 표시하는 것이 당연하지만 DataGrid 내의 행을 강조표시하기 위해서는 조작대상이 되는 DataGrid가 필요하다.다음은 데이터를 Data Grid에 바인드하는 샘플로 작성한 페이지의 코드이고, 위의 데모 페이지는 이 페이지에 기능을 추가해서 완성시킨 것이다.< % @ Page Language = ′ C# ′ % >
< % @ Import Namespace = ′ System . Data ′ % >
< html >
< head >
< title > DataGrid Sample < / title >
< script runat = ′ server ′ >
private void Page _ Load ( object sender , EventArgs e )
{
if ( ! Page . IsPostBack )
BindGrid ( ) ;
}
private void BindGrid ( )
{
DataTable table = new DataTable ( ′ Users ′ ) ;
table . Columns . Add ( ′ firstName ′ ) ;
table . Columns . Add ( ′ lastName ′ ) ;
table . Columns . Add ( ′ emailAddress ′ ) ;
AddRow ( table , ′ Bugs ′ , ′ Bunny ′ , ′ bbunny@wb.com ′ ) ;
AddRow ( table , ′ Mickey ′ , ′ Mouse ′ , ′ mmouse@disney.com ′ ) ;
AddRow ( table , ′ Donald ′ , ′ Duck ′ , ′ dduck@disney.com ′ ) ;
AddRow ( table , ′ Dan ′ , ′ Marino ′ , ′ dmarino@dolphins.com ′ ) ;
AddRow ( table , ′ Steve ′ , ′ Stchur ′ , ′ sstchur@yahoo.com ′ ) ;
myGrid . DataSource = new DataView ( table ) ;
myGrid . DataBind ( ) ;
}
private void AddRow ( DataTable table , string firstName ,
string lastName , string email )
{
DataRow row = table . NewRow ( ) ;
row [ ′ firstName ′ ] = firstName ;
row [ ′ lastName ′ ] = lastName ;
row [ ′ emailAddress ′ ] = email ;
table . Rows . Add ( row ) ;
}
< / script >
< / head >
< body >
CellPadding = ′ 5 ′
AutoGenerateColumns = ′ false ′
Font - Name = ′ verdana ′
Font - Size = ′ 10pt ′
runat = ′ server ′ >
< HeaderStyle BackColor = ′ # 336699 ′
ForeColor = ′ # ffffff ′ Font - Bold = ′ true ′ / >
< Columns >
DataField = ′ firstName ′ / >
DataField = ′ lastName ′ / >
DataField = ′ emailAddress ′ / >
< / Columns >
< / asp : DataGrid >
< / body >
< % @ Import Namespace = ′ System . Data ′ % >
< html >
< head >
< title > DataGrid Sample < / title >
< script runat = ′ server ′ >
private void Page _ Load ( object sender , EventArgs e )
{
if ( ! Page . IsPostBack )
BindGrid ( ) ;
}
private void BindGrid ( )
{
DataTable table = new DataTable ( ′ Users ′ ) ;
table . Columns . Add ( ′ firstName ′ ) ;
table . Columns . Add ( ′ lastName ′ ) ;
table . Columns . Add ( ′ emailAddress ′ ) ;
AddRow ( table , ′ Bugs ′ , ′ Bunny ′ , ′ bbunny@wb.com ′ ) ;
AddRow ( table , ′ Mickey ′ , ′ Mouse ′ , ′ mmouse@disney.com ′ ) ;
AddRow ( table , ′ Donald ′ , ′ Duck ′ , ′ dduck@disney.com ′ ) ;
AddRow ( table , ′ Dan ′ , ′ Marino ′ , ′ dmarino@dolphins.com ′ ) ;
AddRow ( table , ′ Steve ′ , ′ Stchur ′ , ′ sstchur@yahoo.com ′ ) ;
myGrid . DataSource = new DataView ( table ) ;
myGrid . DataBind ( ) ;
}
private void AddRow ( DataTable table , string firstName ,
string lastName , string email )
{
DataRow row = table . NewRow ( ) ;
row [ ′ firstName ′ ] = firstName ;
row [ ′ lastName ′ ] = lastName ;
row [ ′ emailAddress ′ ] = email ;
table . Rows . Add ( row ) ;
}
< / script >
< / head >
< body >
AutoGenerateColumns = ′ false ′
Font - Name = ′ verdana ′
Font - Size = ′ 10pt ′
runat = ′ server ′ >
< HeaderStyle BackColor = ′ # 336699 ′
ForeColor = ′ # ffffff ′ Font - Bold = ′ true ′ / >
< Columns >
< / Columns >
< / asp : DataGrid >
< / body >