New colResize Option Is Awesome! But Requires Care When Using With colReorder about datatables.colresize

[dhobi]

A possible solution would be to temporarily disable the colReorder plugin while the resize is in progress.
You can do this in the available resize start / end hooks. Something like:

var table = $('#example').DataTable({
  colResize: {
    ...
    onResizeStart: function() { table.colReorder.enable(false); }
    onResizeEnd: function() { table.colReorder.enable(true); }
    ...
  }
});

[akeni]

Another note,

the ColResize library must be initialized before ColReorder, or else the event listener will call ColReorder first, thus the flag set does not work

[zhihuishi-rain]

I ran into the same problem,can someone please give me a solution for this?

[porrey]

Even after disabling column reorder, the column size resets after moving any column.

[chbocca]

@porrey. I just ran in demo above and did not find that to be case. Column size stayed as adjusted after performing column reorder.

[chbocca]

@dhobi. A belated thank you!

[porrey]

Is state saving on or off?

[chbocca]

On, I believe. You can see the code just by right click / view source.

[porrey]

The issue occurs when a column width is set in columns[] or columnDefs[] during table initialization (width: 100px; for example). I am initializing the width of my columns.

This video demonstrates the behavoir: https://youtu.be/KOK81An73_0

[chbocca]

ouch. that one will have to be for @dhobi. c

[chbocca]

one thought. you might try setting column widths in style sheet instead of dt.

[dhobi]

@porrey Do you have a minimal example to reproduce the issue?

As the plugin sets the column.width property and the dom (th).outerWidth() I have to see what exactly is going on. Is the table reinitialized on column drag?

[porrey]

Started working on extracting the example that mimics my actual application (it uses server side processing). I am unable to get the column resizing to work but here is the link. Work in progress...

http://live.datatables.net/porrey/4/edit

[Talkabout]

For those facing this problem:

In order to make sure that colResize is registered before colReorder we have to tweak the event logic slightly. Here is the part I added:

    // We need to make sure that colResize plugin is registered before colReorder plugin in preInit to be able
    // to prevent reorder being triggered when actually resize is expected.
    const oEvents = $._data(document, 'events');
    const iReorderIndex = oEvents.preInit.findIndex((oEvent) => oEvent.namespace == 'colReorder.dt');

    if (iReorderIndex > -1) {
      const iResizeIndex = oEvents.preInit.findIndex((oEvent) => oEvent.namespace == 'colResize.dt');

      if (iResizeIndex > -1 && iResizeIndex > iReorderIndex) {
        const aEvents = oEvents.preInit.splice(iResizeIndex, 1);
        oEvents.preInit.splice(iReorderIndex, 0, aEvents[0]);
      }
    }

It was added after the "preInit" event handler:

With this change I am able to disable "reorder" plugin in "onResizeStart" and enable it again in "onResizeEnd":

      colResize: {
        isEnabled: true,
        saveState: false,
        isResizable: (iColumn) => {
          return true;
        },
        onResizeStart: function() { $oTable.colReorder.disable(); },
        onResizeEnd: function() { $oTable.table().colReorder.enable(); }
      }

Dealing with the event queue of jquery is not the nicest solution but it works. Currently I don't see any other solution as the reorder plugin does not provide any functionality that would help.