FlexGridではCollectionViewというプロパティで行データの管理をしてます
このCollectionViewに対して、行を追加する場合 addNew というメソッドが使えます
また、FlexGridでは「行が追加された」というイベントを
拾うことができるようになっています
行が追加された際に、新規行のあるカラムを事前に編集したい時等に便利です
※newItemCreatorを使うという手もあります
今回の記事は、この行追加イベントが発生しないケースがあるという点を書いていきます
前提条件
行の追加にも種類がある
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つの要領で対処しました