WebDataGrid ではクライアントサイド、サーバーサイドの両方で選択セルや選択行の情報を取得することができます。今回はセルや行が選択された際にクライアントサイドで情報取得する方法をご紹介します。
1.選択機能の有効化
WebDataGrid では 選択機能や列固定、列並び替えなどの機能を Behaviors というコレクションによって管理しています。選択機能を利用するには、まず選択機能の有効化を行います。
WebDataGrid のデザイナから「動作の編集」 から WebDataGrid デザイナーを起動し、「選択」機能にチェックを入れます。これで選択動作を有効化することができます。
また、デザイナー画面右側のプロパティウィンドウでは選択動作に関するプロパティを設定することもできます。
セル選択の場合:
マウスクリック時にセルを複数選択するためには CellSelectType を Multiple に設定します。上述のデザイナー画面から設定する、もしくはASPX に直接以下コードを実装します。
<Behaviors> <ig:Selection CellSelectType="Multiple"> </ig:Selection> </Behaviors>
行選択の場合:
CellClickAction に Row を指定することで、マウスクリック時にセルではなく行を選択するようになります。また、行を複数選択できるように RowSelectType を Multiple に設定します。
<Behaviors> <ig:Selection CellClickAction="Row" RowSelectType="Multiple"> </ig:Selection> </Behaviors>
2.イベントハンドラーの登録
次に、セルや行が選択されたタイミングで発生するイベントハンドラーを登録します。
セル選択後に発生する CellSelectionChanged イベントと、行選択後に発生する RowSelectionChanged イベントをハンドルします。
セル選択の場合:
function WebDataGrid1_Selection_CellSelectionChanged(sender, eventArgs) { // 選択セル取得ロジック }
行選択の場合:
function WebDataGrid2_Selection_RowSelectionChanged(sender, eventArgs) { // 選択行取得ロジック }
3.選択項目の取得
では先ほど登録したイベントハンドラー内に選択項目取得のロジックを実装していきます。選択セルや選択行の情報を、WebDataGrid の隣にある Label コントロールに表示しています。
セル選択の場合:
get_behaviors().get_selection() から選択項目の情報を取得します。続いて get_selectedCells() を呼び出して選択セルを取得しています。各セルの情報は getItem() メソッドに列インデクサを指定して取得しています。
function WebDataGrid1_Selection_CellSelectionChanged(sender, eventArgs) { // WebDataGrid の参照を取得 var grid1 = $find("WebDataGrid1"); // sender から WebDataGrid を参照することもできます。 //var grid1 = sender; // 選択セルコレクションを取得 var selectedCells = grid1.get_behaviors().get_selection().get_selectedCells(); if (selectedCells != null) { var label1 = document.getElementById("Label1"); label1.innerHTML = ""; // 選択セルをラベルに表示 for (var i = 0; i < selectedCells.get_length(); i++) { var cellValue1 = selectedCells.getItem(i).get_value(); label1.innerHTML += "<br/>" + cellValue1; } } }
行選択の場合:
get_behaviors().get_selection().get_selectedRows() を呼び出して選択行の情報を取得します。
function WebDataGrid2_Selection_RowSelectionChanged(sender, eventArgs) { // WebDataGrid 参照を取得 var grid2 = $find("WebDataGrid2"); // 選択行コレクションを取得 var selectedRows = grid2.get_behaviors().get_selection().get_selectedRows(); if (selectedRows != null) { var label2 = document.getElementById("Label2"); label2.innerHTML = ""; for (var i = 0; i < selectedRows.get_length(); i++) { var cellValue2 = ""; // 選択行のセルをラベルに表示 for (var j = 0; j < selectedRows.getItem(i).get_cellCount(); j++) { // 選択行のセル cellValue2 += selectedRows.getItem(i).get_cell(j).get_value(); // コロンを付与 if (j + 1 != selectedRows.getItem(i).get_cellCount()) { cellValue2 += " : "; } } label2.innerHTML += "<br/>" + cellValue2; } } }
4.実行結果
Ctrl を押下しながらセルや行をクリックしていくと、選択項目が右側の Label コントロールに表示されます!
ここまでクライアントサイドで WebDataGrid の選択項目を取得する方法をご紹介しました。セル選択や行選択のロジックを実装することは日常的に発生するのではないかと思います。是非こちらのブログ記事をリファレンスとしてご活用下さい。
今回の実装サンプルはこちら
WebDataGrid_ClientSelection_CS.zip
WebDataGrid_ClientSelection_VB.zip
(本サンプルは13.1.20131.2069バージョンで作成されました)
WebDataGrid を含む Infragistics Ultimate for ASP.NET は無料トライアル版をご用意しておりますので、是非一度お試し下さい~!
WebDataGrid 関連記事:
WebDataGrid の機能は多岐にわたります。よくお問い合わせ頂く内容につきましては一部このブログでも実装方法や設定方法を紹介させていただいております。是非ご活用ください。