任意の行に新規データを追加するには、igDatasourceのinsertRowメソッドで追加し、そのあとigGridのdataBindメソッドで再バインドをしてください。
igGridUpdatingのrowAddingイベントを使用して実装していきます。
// 3行目に追加する場合のコード $("#grid1").igGrid({ ... autoCommit: true, features:[ { name: "Updating", enableAddRow: true, // 新規行が追加されようとしているときに発生するイベント // https://jp.igniteui.com/help/api/2022.1/ui.iggridupdating#events:rowAdding rowAdding: (evt, ui) => { // igDatasourceインスタンスを取得する。 // https://jp.igniteui.com/help/api/2022.1/ui.iggrid#options:dataSource const igDs = ui.owner.grid.dataSource; // 3行目に追加する。 // https://jp.igniteui.com/help/api/2022.1/ig.datasource#methods:insertRow igDs.insertRow(ui.values.ID, ui.values, 2, true); // バインドしなおす。 // https://jp.igniteui.com/help/api/2022.1/ui.iggrid#methods:dataBind ui.owner.grid.dataBind(); // 自前で追加したので、このイベント自体はキャンセルする。 return false; }, } ] });
サンプル
APIリファレンス
- rowAddingイベント
- dataSourceオプション
- insertRowメソッド
- dataBindメソッド
その他、似たような例はこちら
- 「igGridの選択中の行の下に行追加することは出来ますか?」
Pingback: igGridの選択中の行の下に行追加することは出来ますか? – INFRAGISTICS ナレッジベース