Infragistics｜Ultimate UI ASP.NET｜WebDataGrid的Style設定

1.套用於元件級別的 CSS

1. CssClass－套用於Grid的框架。




2. 
   HeaderCaptionCssClass－套用於各列(Column)的header caption。
   




3. ItemCssClass－套用於各行(Row)。




4. AltItemCssClass－套用於各偶數行。




5. 
   FooterCaptionCssClass－套用於每列的footer caption。
   

2. 套用於 row 的 CSS Class

1. Header-CssClass－套用於Column的header。




2. CssClass—套用於Column的每個儲存格(cell)。




3. 
   Footer-CssClass－套用於Column的footer。
   請注意：在Column的階層套用的Class會對在控制階層應用的Class進行覆蓋。
   

3. 套用於動作階層的CSS類

3.1. 啟動(Activation)

1. ActiveCellCssClass－套用於active儲存格。




2. 
   ActiveColumnCssClass－套用於active儲存格Column的header。
   




3. ActiveRowCssClass－套用於active儲存格Row。




4. 
   ActiveRowSelectorCssClass－套用於active儲存格的RowSelector。
   




5. 
   ActiveRowSelectorImageCssClass－套用於active儲存格的RowSelector的圖像區域。
   

3.2. row 固定

1. 
   CellCssClass－套用於固定列(Column)的儲存格。
   




2. FooterCssClass－套用於固定列的footer。




3. HeaderCssClass－套用於固定列的header。




4. 
   SeparatorCssClass－套用於分割固定列和標準列的分隔線。
   

3.3. row 移動

1. 
   TopDragIndicatorCssClass－套用於drog Indicator的頂端部分。
   




2. 
   MiddleDragIndicatorCssClass－套用於drog Indicator的中間部分。
   




3. 
   BottomDragIndicatorCssClass－套用於drog Indicator的末端部分。
   




4. 
   DragMarkupCssClass－套用於DragMarkup。使用預設的拖曳標記時，除了已套用於header的任何style之外，也將套用此class。DragMarkupCssClass
   僅在拖曳標記被替換時使用。
   

3.4. 調整 row 大小

1. 
   ResizeIndicatorCssClass－套用調整indicator線條的大小。
   

3.5. 編輯

1. EditCellCssClass－套用於正在編輯的儲存格。




2. AddNewRowCssClass－套用於AddNewRow。




3. 
   AddNewRowSelectorImageCssClass－套用於AddNewRow的RowSelector的圖像區域。
   

3.6. Filtering

1. 
   EditCellCssClass－套用於正在編輯的filter儲存格。
   




2. FilterButtonCssClass－套用於filter按鈕。




3. FilteringCssClass－套用於filter row。




4. 
   FilterRowSelectorImageCssClass－套用於filter row的Row Selector圖像區域。
   




5. 
   FilterRuleDropDownCssClass－套用於filter規則的drop down。
   




6. 
   FilterRuleDropDownHoverItemCssClass－套用於filter規則drop
   down中hover的項目。
   




7. 
   FilterRuleDropDownItemCssClass－套用於filter規則drop down中的項目。
   




8. 
   FilterRuleDropDownSelectedItemCssClass－套用於filter規則drop
   down中的選定項目。
   

3.7. Paging

1. PagerCssClass－套用於Pager的框架。




2. 
   CurrentPageLinkCssClass－套用於數字模式下的目前頁面索引(index)。
   




3. 
   PageLinkCssClass－套用於數字模式下目前Pager中的非索引的連結。
   

3.8. Row Selector

1. 
   HeaderRowSelectorCssClass－套用於Header Row中的Row Selector。
   




2. 
   FooterRowSelectorCssClass－套用於Footer Row中的Row Selector。
   




3. RowSelectorCssClass－套用於Row Selector。

3.9. Selected

1. 
   SelectedHeaderCssClass－套用於選定的Column Header。
   




2. SelectedCellCssClass－套用於選定的儲存格。




3. 
   SelectedRowSelectorCssClass－套用於所選Row的Row Selector。
   




4. 
   SelectedRowSelectorImageCssClass－套用於所選Row的Row Selector圖像。
   

CSS Selector 的使用

CSS Class套用於WebDataGrid的每個儲存格。在具有多個record的grid裡，一個CSS
Class應該要能套用在每個record，但這樣的話會大幅增加呈現的HTML數量，然後造成效能的拖累。

為避開這個問題，WebDataGrid採用CSS Selector來應對。

舉例來說，設計一個稱為igg_Item的預設CSS Class，並套用於每個儲存格。
說明如下:

tbody.Igg_Item > tr > td
{
     
}

我們使用相同的pattern來套用在Custom CSS Class。

1. 針對本文儲存格的CSS Class，建立如下圖程式碼的CSS Class。

tbody.NewCellClass > tr > td
{
    
}

適用於Control階層的ItemCssClass屬性和Row固定動作的CellCssClass屬性。

2. 針對特定grid儲存格的CSS Class建立一個Selector，如下所示

tbody > tr > td.NewCellClass
{
    
}

適用於以下屬性：

• Column階層：CssClass
• activation動作：ActiveCellCssClass
• 選擇動作：SelectedCellCssClass

3. 針對Row的CSS Class建立一個如下面程式碼所示的CSS Class。

tbody > tr.NewRowCssClass > td
{
}

適用於以下屬性：

• Control階層：AltItemCssClass
• activation動作：ActiveRowCssClass

下面的程式碼展示如何將各種的Style套用於grid儲存格。

<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>
            <ig:bounddatafield key="”City”" datafieldname="”City”" header-text="”City”"></ig:bounddatafield>
            <ig:bounddatafield key="”CompanyName”" datafieldname="”CompanyName”" header-text="”Company”"></ig:bounddatafield>
            <ig:bounddatafield key="”ContactName”" datafieldname="”ContactName”" header-text="”Contact”"></ig:bounddatafield>
            <ig:bounddatafield key="”Phone”" datafieldname="”Phone”" header-text="”Phone”"></ig:bounddatafield>
        </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>

請注意，帶有Selector的CSS Class的順位通常是優先的。如果您的Custom CSS Class沒有Selector，您看到的Style可能會不一樣。

使用CSS Selector會將Style套用到本文中的所有TD要素。尖括號不僅僅適用於最初階層的TD要素。儲存格的template中的TD也適用，也請注意Selector的使用。

Internet Explorer 6不支援尖括號格式的Selector (‘>’)。針對IE6的應用程式應排除尖括號的使用。 舉例如下：

tbody tr.NewRowCssClass td
{
}