igGrid – 行セレクターのチェックボックスがクリックされた行のデータを取り出したい

igGridの行セレクター（RowSelectors）のチェックボックスがクリックされた際に、その行のデータを取り出したい場合は、checkBoxStateChangingイベントもしくはcheckBoxStateChangedイベントで渡されてくるイベント引数を手掛かりに、igGridにバインドされているデータソースの中から該当データを探索・取得してください。

手がかりにするイベント引数は、

• ui.rowIndex: クリックされた行セレクターが置かれている行のインデックス値
• ui.rowKey: クリックされた行セレクターが置かれている行のprimaryKey値

です。

checkBoxStateChangingでui.rowKeyを手掛かりに探索・取得する場合は以下のようになります。

$("#grid1").igGrid({
    primaryKey: "Col1",
    features : [
        {
            name : "RowSelectors",
            enableCheckBoxes: true,
            checkBoxStateChanging: function(evt, ui){
                // igGridのデータソースオブジェクトを取り出す。
                const igDs = $("#grid1").data("igGrid").dataSource;

                // データソースオブジェクトからデータをすべて取り出す。
                const data = igDs.data();

                // イベント引数として渡されてきたrowKeyと一致するデータを取り出す。
                const dataItem = data.filter(item => item.Col1 == ui.rowKey);
                console.log(dataItem);
            }
        },
        {
            name: "Selection",
        },
    ]
});

　

サンプル

　

APIリファレンス

• checkBoxStateChangingイベント
  • https://jp.igniteui.com/help/api/2022.1/ui.iggridrowselectors#events:checkBoxStateChanging
• checkBoxStateChangedイベント
  • https://jp.igniteui.com/help/api/2022.1/ui.iggridrowselectors#events:checkBoxStateChanged
• その他、データソースを取得するために使用しているAPI
  • https://jp.igniteui.com/help/api/2022.1/ui.iggrid#options:dataSource
  • https://jp.igniteui.com/help/api/2022.1/ig.datasource#methods:data