WebDataGrid クライアントサイドで選択項目を取得 - インフラジスティックス・ジャパン株式会社Blog

WebDataGrid ではクライアントサイド、サーバーサイドの両方で選択セルや選択行の情報を取得することができます。今回はセルや行が選択された際にクライアントサイドで情報取得する方法をご紹介します。

１．選択機能の有効化
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>

２．イベントハンドラーの登録

次に、セルや行が選択されたタイミングで発生するイベントハンドラーを登録します。

セル選択後に発生する CellSelectionChanged イベントと、行選択後に発生する RowSelectionChanged イベントをハンドルします。

セル選択の場合：

function WebDataGrid1_Selection_CellSelectionChanged(sender, eventArgs)
{
    // 選択セル取得ロジック
}

行選択の場合：

function WebDataGrid2_Selection_RowSelectionChanged(sender, eventArgs)
{
    // 選択行取得ロジック
}

３．選択項目の取得

では先ほど登録したイベントハンドラー内に選択項目取得のロジックを実装していきます。選択セルや選択行の情報を、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;
        }
    }
}

４．実行結果

Ctrl を押下しながらセルや行をクリックしていくと、選択項目が右側の Label コントロールに表示されます！