作成日: 2018/03/05 最終更新日: 2018/03/05
文書種別
使用方法
詳細
グループ化を設定するとグループヘッダーに三角形のアイコンが表示されますが、GroupInfoクラスのCollapsedImageClass／ExpandedImageClassプロパティを使用して、展開時および縮小時それぞれのアイコンを任意の画像に変更することができます。
【手順】
1.プロジェクトに新規フォルダ（例：Iconsフォルダ）を追加します。
2.上記のフォルダ内に、任意のアイコン画像（例：forward.pngファイル）を追加します。
3.任意のCSSクラス（例：ui-icon.groupCollapsed）を追加し、background-imageプロパティのurlに上記のアイコン画像を指定します。
4.C1GridViewのGroupInfoクラスにて、CollapsedImageClass／ExpandedImageClassプロパティに上記のCSSクラスを指定します。
◎サンプルコード(aspx)
【手順】
1.プロジェクトに新規フォルダ（例：Iconsフォルダ）を追加します。
2.上記のフォルダ内に、任意のアイコン画像（例：forward.pngファイル）を追加します。
3.任意のCSSクラス（例：ui-icon.groupCollapsed）を追加し、background-imageプロパティのurlに上記のアイコン画像を指定します。
4.C1GridViewのGroupInfoクラスにて、CollapsedImageClass／ExpandedImageClassプロパティに上記のCSSクラスを指定します。
◎サンプルコード(aspx)
<style type="text/css">
.ui-icon.groupCollapsed {
background-image: url(Icons/forward.png);
}
.ui-icon.groupExpanded {
background-image: url(Icons/Back.png);
}
</style>
<wijmo:C1GridView ID="C1GridView1" runat="server" ・・・ >
<Columns>
<wijmo:C1BoundField ・・・ >
<GroupInfo ・・・ CollapsedImageClass="ui-icon groupCollapsed" ExpandedImageClass="ui-icon groupExpanded"/>
</wijmo:C1BoundField>
・・・
</Columns>
</wijmo:C1GridView>
.ui-icon.groupCollapsed {
background-image: url(Icons/forward.png);
}
.ui-icon.groupExpanded {
background-image: url(Icons/Back.png);
}
</style>
<wijmo:C1GridView ID="C1GridView1" runat="server" ・・・ >
<Columns>
<wijmo:C1BoundField ・・・ >
<GroupInfo ・・・ CollapsedImageClass="ui-icon groupCollapsed" ExpandedImageClass="ui-icon groupExpanded"/>
</wijmo:C1BoundField>
・・・
</Columns>
</wijmo:C1GridView>
旧文書番号
82554