Buttons ColVis + ColReorder bug after v1.6.0+

jiveman520 · August 2021

* Sorry if this is coming up as a multiple/cross posting. Been having trouble getting a question to come through on the forum and even show up after submitting. Trying one more time.

When using Buttons's ColVis feature to display MULTIPLE sets of ColVis buttons, each targeting a set of columns using the columns: '.myClass' and columns: 'not:(.someOtherClass)', and then using ColReorder to drag columns, the ColVis popup shows mixed-up columns.

buttons: [
    {
      extend: 'colvis',
      text: 'Main Columns',
      columns: ':not(.noColVis):not(.extra)'
    },
    {
      extend: 'colvis',
      text: 'Extra Columns',
      columns: '.extra'
    }],

Correct/expected/ behavior:
https://jsfiddle.net/pwvmnsox/
1. Click the 1st ColVis button ("Main Columns"). The pop-up correctly lists: Name, Position, Salary.
2. Drag the Office column and place between Name and Position.
3. Click "Main Columns" ColVis button again and note that it still correctly lists only the: Name, Position, Salary. This is because Office column's class isn't being picked up by the Main Columns colvis columns selector. This is expected.

Incorrect/unexpected/ behavior:
https://jsfiddle.net/4uc3vzy9/
1. Click the 1st ColVis button ("Main Columns"). The pop-up correctly lists: Name, Position, Salary.
2. Drag the Office column and place between Name and Position columns.
3. Click "Main Columns" ColVis button again and note that it is now incorrectly lists: Name, Office, Position. This is wrong because the Office column's SHOULD NOT BE getting picked up by Main Columns colvis columns selector, but it's getting picked up anyways.

The absolute only difference between the two js fiddles above is that the first one references
cdn.datatables.net/buttons/1.5.6/js/buttons.colVis.min.js

and the second one references
cdn.datatables.net/buttons/1.6.0/js/buttons.colVis.min.js.

I also tried Buttons ColVis v1.7+ and got the same incorrect behavior. Also tried few specific versions 1.5.x and they all worked (but they have other known and since-fixed issues with Buttons ColVis + ColReorder that I found referenced on the forum, so I can't just downgrade).

Is there any way I can get the columns selector to keep identifying the correct columns after column reordering? Is this a bug or somehow intentionally changed behavior for versions 1.6.0+?

colin · August 2021

Sorry about the problem with the spam filter, your messages were getting caught incorrectly! Thanks for persevering. Something looks wonky there, we'll take a look and report back,

Colin

allan · August 2021

I've marked your account so it doesn't get moderated by the spam filter. Apologies for the incorrect detection before!

Regarding the issue you are seeing - there is most definitely an error there somewhere. I'll need to dig into this and get back to you.

Allan

allan · August 2021

Hi,

Just to say that I've committed the fix for this and it will be in the next release of Buttons which will most likely drop later this week.

Regards,
Allan

jiveman520 · August 2021

Thanks @allan and @colin for the prompt responses! Great to hear that this fix will be in the next release!

In the meantime, I went ahead and downloaded the latest code from GitHub for datatable.buttons.js and buttons.colvis.js, but started getting various errors after I try and reorder columns on the same grid that previously worked ("Maximum call stack size exceeded"). But that could be due to other reasons. We are still on jQuery 1.10.0 and DataTables 1.10.19, so maybe something else is incompatible between the various versions.

At any rate, I'll keep an eye out for that new release, and I'll see what happens then.

colin · August 2021

Yep, good plan, or you could try the nightly releases here which will also contain the fix. If you do still see the problem, please could you create a test case to demonstrate the issue. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

allan · August 2021

Yes, a link to your setup would be really interesting. I’m wondering if you might have a collection inside a collection perhaps?

Allan

allan · August 2021

Colin was checking my fix and spotted an error. I've just committed an update which will address it (it was addressing button index 0 only).

Allan

jiveman520 · August 2021

Great, thanks for the updates!

I just tried the latest nightly CDN links for just the colvis and main buttons js, keeping all other datatables js/css resources in my project as is, and it worked, and without any of those errors I mentioned previously regarding "maximum call stack size...", so I'm not sure what that was about. Likely some error on my end.

So far so good! I will plan on using the new release once gets published.

Question about versions, though. Am I ok mixing in the latest Buttons and Colvis resources with older main Datatables resources (v 1.10.19)? It seemingly worked fine, like I said, but I was wondering whether that's ok in principle.

Thanks again!

colin · August 2021

Generally that's OK, but if possible it would be worth upgrading all the components to the latest. We do our best to ensure backward compatibility, so it's unlikely that there would be a problem (particularly as your versions are all fairly recent anyway!),

Colin

eedgington · August 2021

I tried the latest build with bootstrap 4 and after moving a column the drop-down column list appears to be switching to bootstrap buttons from dt- buttons, causing the list to lose its correct styling. In fact, it's a mess! Previously, these drop-downs didn't use bootstrap styling for the drop-down.

colin · August 2021

@eedgington We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

eedgington · August 2021

@colin No worries. I'll just wait for the release. If the issue persists, I'll do so.

jiveman520 · September 2021

Hello again,

We are finally getting around to installing the latest released datatables and ensuring things still work and look good (we have many tables in our system).

But related to colReorder, I am seeing another issue. Please let me know if I should open a separate bug for this.

One of the custom things we do to our colVis buttons is to add a "Select all" and "Deselect all" buttons via the prefixButtons way:

{
      extend: 'colvis',
      text: 'Columns',
      prefixButtons: [
        {
          extend: 'colvisGroup',
          text: 'Select all',
          show: ':hidden'
        },
        {
          extend: 'colvisGroup',
          text: 'Hide all',
          hide: ':visible'
        }
      ]
}

When you drag a column to reorder them (any column), it gets rid of the prefix buttons.

https://jsfiddle.net/4uc3vzy9/
1. Click on a colvis button, note that it has select and deselect "prefix" buttons
2. Drag a column to reorder it left or right
3. Repeat step 1 above and note that the prefix buttons are now gone

Like I said, please let me know if I should open another bug for this. I felt like maybe it's related to the bug fix discussed on this thread previously, but happy to start another one if preferred.

colin · September 2021

Thanks for the test case. That problem has actually been resolved in the most recent release - see your example here updated to use the latest&greatest. Could you look at that, please, and see if it helps.

Cheers,

Colin

jiveman520 · September 2021

@colin, it still appears to be a problem even with the latest nightly build.

I actually gave a wrong JSFiddle link in my previous message. Didn't realize I didn't save the fiddle, ugh. This version correctly demonstrates the problem. Also, a modified version of your example with nightly builds, as well.

I didn't have the prefix buttons there before. That's where the problem occurs. The prefix buttons disappear after reordering/dragging a column.

colin · September 2021

Sorry, I totally misread your first message, I entirely got the wrong end of the stick - I thought you were referring to different columns in the collection, not the prefix.

But yep, I'm seeing that problem too. I've raised it internally (DD-2192 for my reference) and we'll report back here when there's an update.

Cheers,

Colin

dec_a_dance · December 2021

@colin, are there any news about this problem?

Buttons ColVis + ColReorder bug after v1.6.0+

Buttons ColVis + ColReorder bug after v1.6.0+

Answers

Howdy, Stranger!

Categories

DataTables

Buttons ColVis + ColReorder bug after v1.6.0+

Buttons ColVis + ColReorder bug after v1.6.0+

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables