このトピックでは、コードで igGrid
™ コントロールの列を構成する方法を説明します。
このトピックは、以下のセクションで構成されます。
以下の表は、このトピックの情報を完全に理解するために前提条件を示しています。
以下の表は、igGrid
コントロール列の構成可能なビヘイビアーを示しています。これらのビヘイビアーは、コントロールの columnSettings
オプションのプロパティで管理されます。一部のビヘイビア/機能については、チャートに続くブロックに詳細説明と例が記載されています。
注: 以下の表には、列チューザーの非表示に固有のプロパティとメソッドは記載されていません。それらについては、列チューザーを非表示にするトピックをご覧ください。
構成可能なビヘイビアー/機能 | 構成の詳細 | 構成プロパティ |
---|---|---|
列の非表示 (デフォルト) | グリッドの初期化時は列は非表示になっています。 | hidden |
列を完全に非表示にする | グリッドの初期化時は列は非表示なっており、ユーザー オプションは何も表示されません。 | allowHiding |
列の非表示を有効にする | ユーザーによる列の非表示を可能にします。 | allowHiding |
非表示の列インジケーターの幅 | ヘッダー内の非表示の列インジケーターの幅 (ピクセル) | hiddenColumnIndicatorHeaderWidth |
列チューザーの構成 | デフォルトの列チューザーの幅 (ピクセル) | columnChooserWidth |
列チューザーの構成 | デフォルトの列チューザーの高さ (ピクセル)。 | columnChooserHeight |
ドロップダウン アニメーションの期間 | ドロップダウン アニメーションの時間 (ミリ秒)。 | dropDownAnimationDuration |
ドロップダウン ボタンの表示/非表示。 | フッター ボタンの表示状態。 | showDropDownButton |
列チューザーの構成 | 列チューザー ウィンドウのキャプションのテキスト。 | columnChooserCaptionText |
列チューザーの構成 | ドロップダウン ツール メニューのキャプション (機能セレクター)。 | columnChooserDisplayText |
ツールチップ テキスト | 非表示の列インジケーターのツールチップに表示されるテキスト。 | hiddenColumnIndicatorTooltipText |
列キーの構成 | 列キー。これは優先列 ID です。 | columnKey |
列インデックスの構成 | 列インデックス。列キーが設定されていない場合に使用できます。 | columnIndex |
以下の図では、Reorder Point 列が初期化時に非表示になっています。
以下の表は、プロパティ設定の推奨構成をマップしています。プロパティは igGridHiding
オプションからアクセスされます。
プロパティ | 設定 |
---|---|
columnKey | ReorderPoint |
allowHiding | true |
hidden | true |
JavaScript の場合:
<script type="text/javascript">
$(function () {
$("#grid1").igGrid({
autoGenerateColumns: true,
dataSource: adventureWorks,
responseDataKey: 'Records',
features: [
{
name: 'Hiding',
columnSettings: [
{columnKey: 'ReorderPoint', allowHiding: true, hidden: true}
]
}
});
});
</script>
Razor の場合:
@Html.Infragistics().Grid(Model)
.AutoGenerateColumns(true)
.Features(feature =>{
feature.Hiding().ColumnSettings(settings => settings.ColumnSetting()
.ColumnKey("ReorderPoint")
.AllowHiding(true)
.Hidden(true));
}).DataBind().Render()
)
以下の図は Address と BirthDate の 2 つの列が完全に非表示になったグリッドを表示します。これらの列の印がないため、ユーザーは列が非表示でることを認識できません。
以下の表は、プロパティ設定の推奨構成をマップしています。プロパティは igGridHiding オプションからアクセスされます。
プロパティ | 設定 |
---|---|
columnKey | true |
allowHiding | false |
JavaScript の場合:
<script type="text/javascript">
$(function () {
$("#grid1").igGrid({
autoGenerateColumns: true,
dataSource: adventureWorks,
responseDataKey: 'Records',
features: [
{
name: 'Hiding',
columnSettings: [
{columnKey: 'Address', allowHiding: false, hidden: true}
{columnKey: 'BirthDate', allowHiding: false, hidden: true}
]
}
});
});
</script>
Razor の場合:
@Html.Infragistics().Grid(Model)
.AutoGenerateColumns(true)
.Features(feature =>{
feature.Hiding().
.ColumnSettings(settings =>
{
settings.ColumnSetting().ColumnKey("Address").Hidden(true).AllowHiding(false);
settings.ColumnSetting().ColumnKey("BirthDate").Hidden(true).AllowHiding(false);
})
).DataBind().Render()
)
列の非表示のキャンセルは、columnHiding
イベントをキャンセルすることで行います。columnHiding
が発生した場合に、列を非表示にしないようにするためにこれが行われます。
以下はプロセスの概念的概要です。
columnHiding
イベントの処理columnHiding
イベントを処理します。
ハンドラー関数を定義します。
columnHiding イベントが発生した場合に呼び出される関数を定義します。
JavaScript の場合:
<script type="text/javascript">
function gridColumnHiding (evt, ui) {
};
</script>
ハンドラーを igGrid
の columnHiding
イベントに設定します。
いったんハンドラーを定義したら、columnHiding
イベントのハンドラーとして設定する必要があります。jQuery では、これはウィジェットがインスタンス化されるときに行うことができます。ASP.NET MVC では、jQuery on
または bind
API を使用してイベントを添付する必要があります。また on API の使用は、純粋な jQuery 実装のイベントを添付するためのオプションです。このイベントの型は iggridhidingcolumnhiding
です。
JavaScript の場合:
$(function () {
$("#grid1").igGrid({
autoGenerateColumns: true,
dataSource: adventureWorks,
responseDataKey: 'Records',
features: [
{
name: 'Hiding',
columnHiding: gridColumnHiding
}
]
});
});
HTML と ASPX の場合:
$("# grid1").on("iggridhidingcolumnhiding", comboSelectionChanging);
イベントをキャンセルします。
イベントをキャンセルするには、false を返します。
HTML と JavaScript の場合:
<script type="text/javascript">
function gridColumnHiding (evt, ui) {
if (conditionNotMet)
return false;
};
</script>
これらのプロパティの詳細情報は、プロパティ参照セクションのリストを参照してください。
この例では、列チューザーが以下の設定で構成されています。
以下は最終結果のプレビューです。
以下の表は、プロパティ設定の推奨構成をマップしています。
プロパティは igGridHiding
オプションからアクセスされます。
プロパティ | 設定 |
---|---|
columnChooserWidth | 300 |
columnChooserHeight | 300 |
columnChooserCaptionText | New Caption Text |
columnChooserDisplayText | New Chooser Text |
JavaScript の場合:
<script type="text/javascript">
$(function () {
$("#grid").igGrid({
autoGenerateColumns: true,
dataSource: source,
features: [
{
name: 'Hiding',
columnChooserWidth: 300,
columnChooserHeight: 300,
columnChooserCaptionText: 'New Caption Text',
columnChooserDisplayText: 'New Chooser Text'
}]
});
});
</script>
Razor の場合:
@Html.Infragistics().Grid(Model)
.AutoGenerateColumns(true)
.Features(feature =>{
feature.Hiding()
.ColumnChooserHeight(300)
.ColumnChooserWidth(300)
.ColumnChooserCaptionText("New Caption Text")
.ColumnChooserDisplayText("New Chooser Text");
}).DataBind().Render()
)
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
オンラインで表示: GitHub