Add 'close' button to dt-button-collection dropdown-menu

darrenm

We're using some of the built-in buttons and also a couple of custom buttons. The client has announced that they would like us to add a 'close' button to the top right corner of the drop down menu that is displayed when you click the colvis button for example. Is there any way we can add some markup and attach an event to it so that when the user clicks it, the menu will be hidden again? I can't find the drop down menus in the DOM, so it's quite possible they don't exist there until wanted - I haven't gone digging into how they are implemented. I was looking for some way of using JS and/or CSS to add such a button to all drop downs at table initialisation time. Is that possible?

colin

Hi @darrenm ,

The ColVis button is in the DOM when you click on it - it has the class dt-button-collection,

Cheers,

Colin

darrenm

Thanks Colin. Yeah I can see it there when the button is clicked, but I can't work out how to target it before it is displayed so that I can drop in the 'close' button. I tried adding it at table initialisation but couldn't find a JQuery selector that worked before the button has been clicked.

However I think I can use the 'buttons-action' event to append some HTML to the drop down when the button is first clicked.