Event for column Dropped After Reordering?

Event for column Dropped After Reordering?

Jason B JonesJason B Jones Posts: 13Questions: 3Answers: 1

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

Answers

  • rf1234rf1234 Posts: 3,006Questions: 87Answers: 421

    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.

  • kthorngrenkthorngren Posts: 21,391Questions: 26Answers: 4,961
    edited November 27

    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

Sign In or Register to comment.