Select2 and Inline Editing issues

tablo

Hi all,

I'm having issues with Select2 and Inline Editing working together.
I'm fetching the options for a field A from a field B with comma separated strings. When I click on "Edit" to edit the row, I can see the populated values from B in A, I can select on of these and even enter a new value.

Now with inline editing:
1. When I click directly on field A in DataTables, a drop down menu appears but not filled with the values from the same row but from another one, i.e. clicking a field does not activate the row. I have to do a mouse click on the first field (id) in order to activate the row I want to edit.
2. When I choose one of the values in the drop down menu and press Enter or leave the cell, nothing happens. It remains the same value as it was before.
3. When I enter a new value, the same.

I have already found similar questions:

https://datatables.net/forums/discussion/47482/inline-editing-not-submitting-on-pressing-enter-key

https://datatables.net/forums/discussion/48054/editor-inline-select2-type-and-fixedcolumn-are-not-compatible

https://datatables.net/forums/discussion/31180/select2-inline-editing-integration-issue

https://datatables.net/forums/discussion/46790/integration-problem-with-editor-and-select2-plugin

https://datatables.net/forums/discussion/39291/select2-with-inline-editing-and-multiple-selections-sends-update-even-if-there-are-none

https://datatables.net/forums/discussion/40374/problem-with-select2-and-inline-editing-possible-bug

https://datatables.net/forums/discussion/44476/inline-edit-for-select2-plugin-not-working

It these a canReturnSubmit function as well as an incompatibility between KeyTable and FixedColumns are being mentioned but I still can't figure out what is the solution.

This is my code:

editor.on('initCreate initEdit', function (e, node, data, items, type) {
    var rowData = table.row({selected: true}).data();
    if (rowData) {
        var rowDataB = rowData["obj"]["B"]
        if (rowDataB) {
            var rowDataArrB = rowDataB.split(",");
            editor
                .field("obj.A")
                .update(rowDataArrB)
                .val(data['obj.A']);
        }
    }
});

{
    label: "A:",
    name: "obj.A",
    type: "select2",
    //separator: ',',
    opts: {
        //multiple: true,
        allowClear: true,
        placeholder: "Select",
        tags: true
    }

},

Any ideas?

allan

My guess is that the issue is with this line:

var rowData = table.row({selected: true}).data();

Specifically when you use inline editing you typically don't have the row selected (I think those also relates to your comment about having to click the first column, which I guess you have setup as a checkbox for select?). Instead you need to get the row data a slightly different way.

The node parameter passed in is the td that was clicked on, so you could do:

var rowData = table.row(node.parentNode).data();

Allan

tablo

@allan : Thanks for the response!

which I guess you have setup as a checkbox for select?)

Hmmm. No, I had only the id from the DB. I've added the checkbox column now.

If I select now the row with the checkbox and change to this:

var rowData = table.row(node.parentNode).data();

then:

console.log("rowData1: ", rowData);

rowData outputs "undefined".

If I do the same with:

var rowData = table.row({selected: true}).data();

then it outputs the rowData correctly (like when I open the Editor Form).

If I change to this:

var rowData = table.row({selected: false}).data();

then I get the rowData correctly for whatever cell I click on.

In all cases inline editing works fine for the other cells but the problem with the Select2 cells still remains.

allan

I think I'm going to need a link to your page so I can see the details of what is happening, what software is installed and how it is configured please?

Thanks,
Allan

tablo

I think I'm going to need a link to your page so I can see the details of what is happening

It's not online. I could try to put it online, but I think it'll take some days (I've never done it before... ).

what software is installed and how it is configured please?

I'm not entirely sure what you mean.
I've copied a light version of my view.ejs and the js I'm using in vendor.js into a JS Bin I've created here (of course it doesn't work but there was not enough space here):

live.datatables.net/rokicanu/1/edit

Is this enough?

allan

what software is installed and how it is configured please?

I was meaning in terms of what DataTables extensions are loaded, what versions and how they are configured (likewise DataTables and Editor).

What you posted is useful - thank you. But I'm not seeing the problem from that I'm afraid. I'd need to be able to see the running page I think.

Thanks,
Allan

tablo

I was meaning in terms of what DataTables extensions are loaded, what versions and how they are configured (likewise DataTables and Editor).

The extensions I'm using are commented out in JS Bin. Here again:

and I'm using gulp to pack all js into vendor.js:

"./src/node_modules/jquery/dist/jquery.min.js",
"./src/node_modules/bootstrap/dist/js/bootstrap.min.js",
"./src/node_modules/datatables.net/js/jquery.dataTables.min.js",
"./src/node_modules/datatables.net-dt/js/dataTables.dataTables.min.js",

"./src/node_modules/datatables.net-editor/js/dataTables.editor.min.js",

"./src/node_modules/datatables.net-autofill-dt/js/autoFill.dataTables.min.js",
"./src/node_modules/datatables.net-autofill/js/dataTables.autoFill.min.js",
"./src/node_modules/datatables.net-buttons-dt/js/buttons.dataTables.min.js",
"./src/node_modules/datatables.net-buttons/js/buttons.colVis.min.js",
"./src/node_modules/datatables.net-buttons/js/buttons.flash.min.js",
"./src/node_modules/datatables.net-buttons/js/buttons.html5.min.js",
"./src/node_modules/datatables.net-buttons/js/buttons.print.min.js",
"./src/node_modules/datatables.net-buttons/js/dataTables.buttons.min.js",
"./src/node_modules/datatables.net-colreorder-dt/js/colReorder.dataTables.min.js",
"./src/node_modules/datatables.net-colreorder/js/dataTables.colReorder.min.js",
"./src/node_modules/datatables.net-fixedcolumns-dt/js/fixedColumns.dataTables.min.js",
"./src/node_modules/datatables.net-fixedcolumns/js/dataTables.fixedColumns.min.js",
"./src/node_modules/datatables.net-fixedheader-dt/js/fixedHeader.dataTables.min.js",
"./src/node_modules/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js",
"./src/node_modules/datatables.net-keytable-dt/js/keyTable.dataTables.min.js",
"./src/node_modules/datatables.net-keytable/js/dataTables.keyTable.min.js",
"./src/node_modules/datatables.net-responsive-dt/js/responsive.dataTables.min.js",
"./src/node_modules/datatables.net-responsive/js/dataTables.responsive.min.js",
"./src/node_modules/datatables.net-rowgroup-dt/js/rowGroup.dataTables.min.js",
"./src/node_modules/datatables.net-rowgroup/js/dataTables.rowGroup.min.js",
"./src/node_modules/datatables.net-rowreorder-dt/js/rowReorder.dataTables.min.js",
"./src/node_modules/datatables.net-rowreorder/js/dataTables.rowReorder.min.js",
"./src/node_modules/datatables.net-scroller-dt/js/scroller.dataTables.min.js",
"./src/node_modules/datatables.net-scroller/js/dataTables.scroller.min.js",
"./src/node_modules/datatables.net-select-dt/js/select.dataTables.min.js",
"./src/node_modules/datatables.net-select/js/dataTables.select.min.js",
"./src/node_modules/jszip/dist/jszip.min.js",
"./src/node_modules/pdfmake/build/pdfmake.min.js",
// Libraries for Editor
"./src/node_modules/select2/dist/js/select2.min.js",
// DatatablesEditor plugins
"./src/lib/datatables/editor.select2.js"

I'd need to be able to see the running page I think.

Then I'll try to put it online, probably in 1-2 weeks from now. In any case I'll let you know when it's ready. Thanks.