[Wijmo]SelectorのAllCheckでSelectionChangedを処理したくない

Wijmo don't work selection changed event JavaScript
Wijmo don't work selection changed event

今回はWijmoでチェックボックスを実装する際によく使われそうな
Selectorに関連する情報です。

Selectorを使うと、表内にチェックボックス列を簡単に実装できます。
ただ、このSelectorのチェックボックスはRowsのisSelectedという
プロパティと連動しているそうで、チェックを付けるとその行を
「選択した」という扱いになります。

↑でわざと強調したのは、選択というフレーズが重要だからです。

SelectionChangedイベント

SelectionChangedは文字通り、「選択が変わったら」です。
要は選択しているセルが変更されたらこのイベントが走ります。

チェックボックスをクリックすると、アクティブセルは変わらないのに
行を選択したという扱いになって、SelectionChangedが走ってしまうのです。

なんか違和感ありますよね。

というわけで

SelectionChangedを実行しない方法

これをやりたいと思ってからほぼ丸一日デバッグし続けて
やっと答えに辿り着きました。。。
これで誰かを救えるなら。。。はい、本題書きます。

チェックボックスONでSelectionChangedが実行されるのはしかたない

矛盾しているようですが、これはもう諦めてください!
いろいろ試しましたが、挙動がおかしくなるだけで何も良いことがありません。

肝心なのは、SelectionChangedの中身が実行されなければ良いということ。

そう、SelectionChangedの先頭でキャンセルという技があります!

SelectionChangedイベントは動くけど、直ぐに処理を中断する

これがポイントです。

方法は簡単です。
チェックボックスによるイベント発火であれば、処理を中断する。
という条件を足せば良いのです。

theGrid.selectionChanged.addHandler(function (s, e) {
    if (checkboxによるイベント発火だったら) {
        // キャンセルプロパティをtrueにして返すと、このイベントをキャンセル
        return e.cancel = true;
    }
});

if文の条件式を日本語で書いたのは、ここにもポイントがあるからです!

isSelectedによる行選択は選択列が-1になる

通常、selectionChangedが発生した際に取得される選択列は0以上となります。
表の列定義が最初0から始まる為です。
なので、この選択列を見て「-1」だったら、セルを選択されたのではなく
行を選択されたのだと判断できる
わけです。

さっきのコードを完成させると以下のようになります。

theGrid.selectionChanged.addHandler(function (s, e) {
    if (e.col < 0) { // チェックボックスによるイベントだと -1 がくる
        // キャンセルプロパティをtrueにして返すと、このイベントをキャンセル
        return e.cancel = true;
    }
    ... 他の処理
});

時には諦めが肝心ということ

この解決策に辿り着くまで、Selectorのprototypeメソッドをオーバーライドしたり
試行錯誤を繰り返しました。。。
時にはゴリ押しするのではなく、ある程度流れに身を任せた上で
工夫をすることで体力を消耗しなくていいという。。。当然ですね!