igGrid 行の選択を行セレクターのチェックボックスのみで行いたい

行の選択を行セレクターのチェックボックスのみで行いたい場合は、rowSelectionChanging イベントが checkBoxStateChanging イベントと checkBoxStateChanged イベントの間で発生している場合を除いて、rowSelectionChanging イベントをキャンセルしてください。

// 行セレクターのチェックボックスの状態が変更中かどうかを示すフラグ。
// true: 行セレクターのチェックボックスの状態が変更中
// false: それ以外
var isCheckBoxStateChanging = false;

$(document).ready(function(){
    $("#grid1").igGrid({
        // ... (略) ...
        , features : [
            {
                name : "RowSelectors"
                , enableCheckBoxes: true
                , enableRowNumbering: false

                , checkBoxStateChanging: function (evt, ui) {
                    // 行セレクターのチェックボックスの状態が変更中であることを示すフラグをtrueにする。
                    isCheckBoxStateChanging = true;
                }   // End of checkBoxStateChanging

                , checkBoxStateChanged: function (evt, ui) {
                    // 行セレクターのチェックボックスの状態が変更中であることを示すフラグをfalseにする。
                    isCheckBoxStateChanging = false;
                }   // End of checkBoxStateChanged
            }
            , {
                name: "Selection"
                , mode: "row"
                , multipleSelection: true
                , enableCheckBoxes: true
                , activation: true

                , rowSelectionChanging: function(evt, ui){
                    // 行セレクターのチェックボックスのステートが変更中である場合以外は、イベントをキャンセルする。
                    if(!isCheckBoxStateChanging) return false;
                }   // End of rowSelectionChanging
            }
        ]
        // ... (略) ...
    });
});

　

なおこの方法は行セレクターのチェックボックス内をクリックした時のみ、

1. checkBoxStateChanging
2. rowSelectionChanging
3. checkBoxStateChanged

の順でイベントが発生していることに着目した方法です。

イベントの発生順はバージョンアップによって変更される場合がありますので、バージョンアップの際は十分な動作確認テストを行ってください。

（※この記事は 2020 年 4 月 10 日現在の内容です）

サンプル

API リファレンス

• checkBoxStateChanging イベント
  • https://jp.igniteui.com/help/api/2019.2/ui.iggridrowselectors#events:checkBoxStateChanging
• checkBoxStateChanged イベント
  • https://jp.igniteui.com/help/api/2019.2/ui.iggridrowselectors#events:checkBoxStateChanged
• rowSelectionChanging イベント
  • https://jp.igniteui.com/help/api/2019.2/ui.iggridselection#events:rowSelectionChanging