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

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

daveslabdaveslab Posts: 40Questions: 14Answers: 0

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.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,523Questions: 1Answers: 10,473 Site admin

    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

  • allanallan Posts: 63,523Questions: 1Answers: 10,473 Site admin

    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

  • daveslabdaveslab Posts: 40Questions: 14Answers: 0

    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.

  • daveslabdaveslab Posts: 40Questions: 14Answers: 0

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

  • allanallan Posts: 63,523Questions: 1Answers: 10,473 Site admin

    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

  • allanallan Posts: 63,523Questions: 1Answers: 10,473 Site admin

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

    Allan

  • allanallan Posts: 63,523Questions: 1Answers: 10,473 Site admin
    Answer ✓

    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

This discussion has been closed.