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 のすべてのセルに適用されます。したがって、多くのレコードを持つグリッドがあると想像してみましょう - これは、1つの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*/
}