選択されている行の下に新規データを追加するには、igGridSelectionのselectedRowで選択されている行を取得し、igDatasourceのinsertRowメソッドでその下に追加し、そのあとigGridのdataBindメソッドで再バインドをしてください。
igGridUpdatingのrowAddingイベントを使用して実装していきます。
$("#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;
// 選択されている行を取得する。
// https://jp.igniteui.com/help/api/2022.1/ui.iggridselection#methods:selectedRow
const row = $(ui.owner.grid.element).igGridSelection("selectedRow");
// 選択されている行がある場合
if(row !== null){
// 選択されている行の下に行を追加する。
// https://jp.igniteui.com/help/api/2022.1/ig.datasource#methods:insertRow
igDs.insertRow(ui.values.ID, ui.values, row.index + 1, true);
// バインドしなおす。
// https://jp.igniteui.com/help/api/2022.1/ui.iggrid#methods:dataBind
ui.owner.grid.dataBind();
// 自前で追加したので、このイベント自体はキャンセルする。
return false;
}
},
},
{
name: "Selection",
mode:"row",
multipleSelection: false,
},
...
]
});
サンプル
APIリファレンス
- rowAddingイベント
- dataSourceオプション
- selectedRowメソッド
- insertRowメソッド
- dataBindメソッド
その他、似たような例はこちら
- 「igGridの任意の行に行追加することは出来ますか?」
Pingback: igGridの任意の行に行追加することは出来ますか? – INFRAGISTICS ナレッジベース