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

infragistics log


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
{
}


延伸閱讀
aa71435723的大頭照
Winston

Eggplant DAI 自動化測試專家。

留言