Simple join, inline edit mode, submitting via edit() call submits the full table data.

timothy.ctr.searcy@faa.gov

https://datatables.net/examples/editor/inline-editing/join.html

I have been following this example. I coded my scenario such that the data structure is exactly like given in this example.
1. The data sourced from the AJAX to populate the table is the same
2. The data received after the edit or create call is exactly the same

With that, I am able to create and edit rows in inline mode, except for a column where I have another dropdown where I am performing some edit functions like in the example here: https://datatables.net/examples/editor/triggering-editing/inTableDropdown.html

I have a situation where I am wanting to use the edit() API when any cell of a particular column is clicked. The code for this looks like

contactsGridDt.on('click', 'button[value="N"]', function (e) {
        var rowData = contactsGridDt.row(e.target.closest('tr')).data();
        console.table(rowData);
        contactsEditor.edit(contactsGridDt.row(e.target.closest('tr')).data(), false)
            .set('contacts.active', 'N')
            .set('contacts.contactId', rowData.contacts.contactId)
            .submit();
    });

The console.table() statement in above snippet prints data for only that one row that was clicked on. However, just prior to the submit, in the AJAX data callback function (where I process data to be submitted), I am finding that the data object contains ALL the rows of the Datatable. I don't have anyway of know which row was just clicked on. Here is the snippet:

contactsEditor = new DataTable.Editor({
        ajax: {
            url: "/idms2/grid/system/updateSystemContact",
            type: "POST",
            data: function(data){
                console.table(data);
                //more processing goes on after this. 

The console.table() here prints data from all the rows. There is no way I can know which row was just edited!! The row selector in edit() seems to be working as it prints only the row that was clicked on. I don't understand why the full DT data is being submitted.

I understand you expect a live example. But its quite difficult to reproduce the same scenario, with server-side calls and all. We are behind a very strict firewall. I can tell that I have nothing going on after the edit() and prior to submit. I don't have any 'preSubmit' callback. After edit().submit(), I just need to do some data processing in the AJAX data callback.

With this much, can you see any reason why the data for ALL rows is being submitted?

allan

I think this is the part that is wrong:

contactsEditor.edit(contactsGridDt.row(e.target.closest('tr')).data(), false)

Specifically, the first parameter you are passing into the edit() method is a row's data object is the issue. That isn't what edit() expects (although thinking about it, I can see that it could be useful allowing that as an option). The value passed in to that parameter is used as a selector against the DataTable. In this case as it isn't an expected value, the results are undefined - and it appears that is resulting in all rows being selected.

What you want to do instead is just pass in the tr and let DataTables resolve it - e.g.:

        contactsEditor.edit(e.target.closest('tr'), false)
            .set('contacts.active', 'N')
            .set('contacts.contactId', rowData.contacts.contactId)
            .submit();

A tr is an expected DataTable.RowSelector, and it will pick out just that row to be operated on.

Allan