Disable editing on all rows except one

Pierre-Louis

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

Hi, I have an issue disabling editing on rows.
Based on this discussions: https://www.datatables.net/forums/discussion/66810/how-to-edit-all-rows-except-one, i came up with this
My code looks like this:

semainierTableEditor.on('edit', function (e, node, data, items) {
        console.log("e", e, "node", node, "data", data, "items", items)


        //semainierTableEditor.disable();
        let indexes = semainierTable.rows().indexes();
        //let rowIdx = semainierTable.rows({ selected: false }).indexes();
        let pos = indexes.indexOf(selectedRowIndex);

        indexes.splice(pos, 1);
        console.log("indexes", indexes, "rowidx", selectedRowIndex, "pos", pos, "rowidx", rowIdx);
        semainierTableEditor.edit(indexes, false);
        console.log("indexes", indexes);
        
    });

When the user edit a row, i'm supposed to make all other rows on read.
The first problem i've encountered was retrieving the index of the selected row.
While this wasn't working:
//let rowIdx = semainierTable.rows({ selected: false }).indexes(); and always returning me the indexes without the 0 (and always the 0),
i went for a global variable:

 $('#semainierTable tbody').on('click', 'tr', function () {
        var row = semainierTable.row($(this));
        console.log("selected row", row.data(), "index", row.index())
        selectedRowIndex = row.index();

This way, i could retrieve the correct index of the selected row.
The thing is that this line of code doesn't disable the other rows:

semainierTableEditor.edit(indexes, false);

What am i doing wrong ?
Regards

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

Hi,

I'm not actually quite clear on what the goal is here. edit happens after the row has been submitted for editing. So based on that it sounds like any row would be editable and then once the user has picked one, none of the others should be editable? Is that correct? Or do you have some other logic in mind for how to select which row should be editable?

Allan

Pierre-Louis

Yes exactly, every row is editable until one is edited. Then none is editable until the users saves the changes made.

allan

I'd probably do something like:

var mustSave = false;

$('#semainierTable tbody').on('click', 'tr', function () {
  if (mustSave) {
    return;
  }

  editor.edit(this); // ...
});

editor.on('submitComplete', function () {
  mustSave = false;
});

Allan

Pierre-Louis

Is there a way to do an inline editing instead of the editor.edit(this) ?
And also the popup is blank
Not sure if it's an initialization problem ?
`semainierTable = $('#semainierTable').DataTable({
paging: false,
ordering: false,
scrollY: '60vh',
scrollCollapse: true,
info: false,
autoWidth: false,
order: [[14, "asc"]],
columnDefs: [
{
targets: [10, 11, 12, 13, 14, 15, 16, 17,
18, 19, 20, 21, 22, 23, 24, 25, 26, 27,
28, 29, 30, 31, 32, 33, 34, 35, 36, 37,
38, 39, 40, 41, 42, 43, 44, 45, 46],
visible: false,
searchable: false
},
{
targets: 0,
width: "1%",
},
{
targets: 1,
width: "35%",
},
{
targets: 2,
width: "2%",
},
{
targets: 3,
width: "5%",
},
{
targets: 4,
width: "5%",
editField: "QteProd",
data: "QteProd",
name: "QteProd"
},
{
targets: 5,
width: "2%",
},
{
targets: 6,
width: "5%",
editField: "QteConfirme",
data: "QteConfirme",
name: "QteConfirme"
},
{
targets: 7,
width: "5%",
},
{
targets: 8,
width: "3%",
},
{
targets: 9,
width: "8%",
},
{
targets: 15,
name: "IdAn",
data: "IdAn"
}
],
"initComplete": function (settings, json) {
//$("#semainier").DataTable().rows().every(function (rowIdx, tableLoop, rowLoop, data) {
// console.log(this.data().designationMarquage);
// var tr = $(this.node());
// this.child(format(this.data())).show();
// tr.addClass('shown');
//});
}
});

var semainierTableEditor = new $.fn.dataTable.Editor({
    table: "#semainierTable",
    idSrc: "IdAn",
    data: semainierTable.data(),
    fields: [
        {
            "data": "QteProd",
            "name": "QteProd"
        },
        {
            "data": "QteConfirme",
            "name": "QteConfirme"
        }
    ]
})`

Regards

allan

Sure - rather than calling edit() call inline(). See the full list of inline editing examples here.

Allan

Pierre-Louis

Great, thank you Allan