Event for column Dropped After Reordering?

Jason B Jones

I need a function to run exactly one time for every column reordering, only after it has been dropped. Both the column-reorder and columns-reordered events seem to fire while dragging. Looks like this was previously achieved with the depreciated realtime option. Was this replaced with another solution to this problem?

Alternatively, I could use the details.drop flag in conjunction with those events but I have not observed the value of this to ever be defined in my testing

rf1234

sometimes a "setTimeout" helps in these situations. I've had to deal with too many server calls on certain events. I resolved this by setting and checking global variables before and after the server calls.

kthorngren

One option is to create your own event but this requires modifying colreorder.js. Look for the function ColReorder.prototype._mouseUp and add these lines:

        // Trigger column dropped event handler
        var order = this.dt.colReorder.order();
        this.dt.trigger('columns-reordered-dropped', [
          {
              order: order,
              mapping: invertKeyValues(order)
          }
        ]);

Full example:

    ColReorder.prototype._mouseUp = function (e) {
        $(document).off('.colReorder');
        $(document.body).removeClass('dtcr-dragging');
        if (this.dom.drag) {
            this.dom.drag.remove();
            this.dom.drag = null;
        }
        if (this.s.scrollInterval) {
            clearInterval(this.s.scrollInterval);
        }
        this.dt.cells('.dtcr-moving').nodes().to$().removeClass('dtcr-moving dtcr-moving-first dtcr-moving-last');
      
        // Trigger column dropped event handler
        var order = this.dt.colReorder.order();
        this.dt.trigger('columns-reordered-dropped', [
          {
              order: order,
              mapping: invertKeyValues(order)
          }
        ]);
    };

Then add this event handler to your page:

table.on('columns-reordered-dropped', function (e, details) {
    console.log('columns-reordered-dropped', details);
});

Here is a test case:
https://live.datatables.net/zigoviyi/1/edit

At the top of the JavaScript tab is colreorder.js with the above modification. It has the column-reorder and columns-reordered events plus the newly created columns-reordered-dropped event. It does seem useful to have an event like this.

Maybe @allan can add this or possibly you can create a PR to make the changes you are interested in.

Kevin

Jason B Jones

Went ahead and put in a PR with these changes. Thanks for the guidance.