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
{
/*スタイル*/
}
