Colvis doesn't work in with "collectionLayout: 'fixed'" in Editor 1.7.x?

daveslab

Hi folks,

I just upgraded to DT Editor 1.7.3 and I noticed that colvis doesn't work anymore for me. Here's my configuration for buttons:

{ extend: 'colvis',
  collectionLayout: 'fixed',
}

I figured out that it's because I don't include buttons in the DOM (dom: "frtip") and I trigger colvis via the .trigger() API. Does anymore have an easy solution to this problem? The only solution I've found is to include buttons in the DOM (dom: "Bfrtip") and then override the DTE css to hide them afterwards.

allan

I don't quite understand I'm afraid - if you weren't displaying them on the page before, how was the user triggering the collection buttons to be shown?

Allan

allan

Actually, I think you answered that already, sorry:

I trigger colvis via the .trigger() API.

Are you using the buttons option to create the buttons? Can you link to the page showing the issue please?

Thanks,
Allan

daveslab

Thanks for your response, Allan. Unfortunately, I cannot link to the project because it's an internal thing. Here was my config before:

tableDT = tableJQ.DataTable( { 
  dom: "frtip",
  // ...
  buttons: [
    { extend: "create", editor: editor },
    { extend: "edit",   editor: editor },
    { extend: "remove", 
      editor: editor,
      formTitle: "Supprimer correspondance",
      formMessage: "Êtes-vous sûr de vouloir supprimer cette correspondance ?" 
    },
    { extend: 'collection',
      buttons: [
        { extend: 'excel',
          exportOptions: {
            orthogonal: 'export',
          },
          filename: 'Correspondances',
          customize: function(xlsx) {
            console.log('export correspondances');
          }
        },
      ]
    },
    { extend: 'colvis',
      collectionLayout: 'fixed',
    }
  ]
} );

and now the only thing I had to change was

tableDT = tableJQ.DataTable( { 
  dom: "Bfrtip",
  //...

I think the reason for the problem is that now when the colvis button is triggered, the elements are inserted into the buttons div, but if the div isn't inserted into the DOM, it no longer works. Before it used to work because I think that the colvis elements were attached directly to the DOM. Like I said, the only way I found to get around this is to let the buttons div be inserted but then hide all it's content (**except **for colvis). I hope that makes sense.

daveslab

Sorry to insist, but do you have any ideas Allan? Am I on the right track with the whole DOM insertion idea?

allan

Apologies, I completely lost track of this one. I completely agree with your analysis - its cased by this commit. Rolling back to a version of Buttons before 1.5.0 should allow it to work.

That commit was in response to this issue about accessibility. I must admit I hadn't considered the case whereby the button might be activated when it isn't in the DOM.

While it would be easy to detect if the button is in the DOM or not, and thus charge the insert point, the reason I'm hesitating to just implement that is that the CSS and positioning wouldn't match.

That said, any positioning other than fixed just wouldn't make sense, so perhaps this is a valid change to make. I'll have a little think about it and see if I can think of any drawbacks. If not, I'll get it committed in.

Thanks for the follow up.

Allan

allan

Thought about it and I'll implement this! I'll post back when its done (probably Monday).

Allan

allan

Committed in here and it will be in the nightly shortly.

Planning to release a minor update to Buttons later this week which will carry this fix.

Allan