インフラジスティックス・ジャパン株式会社のBlog

インフラジスティックス・ジャパン株式会社のチームメンバーが技術トレンド、製品Tips、サポート情報からライセンス、日々の業務から感じることなど、さまざまなトピックについてお伝えするBlogです。

WebDataGrid クライアントサイドで行・セル・列を取得

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

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

1.行の取得

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

    // 方法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 という値を持つ行を取得しています。

 

2.セルの取得

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

    // 方法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");

 

3.列の取得

列はグリッド配下から 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 製品トライアル版ダウンロード 

 

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

blogs.jp.infragistics.com