How can I Remove additional rows during editor delete process?

BROB201

I want to use the preRemove callback to remove one or more additional rows which are linked to the rows being removed using the datatable editor. If I remove the additional rows in the preRemove (or the ajax.success callback), the datatable or editor state is negatively impacted in some way, causing the datatable to remove a row that it isn't supposed to remove and leave one of the rows that it should have deleted.

var removeRowById = function (datatable, id) {
    console.log('deleting #' + id);
    datatable.row('#' + id).remove();
};

editor.on('preRemove', function (e, response) {
    $.each(response.data, function (index, crfkey) {
        console.log('deleted #' + crfkey);
        var rowData = datatable.row('#' + crfkey).data();
        if (rowData.labelkey === 2) {
            removeRowById(datatable, rowData.changed_fields.crfkey.original);
        }
    });
    datatable.draw();
});
}

consider a datatable with the following rows:
row1-old
row1-new
row2-old
row2-new
row3

1. select row1-new and row2-new
2. click delete
3. confirm delete in the editor modal
4. editor makes ajax call to server to delete the rows in the db
5. editor calls preRemove
6. I .remove() the row1-old and the row2-old rows then call datatable.draw()

result:
row1-new

Any thought on how to fix this? I was able to get it working with a single delete by using setTimeout() and delaying the remove by a second, but this doesn't work for multiple rows. This appears to be a re-indexing issue.

allan

Could you try it in postRemove please? I think you are right, it is an indexing issue - one which will be addressed in future when DataTables moves to a sparse array for its internal data store of rows.

Allan

BROB201

I did try using postRemove, but the issue there is that in order to find which additional rows to remove, I need to be able to reference the data of the row before it is removed from data(). I suppose I need to store the ids somewhere so that the postRemove can use them.

BROB201

That did the trick. I did something like this:

var removeRowById = function (datatable, id) {
    if ($.isArray(id)) {
        id.forEach(function (rowId) {
            datatable.row('#' + rowId).remove();
        });
        datatable.draw();
    } else {
        datatable.row('#' + id).remove().draw();
    }
};

//preRemove happens after the ajax call but before the row and data() is removed
var postRemoveIds = [];
editor.on('preRemove', function (e, response) {
    $.each(response.data, function (index, key) {
        var rowData = datatable.row('#' + key).data();
        if (rowData.labelkey === 2) {
            postRemoveIds.push(
                rowData.changed_fields.key.original
            );
        }
    });
});

editor.on('postRemove', function (e, response) {
    removeRowById(datatable, postRemoveIds);
    postRemoveIds = [];
});