Yuki Mita

デベロッパーサポート担当
Twitter : @ig_yuki
WebDataGrid クライアントサイドで選択項目を取得

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


1.選択機能の有効化

WebDataGrid では 選択機能や列固定、列並び替えなどの機能を Behaviors というコレクションによって管理しています。選択機能を利用するには、まず選択機能の有効化を行います。

WebDataGrid のデザイナから「動作の編集」 から 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 の選択項目を取得する方法をご紹介しました。セル選択や行選択のロジックを実装することは日常的に発生するのではないかと思います。是非こちらのブログ記事をリファレンスとしてご活用下さい。


今回の実装サンプルはこちら

WebDataGrid_ClientSelection_CS.zip

WebDataGrid_ClientSelection_VB.zip

(本サンプルは13.1.20131.2069バージョンで作成されました)

WebDataGrid を含む NetAdvantage for ASP.NET は無料トライアル版をご用意しておりますので、是非一度お試し下さい~!

NetAdvantage トライアル版ダウンロード
NetAdvantage ダウンロード 

 

WebDataGrid 関連記事:

WebDataGrid の機能は多岐にわたります。よくお問い合わせ頂く内容につきましては一部このブログでも実装方法や設定方法を紹介させていただいております。是非ご活用ください。

WebDataGrid 利用方法一覧
http://blogs.jp.infragistics.com/blogs/yuki-mita/archive/2013/08/15/26213.aspx

Comments

Yuki Mita said:

NetAdvantage for ASP.NET でのクライアントサイドプログラミング Tips です。JavaScript コーディングでの便利機能をご紹介します。JavaScript での開発を始める際に是非ご一読いただければと思います。

# July 12, 2013 2:22 AM

Yuki Mita said:

様々なシナリオにおいて、クライアントサイドでグリッドの行やセル、列を取得する必要が生じます。今回は JavaScript でこれら情報を取得する方法をまとめました。 WebDataGrid にはこれらオブジェクトを取得するにあたり、インデクサや列キーなどを利用することができる

# July 17, 2013 12:02 AM

Yuki Mita said:

グリッド上でクリックやダブルクリック時に何らかの処理を行うというシナリオはよくあるかと思います。 WebDataGrid ではクライアントサイドイベントとして Click イベント 、 DoubleClick

# July 19, 2013 4:26 AM

Yuki Mita said:

WebDataGrid ではデフォルトの状態で列幅よりも長いセルの値を列幅に応じて自動改行し、全ての情報を画面上に表示する様に動作します。但し、状況によってはセルの値を改行せずに一部のみを表示する状態を実現したいケースも出てきます。このような場合、WebDataGrid

# July 23, 2013 10:58 PM

Yuki Mita said:

WebDataGrid に DataTable データをバインドしたシナリオにおける JavaScript API による行の追加と削除をご紹介します。 1.準備 - 機能の有効化 WebDataGrid

# July 29, 2013 9:10 PM

Yuki Mita said:

顧客企業一覧や商品一覧などをグリッドに表示する際に、顧客企業や商品に関するウェブサイトへのリンクも含めたい場面はよくあります。WebDataGrid では TemplateDataField にハイパーリンクを表示するコントロールを埋め込むことでリンク表示を実現することができます。

# August 2, 2013 4:59 AM

Yuki Mita said:

グリッドでのデータ更新のタイミングはシナリオに応じて様々ですが、例えば行の編集を終えた後であったり、変更したい全てのセルの編集を終えた後などが考えられます。WebDataGrid ではデフォルト状態で行の編集後にデータ更新を行いますが、プロパティ設定により任意のタイミングで一括更新を行うこともできるようになっています。今回は一括更新の利用方法をご紹介します。

# August 8, 2013 4:46 AM

Yuki Mita said:

NetAdvantage for ASP.NET で提供させて頂いている主力グリッドコントロール WebDataGrid の利用方法エントリ一覧です。よくご質問頂く内容が中心のエントリとなっていますので、初めて

# August 15, 2013 1:17 AM

Yuki Mita said:

NetAdvantage for ASP.NET で提供させて頂いている主力グリッドコントロール WebDataGrid の利用方法エントリ一覧です。よくご質問頂く内容が中心のエントリとなっていますので、初めて

# August 15, 2013 2:39 AM
Anonymous comments are disabled