I can't get 'row-reorder' to fire.
I can't get 'row-reorder' to fire.
mf00001
Posts: 2Questions: 1Answers: 0
I have a function that I call to create and populate grid.
I can select and drag a row; however, the 'row-reorder' event never fires.
function LoadQuestions(ds) {
console.log(JSON.stringify(ds));
tbl = $('#tblQuestions').dataTable({
rowReorder: true,
"dom": 'lrtip', // 'f' (filter) is omitted
data: ds,
destroy: true,
info: false,
ordering: false,
paging: false,
columns: [
{
title: "Action",
data: null,
render: function (data, type, row) {
return '<button type="button" title="Move this question Down in the display order" class="btnDown" data-row-id="' + data.Question + '" data-dispOrder-id="' + data.col_displayOrder + ' data - displayOrderPrev="' + data.displayOrderPrev + '" data-displayOrderNext="' + data.displayOrderNext + '" data - col_idPrev="' + data.col_idPrev + '" data-col_idNext="' + data.col_idNext + '">↓</button>' +
'<button type="button" title="Move this question Up in the display order" class="btnUp" data-row-id="' + data.Question + '" data-dispOrder-id="' + data.col_displayOrder + '" data - displayOrderPrev="' + data.displayOrderPrev + '" data - displayOrderNext="' + data.displayOrderNext + '" data - col_idPrev="' + data.col_idPrev + '" data - col_idNext="' + data.col_idNext + '" >↑</button>';
}
},
{ title: "ID", data: "Question" },
{ title: "Active", data: "col_active" },
{ title: "Question", data: "col_question_desc" },
{ title: "Order", data: "col_displayOrder" }
]
});
tbl.on('row-reorder', function (e, diff, edit) {
alert('asdasd');
let result = 'Reorder started on row: ' + edit.triggerRow.data()[1] + '<br>';
for (var i = 0, ien = diff.length; i < ien; i++) {
let rowData = table.row(diff[i].node).data();
result +=
`${rowData[1]} updated to be in position ${diff[i].newData} ` +
`(was ${diff[i].oldData})<br>`;
}
document.querySelector('#result').innerHTML = 'Event result:<br>' + result;
});
}
Answers
You have this to init Datatables:
Try changing to this:
Note the upper case
Din Datatable. This will return an API instance for thetblvariable. What you have returns a jQuery object which I don't believe will work. See the Accessing the API docs for more details.Kevin
Nope, tbl = $('#tblQuestions').dataTable works just fine.
It turns out I needed to attach the handler with
tbl.on('row-reorder.dt', function (e, diff, edit) {
and not
tbl.on('row-reorder', function (e, diff, edit) {
Yes, if you are using
$().dataTable()it returns a jQuery instance, and you need to add the.dtnamespace to events. If you use$().DataTable()then theon()method will add it for you automatically.Either way, good to hear you have it working now.
Allan