選択されている行の下に新規データを追加するには、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リファレンス

 

その他、似たような例はこちら

 

Tagged:

製品について

Ignite UI for jQuery