コード例を使用して、igHierarchicalGrid™ コントロールの行セレクター機能を構成する方法を説明します。
以下は、このトピックを理解するための前提条件として必要なトピックを示しています。
このトピックは、以下のセクションで構成されます。
行選択機能の構成可能な側面を示します。これらの側面は、igGridRowSelectors ウィジェットの関連するプロパティを通じて管理されます。ウィジェットの動きと機能についての詳細な説明といくつかの例を表に続けます。
構成可能な要素 | 詳細 | プロパティ |
---|---|---|
複数列の選択 | デフォルトでは、複数列の選択は有効化されています。これは igGridSelection コントロールを付いじてコントロールされます。 | multipleSelection (igGridSelection™) |
チェックボックスのついた選択 | 行選択列のチェックボックスを有効にします。 | enableCheckBoxes |
行の番号付け | 有効化されると、行セレクター列の行番号付けが可能です。 | enableRowNumbering |
行番号開始値 | 行番号がカスタム値から開始されることを許可 | rowNumberingSeed |
行セレクター列の幅 | 行セレクター列の幅を設定する | rowSelectorColumnWidth |
構成には選択が必要です。 | 選択機能が無効になっている場合には、コントロールが例外をスローします。 | requireSelection |
注:
RowSelectors
の動作はレイアウトによって設定されます。レイアウトは一度に 1 つのみ選択できます。他のレイアウトの行を選択 / チェックする場合、以前のレイアウトで選択した行は選択解除になります。詳細については、既知の問題と制限 (igHierarchicalGrid) トピックを参照してください。
グリッドに対する選択機能を初期化することで、igHierarchicalGrid コントロールの行選択機能を用いたセルまたは行の選択が可能になります。これは自動的に選択機能を初期化するわけではないので、必要な場合にそれを有効化する必要があります。行選択は選択機能なしでも、たとえば行番号付けに使うことができます。
下図において、行選択と選択機能は有効になっています。赤い四角形は行セレクターの列を表します。
JavaScript の場合:
$(function () {
$("#grid").igHierarchicalGrid({
initialDataBindDepth: 1,
dataSource: data,
dataSourceType: "json",
responseDataKey: "Records",
autoGenerateColumns: true,
autoGenerateLayouts: true,
primaryKey: "ID",
features: [
{
name: "RowSelectors",
inherit: true
},
{
name: "Selection",
multipleSelection: true,
mode: "row"
}
]
});
});
ASPX の場合:
<%= Html.Infragistics()
.Grid(Model)
.ID("grid")
.Features(features =>
{
features.RowSelectors().Inherit(true);
features.Selection().Mode(SelectionMode.Row).MultipleSelection(true);
features.Paging().Type(OpType.Local).PageSize(5);
})
.AutoGenerateColumns(true)
.AutoGenerateLayouts(true)
.DataBind()
.Render()
%>
チェックボックスは、igGridRowSelectors コントロールの enableCheckBoxes
プロパティを true に設定することで追加されます。チェックボックスが有効になっている時は複数選択を使用することを推奨します。これにより、ユーザーは Ctrl キーを押し続けなくても複数行を選択できるようになります。行セレクター チェックボックスが有効になっている時は、複数選択がページをまたいで続きます。
下図は、行セレクター チェックボックスが有効な階層的グリッドを示します。赤マルで囲まれた部分は最初の2つのマスター行の上にあるチェックボックスを示します。
HTML の場合:
<script type="text/javascript">
$(function () {
$("#grid").igHierarchicalGrid({
initialDataBindDepth: 1,
dataSource: data,
dataSourceType: "json",
responseDataKey: "Records",
autoGenerateColumns: true,
autoGenerateLayouts: true,
primaryKey: "ID",
features: [
{
name: "RowSelectors",
enableCheckBoxes: true
inherit: true
},
{
name: "Selection",
multipleSelection: true,
mode: "row"
},
{
name: "Paging",
type: "local"
}
]
});
});
</script>
ASPX の場合:
<%= Html.Infragistics()
.Grid(Model)
.ID("grid")
.Features(features =>
{
features.RowSelectors().EnableCheckBoxes(true).Inherit(true);
features.Selection().Mode(SelectionMode.Row).MultipleSelection(true);
features.Paging().Type(OpType.Local);
})
.AutoGenerateColumns(true)
.AutoGenerateLayouts(true)
.DataBind()
.Render()
%>
グリッド内の行セレクター列にあるすべての行に連続した行番号をつけることもできます。これは igGridRowSelectors
ウィジェットの rowNumbering
オプションを通じて管理されます。
次のスクリーンショットは、行番号が有効にされたグリッドの表示を示しています。
HTML の場合:
<script type="text/javascript">
$(function () {
$("#grid").igHierarchicalGrid({
initialDataBindDepth: 1,
dataSource: data,
dataSourceType: "json",
responseDataKey: "Records",
autoGenerateColumns: true,
autoGenerateLayouts: true,
primaryKey: "ID",
features: [
{
name: "RowSelectors",
enableRowNumbering: true
inherit: true
},
{
name: "Selection",
multipleSelection: true,
mode: "row"
}
]
});
});
</script>
ASPX の場合:
<%= Html.Infragistics()
.Grid(Model)
.ID("grid")
.Features(features =>
{
features.RowSelectors().EnableRowNumbering(true).Inherit(true);
features.Selection().Mode(SelectionMode.Row).MultipleSelection(true);
features.Paging().Type(OpType.Local);
})
.AutoGenerateColumns(true)
.AutoGenerateLayouts(true)
.DataBind()
.Render()
%>
連続した行番号の先頭番号は、シード値を手動で設定することで行えます。これはigGridRowSelectors
ウィジェットの rowNumberingSeed
オプションを通じて管理されます。
以下のスクリーンショットは、オフセット行番号付けされたグリッドの見え方を示しています。
HTML の場合:
<script type="text/javascript">
$(function () {
$("#grid").igHierarchicalGrid({
initialDataBindDepth: 1,
dataSource: data,
dataSourceType: "json",
responseDataKey: "Records",
autoGenerateColumns: true,
autoGenerateLayouts: true,
primaryKey: "ID",
features: [
{
name: "RowSelectors",
enableRowNumbering: true,
rowNumberingSeed: 9,
inherit: true
},
{
name: "Selection",
multipleSelection: true,
mode: "row"
}
]
});
});
</script>
ASPX の場合:
<%= Html.Infragistics()
.Grid(Model)
.ID("grid")
.Features(features =>
{
features.RowSelectors().Inherit(true)
.EnableRowNumbering(true).RowNumberingSeed(9);
features.Selection().Mode(SelectionMode.Row)
.MultipleSelection(true);
features.Paging().Type(OpType.Local);
})
.AutoGenerateColumns(true)
.AutoGenerateLayouts(true)
.DataBind()
.Render()
%>
igGridRowSelectors ウィジェットの rowSelectorColumnWidth
オプションで行セレクター列の幅を設定します。幅の設定はピクセル (75px
) かまたはパーセント (10%
) で行われます。値が設定されていなければ、ウィジェットは自動的に適切な値に幅を設定します。
次のスクリーンショットは、グリッドの行セレクター列の描画を 75 ピクセルの幅に設定しています。幅が拡大されて赤い矢印と線が強調されています。
HTML の場合:
<script type="text/javascript">
$(function () {
$("#grid").igHierarchicalGrid({
initialDataBindDepth: 1,
dataSource: data,
dataSourceType: "json",
responseDataKey: "Records",
autoGenerateColumns: true,
autoGenerateLayouts: true,
primaryKey: "ID",
features: [
{
name: "RowSelectors",
enableRowNumbering: true,
rowSelectorColumnWidth: "75px",
inherit: true
},
{
name: "Selection",
multipleSelection: true,
mode: "row"
}
]
});
});
</script>
ASPX の場合:
<%= Html.Infragistics()
.Grid(Model)
.ID("grid")
.Features(features =>
{
features.RowSelectors().Inherit(true)
.EnableRowNumbering(true).RowSelectorsColumnWidth("75px");
features.Selection().Mode(SelectionMode.Row).MultipleSelection(true);
features.Paging().Type(OpType.Local);
})
.AutoGenerateColumns(true)
.AutoGenerateLayouts(true)
.DataBind()
.Render()
%>
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
このトピックについては、以下のサンプルも参照してください。
RowSelectors
を使用する用法について説明します。オンラインで表示: GitHub