WebDataGrid クライアントサイドで行・セル・列を取得 - インフラジスティックス・ジャパン株式会社Blog

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

WebDataGrid にはこれらオブジェクトを取得するにあたり、インデクサや列キーなどを利用することができる API が用意されています。シナリオに応じてこれらを使い分けることができます。

１．行の取得

行はインデクサ指定と、データキー指定による取得ができます。

    // 方法1. インデクサ指定
    var row1 = $find("WebDataGrid1").get_rows().get_row(1);
    
    // 方法2. 列データキー指定（データキーは、DataKeyFields プロパティで特定されるセル値の組み合わせ）
    var row2 = $find("WebDataGrid1").get_rows().get_rowFromKey([2, 10]);

DataKeyFields について・・・
WebDataGrid は DataKeyFields プロパティで指定されている列によって、各行を一意に判別できるようになります。DataKeyFields の指定がない場合、データ更新処理などでエラーとなることがあります。DataKeyFields には単一の列指定は勿論、複数の列を指定することもできます。

rowFromKey について・・・
rowFromkey の引数にはデータキーを配列形式で渡します。WebDataGrid のデータキーは、DataKeyFields プロパティで指定されている列になります。方法 2 の例では、DataKeyFields に2つの列が指定してあり、DataKeyFields 1 列目に 2, 2 列目に 10 という値を持つ行を取得しています。

２．セルの取得

セルは、行の特定×列の特定という順序で取得することができます。セルも行と同様、インデクサ指定が可能です。また、列キーなども組み合わせることができます。

    // 方法1. インデクサ指定
    var cell1 = $find("WebDataGrid1").get_rows().get_row(0).get_cell(0);
    
    // 方法2. 列オブジェクトからセルを取得
    var targetCol = $find("WebDataGrid1").get_columns().get_columnFromKey("2nd");
    var cell2 = $find("WebDataGrid1").get_rows().get_row(1).get_cellByColumn(targetCol);

    // 方法3. 列キー指定
    var cell3 = $find("WebDataGrid1").get_rows().get_row(2).get_cellByColumnKey("3rd");

セル情報取得

セルの行インデックスや値など、セル取得時によく参照される情報です。

    // 行インデックス
    var cell1_rowIndex = cell1.get_index();

    // 列インデックス
    var cell2_columnIndex = cell2.get_column().get_index();
    
    // セルの値
    var cell3_value = cell3.get_value();

    // セルの表示テキスト
    var cell3_text = cell3.get_text();

セルの値・テキスト変更

WebDataGrid はセルに Value と Text という2つのプロパティを用意しています。これは、セルの持つ Value と Text が異なる場合があるからです。例えば、DropDownProvider などエディタを埋め込んだ際には、リスト項目の表示内容（Text）とその値・意味（Value）が異なることがあります。

// セルの値変更
cell2.set_value("new value");
// セルのテキスト変更
cell3.set_text("new text");

３．列の取得

列はグリッド配下から get_columns() メソッドで列コレクションを取得し、特定列を取得します。

    // 方法1. インデクサ指定
    var column1 = $find("WebDataGrid1").get_columns().get_column(1);
    // 方法2. 列キー指定
    var column2 = $find("WebDataGrid1").get_columns().get_columnFromKey("1st");

列情報取得

特定列でクリック制御を行う場合などには、列インデックスを用いることがよくあります。

    // 列インデックス
    var col1_index = column1.get_index();

ここまで、クライアントサイドで WebDataGrid の行やセル、列の情報を取得する方法をご紹介しました。また、前回の記事では、WebScriptManager を利用することで WebDataGrid のメソッドを IntelliSense で素早く確認する方法もご紹介しています。こちらも是非ご一読下さい。

サンプルはこちら
WebDataGrid_Client-Side-APIs.zip
(本サンプルは13.1.20131.2069バージョンで作成されました)

Infragistics 製品トライアル版ダウンロード