WebDataGrid CSS 스타일링 가이드

WebDataGrid CSS 스타일 가이드는 CSS를 사용하여 WebDataGrid의 모양을 사용자 지정하기 위한 지침을 제공합니다. 색상, 글꼴, 셀 크기, 테두리, 배경 및 애니메이션 수정뿐만 아니라 사용자 경험을 향상시키기 위해 사용자 정의 클래스를 적용하는 방법을 다룹니다.

Styling WebDataGrid

1. CSS 컨트롤 수준에서 적용되는 클래스

1. CssClass – 그리드의 프레임에 적용됩니다.
2. HeaderCaptionCssClass – 모든 열의 머리글 캡션에 적용됩니다.
3. ItemCssClass – 모든 행에 적용됩니다.
4. AltItemCssClass – 모든 짝수 행에 적용됩니다.
5. FooterCaptionCssClass – 모든 열의 바닥글 캡션에 적용됩니다.

2. CSS 열 수준에서 적용되는 클래스

1. Header-CssClass – applied to the column Header.
2. CssClass – 열의 모든 셀에 적용됩니다.
3. Footer-CssClass– 바닥 글 열에 적용됩니다.

메모: 열 수준에 적용되는 클래스는 제어 수준의 클래스를 덮어씁니다.

3. CSS 동작 수준에서 적용되는 클래스

3.1. 활성화

1. ActiveCellCssClass – 활성 셀에 적용됩니다.
2. ActiveColumnCssClass – 활성 셀의 열 헤더에 적용됩니다.
3. ActiveRowCssClass – 활성 셀의 행에 적용됩니다.
4. ActiveRowSelectorCssClass – 활성 셀의 RowSelector에 적용됩니다.
5. ActiveRowSelectorImageCssClass – 활성 셀의 RowSelector 이미지 영역에 적용됩니다.

3.2. Column fixing

1. CellCssClass – 고정 열 셀에 적용됩니다.
2. FooterCssClass – 고정 열 바닥글에 적용됩니다.
3. HeaderCssClass – 고정 열 머리글에 적용됩니다.
4. SeparatorCssClass – 고정 열과 일반 열을 구분하는 구분선에 적용됩니다.

3.3. Column moving 

1. TopDragIndicatorCssClass – 드롭 표시기의 위쪽 부분에 적용됩니다.
2. MiddleDragIndicatorCssClass – 드롭 표시기의 중간 부분에 적용됩니다.
3. BottomDragIndicatorCssClass – 드롭 표시기의 아래쪽 부분에 적용됩니다.
4. DragMarkupCssClass – DragMarkup에 적용됩니다. 기본 끌기 태그를 사용하는 경우 헤더에 이미 적용된 스타일 외에도 이 클래스가 적용되며, 끌기 태그가 바뀌면 DragMarkupCssClass만 사용됩니다.
   

3.4. Column resizing 

1. ResizeIndicatorCssClass – 크기 조정 표시기 선에 적용됩니다.

3.5. Editing 

1. EditCellCssClass – 편집 중인 셀에 적용됩니다.
2. AddNewRowCssClass – AddNewRow에 적용됩니다.
3. AddNewRowSelectorImageCssClass – AddNewRow의 RowSelector 이미지 영역에 적용됩니다.

3.6. Filtering 

1. EditCellCssClass – 편집 중인 필터 셀에 적용됩니다.
2. FilterButtonCssClass – 파일러 버튼에 적용됩니다.
3. FilteringCssClass – 필터 행에 적용됩니다.
4. FilterRowSelectorImageCssClass – 필터 행의 RowSelector 이미지 영역에 적용됩니다.
5. FilterRuleDropDownCssClass – 필터 규칙 드롭다운에 적용됩니다.
6. FilterRuleDropDownHoverItemCssClass – 필터 규칙 드롭다운의 마우스로 가리킨 항목에 적용됩니다.
7. FilterRuleDropDownItemCssClass – 필터 규칙 드롭다운의 항목에 적용됩니다.
8. FilterRuleDropDownSelectedItemCssClass – 필터 규칙 드롭다운의 선택한 항목에 적용됩니다.

3.7. 페이징

1. PagerCssClass – 페이저 프레임에 적용됩니다.
2. CurrentPageLinkCssClass – 숫자 모드에서 현재 페이지 인덱스에 적용됩니다.
3. PageLinkCssClass – 숫자 모드에서 현재 링크가 아닌 다른 호출기의 인덱스 링크에 적용됩니다.

 3.8. Row Selectors

1. HeaderRowSelectorCssClass – 머리글 행의 행 선택기에 적용됩니다.
2. FooterRowSelectorCssClass – 바닥글 행의 행 선택기에 적용됩니다.
3. RowSelectorCssClass – 행 선택기에 적용됩니다.

  3.8. 선택

1. SelectedHeaderCssClass – 열을 선택할 때 열 머리글에 적용됩니다.
2. SelectedCellCssClass – 선택한 셀에 적용됩니다.
3. SelectedRowSelectorCssClass – 행을 선택할 때 행 선택기에 적용됩니다.
4. SelectedRowSelectorImageCssClass – 행을 선택할 때 행 선택기 이미지에 적용됩니다.

Using CSS selectors

CSS 클래스는 WebDataGrid의 모든 셀에 적용됩니다. 그래서 우리가 많은 레코드를 가진 그리드를 가지고 있다고 상상해 봅시다 – 이것은 우리가 하나의 CSS 클래스를 여러 번 적용해야 한다는 것을 의미합니다. 이렇게 하면 렌더링해야 하는 HTML이 크게 커져 필연적으로 성능이 저하됩니다. 이를 방지하기 위해 WebDataGrid는 CSS 선택기를 사용합니다.

예를 들어, igg_Item라는 기본 CSS 클래스가 있는데,이 클래스는 모든 셀에 적용해야 합니다. 수행 방법은 다음과 같습니다.

tbody.Igg_Item > tr > td
{
     /* style */
}

사용자 정의 CSS 클래스를 적용하는 데 동일한 패턴을 사용해야 합니다.

1. 본문의 셀을 대상으로 하는 CSS 클래스의 경우 CSS 클래스는 다음과 같이 작성해야 합니다.

tbody.NewCellClass > tr > td
{
    /*styles*/
}

컨트롤 수준의 ItemCssClass 속성 및 열 고정 동작의 CellCssClass에 적용할 수 있습니다.

2. 그리드의 특정 셀을 대상으로 하는 다른 클래스의 경우 선택기는 다음과 같이 사용해야 합니다.

tbody > tr > td.NewCellClass
{
    /*styles*/
}

다음 속성에 적용할 수 있습니다.

• column level: CssClass
• activation behavior: ActiveCellCssClass
• selection behavior: SelectedCellCssClass

3. 행을 대상으로 하는 모든 CSS 클래스의 경우 CSS 클래스는 다음과 같이 작성되어야 합니다.

tbody > tr.NewRowCssClass > td
{
    /*styles*/
}

다음에 적용됩니다.

• control level:   AltItemCssClass
• activation behavior: ActiveRowCssClass

다음 코드에서는 그리드 셀에 다른 스타일을 적용하는 방법을 보여 줍니다.

<style type="text/css">
        .HeaderCaptionClass
        {
            text-align: center;
        }
        tbody.NewItemClass > tr > td
        {
            color: blue;
            text-align: center;
        }
        tbody > tr.ActiveRowClass > td
        {
            background-color: Red;
        }
        tbody > tr > td.ColumnLevelCssClass
        {
            text-decoration: underline;
        }
        tbody > tr > td.SelectedCellClass
        {
            font-weight: bold;
        }
        tbody > tr > td.ActiveCellClass
        {
            background-color: Yellow;
        }
</style>

<ig:WebDataGrid runat="server" ID="wdgCustomers" DataSourceID="AccessDsCustomers"
        HeaderCaptionCssClass="HeaderCaptionClass" DataKeyFields="CustomerID" AutoGenerateColumns="false"
        Width="88%" ItemCssClass="NewItemClass" Height="400">
        <Columns>
            <ig:BoundDataField CssClass="ColumnLevelCssClass" Key="Country" DataFieldName="Country"
                Header-Text="Country" />
            <ig:BoundDataField Key="City" DataFieldName="City" Header-Text="City" />
            <ig:BoundDataField Key="CompanyName" DataFieldName="CompanyName" Header-Text="Company" />
            <ig:BoundDataField Key="ContactName" DataFieldName="ContactName" Header-Text="Contact" />
            <ig:BoundDataField Key="Phone" DataFieldName="Phone" Header-Text="Phone"/>
        </Columns>
        <Behaviors>
            <ig:Activation ActiveCellCssClass="ActiveCellClass" ActiveRowCssClass="ActiveRowClass">
            </ig:Activation>
            <ig:Selection SelectedCellCssClass="SelectedCellClass">
            </ig:Selection>
        </Behaviors>
    </ig:WebDataGrid>
    <asp:AccessDataSource ID="AccessDsCustomers" runat="server" DataFile="~/App_Data/Nwind.mdb"
        SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName], [Address], [City], [Phone], [Country] FROM [Customers] ORDER BY [Country]">
    </asp:AccessDataSource>

Notes:

• 선택기가 있는 CSS 클래스는 항상 우선 순위를 가지며 사용자 정의 클래스에서 선택기를 생략하면 스타일이 예상과 다르게 보일 수 있습니다.
• CSS 선택기의 잠재적인 부작용은 이러한 스타일이 셀 템플릿의 요소를 포함하여 본문의 모든 td 요소(꺾쇠 괄호 표기법과 같은 첫 번째 수준 td 요소뿐만 아니라)에 적용되므로 선택기 작업을 신중하게 수행해야 한다는 것입니다.
• Internet Explorer 6은 꺾쇠 괄호 형식('>')의 선택기를 지원하지 않습니다.  IE6을 대상으로 하는 애플리케이션의 경우 꺾쇠 괄호를 생략해야 합니다. 본보기:

tbody tr.NewRowCssClass td

{
    /*styles*/
}