WebDataGrid のスタイル設定

0 ユーザーが評価
この投稿には確認済みの回答があります。 0 返信 | 1 サポーター

トップ 10 投稿者 
女性
投稿 22
IG Employee

元記事 (英語): Alexander Kartavov - http://forums.infragistics.com/blogs/engineering/archive/2010/08/25/webdatagrid-css-styling-guide.aspx

 

WebDataGrid のスタイル設定


1. コントロール レベルで適用される CSS クラス

1.       CssClassグリッドのフレームに適用されます。

2.       HeaderCaptionCssClass各列のヘッダー キャプションに適用されます。

3.       ItemCssClass 各行に適用されます。

4.       AltItemCssClass各偶数の行に適用されます。

5.       FooterCaptionCssClass各列のフッター キャプションに適用されます。

2. 列レベルで適用される CSS クラス

 

1.       Header-CssClass列のヘッダーに適用されます。

2.       CssClass  列の各セルに適用されます。

3.       Footer-CssClass 列のフッターに適用されます。

 

: 列レベルで適用されるクラスはコントロール レベルで適用されるクラスを上書きします。

3. 動作レベルで適用される CSS クラス

3.1. アクティブ化

1.       ActiveCellCssClassアクティブ セルに適用されます。

2.       ActiveColumnCssClassアクティブ セルの列ヘッダーに適用されます。

3.       ActiveRowCssClassアクティブ セルの行に適用されます。

4.       ActiveRowSelectorCssClass アクティブ セルの RowSelector に適用されます。

5.       ActiveRowSelectorImageCssClass アクティブ セルの RowSelector の画像領域に適用されます。

3.2. 列の固定


1.       CellCssClass固定の列セルに適用されます。

2.       FooterCssClass固定の列フッターに適用されます。

3.       HeaderCssClass固定の列ヘッダーに適用されます。

4.       SeparatorCssClass 固定の列と標準の列を分割するセパレーター線に適用されます。

 

3.3. 列の移動 

 
 

1.      TopDragIndicatorCssClassドロップ インジケーターの上部に適用されます。

2.      MiddleDragIndicatorCssClass ドロップ インジケーターの中間部に適用されます。

3.      BottomDragIndicatorCssClassドロップ インジケーターの下部に適用されます。

4.      DragMarkupCssClass – DragMarkup に適用されます。デフォルト ドラッグ マークアップが使用される場合、ヘッダーにすでに適用されているスタイルに加えこのクラスも適用されます。ドラッグ マークアップが置き換えられた場合、DragMarkupCssClass のみが使用されます。

3.4. 列のサイズ変更

 

1.       ResizeIndicatorCssClass サイズ変更インジケーター線に適用されます。

 

3.5. 編集 

1.        EditCellCssClass 編集しているセルに適用されます。

2.       AddNewRowCssClass – AddNewRow に適用されます。

3.       AddNewRowSelectorImageCssClass AddNewRow RowSelector の画像領域に適用されます。

3.6. フィルタリング 

 

 

 

1.       EditCellCssClass編集しているフィルター セルに適用されます。

2.       FilterButtonCssClassフィルター ボタンに適用されます。

3.       FilteringCssClassフィルター行に適用されます。

4.       FilterRowSelectorImageCssClassフィルター行の行セレクターの画像領域に適用されます。

5.       FilterRuleDropDownCssClassフィルター ルールのドロップ ダウンに適用されます。

6.       FilterRuleDropDownHoverItemCssClassフィルター ルールのドロップ ダウンのホバーされている項目に適用されます。

7.       FilterRuleDropDownItemCssClass フィルター ルールのドロップ ダウンの項目に適用されます。

8.       FilterRuleDropDownSelectedItemCssClass フィルター ルールのドロップ ダウンの選択されている項目に適用されます。

 

3.7. ページング

 

 

1.       PagerCssClassページャー フレームに適用されます。

2.       CurrentPageLinkCssClass数字モードで現在のページ インデックスに適用されます。

3.       PageLinkCssClass数字モードで現在のページャーのインデックス リンク以外に適用されます。

 

 3.8. 行セレクター

1.       HeaderRowSelectorCssClassヘッダー行の行セレクターに適用されます。

2.       FooterRowSelectorCssClassフッター行の行セレクターに適用されます。

3.       RowSelectorCssClass行セレクターに適用されます。

 

  3.8. 選択

1.       SelectedHeaderCssClass選択されている列のヘッダーに適用されます。

2.       SelectedCellCssClass選択されているセルに適用されます。

3.       SelectedRowSelectorCssClass選択されている行の行セレクターに適用されます。

4.       SelectedRowSelectorImageCssClass選択されている行の行セレクター画像に適用されます。

 

 

CSS セレクターの使用

CSS クラスは WebDataGrid の各セルに適用されます。複数レコードがあるグリッドでは、1 つの CSS クラスを各レコードに適用する必要があります。これによって、描画される HTML 量が増大するため、パフォーマンスが悪くなります。この問題を回避するには、WebDataGrid が CSS セレクターを使用します。

たとえば、各セルに適用される igg_Item と言うデフォルト CSS クラスがあります。以下がその方法です。

tbody.Igg_Item > tr > td
{

     /* スタイル */

}

 

カスタム CSS クラスを適用するために同じパターンを使用します。

1. 本文のセルに対象する CSS クラスのため、CSS クラスを以下のコードのように作成します。

tbody.NewCellClass > tr > td

{

    /*スタイル*/

}

コントロール レベルの ItemCssClass プロパティおよび列固定動作の CellCssClass プロパティに適用されます。

2.       グリッドの特定のセルを対象する CSS クラスのため、セレクターを以下のように作成します。

tbody > tr > td.NewCellClass

{

    /*スタイル*/

}

以下のプロパティに適用されます。 

  • 列レベル: CssClass
  • アクティブ化動作: ActiveCellCssClass
  • 選択動作: SelectedCellCssClass

 3.       行に対象する CSS クラスのため、CSS クラスを以下のコードのように作成します。

tbody > tr.NewRowCssClass > td

{

    /*スタイル*/

}

 

以下のプロパティに適用されます。

  • コントロール レベル: AltItemCssClass
  • アクティブ化動作: 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>

 

:

  • セレクターがある CSS クラスが常に優先されます。カスタム クラスでセレクターがない場合、表示されるスタイルが異なる可能性があります。
  • CSS セレクターを使用すると、そのスタイルは本文ですべての TD 要素に適用されます。山括弧では最初のレベルの TD 要素のみに適用されるわけではありません。セル テンプレートでの TD も適用されます。セレクターの使用に注意してください。
  • Internet Explorer 6 は山括弧書式 ('>') のセレクターをサポートしません。IE6 を対象するアプリケーションでは、山括弧を除外する必要があります。例:

 

tbody tr.NewRowCssClass td

{

    /*スタイル*/

}

 

ページ 1 / 1 (1 項目) | RSS
Infragistics Japan
インフラジスティックス ジャパン