このトピックでは、igGrid で行選択を構成する方法を紹介します。
このトピックは、以下のセクションで構成されます。
以下の表は、このトピックを理解するために必要な前提条件です。
igGrid
™ コントロールの rowSelectors
ウィジェットは多数の構成オプションを公開しています。以下の表は、構成可能な画面要素とウィジェットから管理できるビヘイビアを示しています。一部のビヘイビア/機能については、チャートに続くブロックに詳細説明と例が記載されています。
構成可能なビヘイビア/機能 | 構成の詳細 | 構成プロパティ |
---|---|---|
複数行の選択 | デフォルトで RowSelectors ウィジェットの行の番号付けが有効になっています。 | - |
選択チェックボックス | 行セレクター列にチェックボックスを含むかどうかを判断します | enableCheckBoxes |
行の番号付け | プロパティが有効な場合、行セレクター列には行番号が入っています。 | enableRowNumbering |
チェックボックス状態変更イベントをキャンセルする | checkBoxStateChanging イベントにフックし、ある状態にあるそのイベントをキャンセルします。 |
- |
行の番号付けシード | シードがデフォルト番号付けに追加されます。 | rowNumberingSeed |
行セレクター列の幅。 | 行セレクター列の幅はプロパティを設定することで構成できます。 | rowSelectorColumnWidth |
構成可能イベント | これらのイベントの詳細情報は、プロパティ参照セクションのリストを参照してください。 igGridRowSelectors イベント | |
必須選択 | 選択機能を有効にすることを必須にします。選択が有効でない場合、例外がスローされます。 | requireSelection |
RowSelectors でセルまたは行を選択するには、グリッドの Selection 機能を初期化する必要があります。RowSelectors は Selection 機能を自動的に初期化しないため、必要に応じてユーザーに有効にしてもらいます。Selection 機能がなくても、行の番号付け機能などに RowSelectors を使用できます。以下の例では、複数選択が有効になっています。赤色の矢印は、行セレクター列を示します。
以下の図では、RowSelectors と複数選択機能が有効になっています。
HTML の場合:
<script type="text/javascript">
$(function () {
$("#grid").igGrid({
autoGenerateColumns: true,
dataSource: source,
features: [
{
name: 'RowSelectors'
},
{
name: 'Selection',
mode: "cell",
multipleSelection: true
}
]
});
});
</script>
Razor の場合:
@Html.Infragistics().Grid(Model)
.AutoGenerateColumns(true)
.Features(feature => {
feature.Selection().MultipleSelection(true);
feature.RowSelectors();
})
.DataBind()
.Render()
)
デフォルトで、複数選択モードに利用可能なヘッダー チェックボックスは現在のデータ ビューのすべての行をチェックします。グリッドの行セレクター機能およびページング機能は、"enableSelectAllForPaging" オプション (デフォルト値は true) を使用してすべてのページでレコードをすべて選択する機能を提供します。
ローカル ページングの場合、ヘッダー チェックボックスをクリックすると、すべてのページからの行を選択/選択解除するオプションを通知するオーバーレイが表示されます (以下の画面参照)。
注: 「すべて選択」機能はリモート ページング機能をサポートしません。ヘッダー チェックボックスをクリックすると、現在のページのみの行が選択されます。
以下の画面は「すべて選択」機能を表示します。
以下の表は、プロパティ設定の推奨構成をマップしています。プロパティは igGridRowSelectors オプションを通じてアクセスされます。
プロパティ | 設定 |
---|---|
enableSelectAllForPaging | true |
enableCheckBoxes | true |
multipleSelection | true |
HTML の場合:
<script type="text/javascript">
$(function () {
$("#grid").igGrid({
autoGenerateColumns: true,
dataSource: source,
features: [
{
name: 'RowSelectors',
enableCheckBoxes: true,
enableSelectAllForPaging: true
},
{
name: 'Selection',
multipleSelection: true
},
{
name: 'Paging',
type: "local",
pageSize: 10
}
]
});
});
</script>
Razor の場合:
@Html.Infragistics().Grid(Model)
.AutoGenerateColumns(true)
.Features(feature => {
feature.Selection().MultipleSelection(true);
feature.RowSelectors()
.EnableCheckBoxes(true)
.EnableSelectAllForPaging(true);
feature.Paging().PageSize(10);
})
.DataBind()
.Render()
)
選択チェックボックスは、enableCheckBoxes
プロパティを true に設定して追加されます。チェックボックス機能が有効になっている場合、複数行を選択するときに Ctrl キーを押していなくてもよいように、複数選択を使用することをお勧めします。
複数選択が有効な場合、行セレクターの列ヘッダーにチェックボックスが表示されます。このチェックボックスはすべての行を一度に選択/選択解除します。ページング機能が有効な場合、現在のページのみの行を選択/選択解除します。
注: チェックボックスを有効にする場合、
igGridSelection
は「row」選択モードを使用します。
以下の図は、両方のチェックボックス機能とページングが有効なグリッドを示します。
以下の表は、プロパティ設定の推奨構成をマップしています。プロパティは igGridRowSelectors オプションを通じてアクセスされます。
プロパティ | 設定 |
---|---|
enableCheckBoxes | true |
HTML の場合:
<script type="text/javascript">
$(function () {
$("#grid").igGrid({
autoGenerateColumns: true,
dataSource: source,
features: [
{
name: 'RowSelectors',
enableCheckBoxes: true
},
{
name: 'Selection',
multipleSelection: true
}
]
});
});
</script>
Razor の場合:
@Html.Infragistics().Grid(Model)
.AutoGenerateColumns(true)
.Features(feature => {
feature.Selection().MultipleSelection(true);
feature.RowSelectors().EnableCheckBoxes(true);
})
.DataBind()
.Render()
)
グリッドの行セレクター列は、行を連番で表示する場合に使用できます。これは RowSelectors
機能の enableRowNumbering
オプションで管理されます。
図は、行番号が有効なグリッドを示します。
以下の表は、プロパティ設定の推奨構成をマップしています。プロパティは igGridRowSelectors
オプションを通じてアクセスされます。
0 以外の開始値を設定するには、rowNumberingSeed
オプションを使用します。
プロパティ | 設定 |
---|---|
enableRowNumbering | true |
rowNumberingSeed | 0 |
JavaScript の場合:
<script type="text/javascript">
$(function () {
$("#grid").igGrid({
autoGenerateColumns: true,
dataSource: source,
features: [
{
name: 'RowSelectors',
enableRowNumbering: true
}
]
});
});
</script>
Razor の場合:
@Html.Infragistics().Grid(Model)
.AutoGenerateColumns(true)
.Features(feature => {
feature.Selection().MultipleSelection(true);
feature.RowSelectors().EnableRowNumbering(true);
})
.DataBind()
.Render()
)
checkBoxStateChanging
イベントを処理することで、チェックボックス選択をキャンセルできます。
以下はプロセスの概念的概要です。
checkBoxStateChanging
イベントの処理checkBoxStateChanging
イベントを処理します。
checkBoxStateChanging
イベントが発生した場合に呼び出される関数を定義します。
JavaScript の場合:
function gridcheckboxStateChanging (evt, ui) {
};
ハンドラーを igGrid
の rowSelectorClicked
イベントに設定します。
いったんハンドラーを定義したら、gridcheckboxStateChanging イベントのハンドラーとして設定する必要があります。
jQuery では、これはウィジェットがインスタンス化されるときに行うことができます。
ASP.NET MVC では、jQuery delegate() または bind() API を使用してイベントを添付する必要があります。このイベントの型は iggridrowselectorscheckboxstatechanging です。
JavaScript の場合:
$(function () {
$("#grid1").igGrid({
autoGenerateColumns: true,
dataSource: adventureWorks,
responseDataKey: 'Records',
features: [
{
name: 'RowSelectors',
enableCheckBoxes: true,
checkBoxStateChanging: "gridcheckboxStateChanging"
},
{
name: 'Selection'
}
]
});
});
イベントをキャンセルします。
false を返すことでイベントをキャンセルします。
JavaScript の場合:
function gridcheckboxStateChanging (evt, ui) {
if (conditionNotMet)
return false;
};
以下は、その他の役立つトピックです。
このサンプルでは、igGrid
における行セレクターの構成方法を紹介します。
オンラインで表示: GitHub