[Wijmo]行追加イベントの落とし穴

Wijmo

FlexGridではCollectionViewというプロパティで行データの管理をしてます
このCollectionViewに対して、行を追加する場合 addNew というメソッドが使えます

また、FlexGridでは「行が追加された」というイベントを
拾うことができるようになっています

行が追加された際に、新規行のあるカラムを事前に編集したい時等に便利です

※newItemCreatorを使うという手もありますが。。

今回の記事は、この行追加イベントが発生しないケースがあるという点を書いていきます

前提条件

Wijmo ・・・ version 5.20212.812

行の追加にも種類がある

FlexGridは行が追加された際に、rowAddedイベントが発生しますhttps://demo.grapecity.com/wijmo/api/classes/wijmo_grid.flexgrid.html#rowadded

”行が追加された”という表現がミソです

”行を追加した”ではないのです

冒頭で紹介したCollectionViewのaddNewは ”行を追加する” という感じで
能動的に捉えられるのか、このrowAddedは発動しません

では、”行が追加された”はどのような場合になるのか

行が追加された(rowAdded)イベントの発生条件

FlexGridのプロパティに allowAddNew というものがあります
https://demo.grapecity.com/wijmo/api/classes/wijmo_grid.flexgrid.html#allowaddnew

このプロパティをtrueに設定しておくと、グリッドの最終行に空行が自動的に作られ
その空行に入力等のアクションを与えてあげることで新規行が追加されます

はい、出てきました ”追加される” です

プログラムが能動的に行を作成する場合は、rowAddedが発動せず
ユーザのオペレーションによって行が追加された場合にrowAddedが発動するという具合です

余談

newItemCreator
https://demo.grapecity.com/wijmo/api/classes/wijmo.collectionview.html#newitemcreator
を使う場合

/* addNewによる行追加 */
Grid.CollectionView.addNew
の後に
Grid.CollectionView.newItemCreator
が動く
/* ユーザオペレーションによる行追加 */
Grid.CollectionView.newItemCreator
が動いた後に
Grid.rowAdded.addHandler
が動く

という動きになります

どちらもnewItemCreatorは動きますが、
newItemCreatorの中でajax通信を伴う処理を埋め込むと
新規行がPromiseオブジェクトになるので注意が必要です
(私はそこに躓きました)

  • addNewを呼び出す直前でajax処理を実行し、newItemCreatorで反映する
  • rowAddedの中でajax処理を実行し、追加済みの新規行に反映する

上記2つの要領で対処しました