Hello Vijay,

I have been looking into your question and currently the igx-grid-toolbar-hiding component does not offer events for ‘Hide All’ and ‘Show All’ buttons. For now, there are events for the ‘Hide’ button itself in the grid toolbar whether it is opened or closed, as well as for selecting the columns individually with the checkboxes whether to be hidden or visible with the columnToggle event.

This is why click events and other events according to your requirements and custom logic for ‘Hide All’ and ‘Show All’ buttons have been determined to be a feature request. You can submit a feature request in our GitHub repository here.

• Enter a title.
• Provide all the required information and if needed any additional.
• You don’t have to assign anybody.
• Click on the green Submit button.

Remember when submitting your idea to explain the context in which a feature would be used and why it is needed as well as anything that would prevent you from accomplishing this today. You can even add screenshots to build a stronger case.

However, at this point your requirements can be achieved entirely with JavaScript. For this purpose, you will handle the ngAfterViewInit lifecycle hook and when the grid is loaded and rendered you can access the hide button with the getElementsByClassName method by passing the igx-button--outlined class to the button.

let hideButton = document.getElementsByClassName('igx-button--outlined');

You can then add a click event listener to the given button with the addEventListener method and execute a given function or custom logic when that button is clicked.

hideButton[0].addEventListener('click', function () { });

What will be done after clicking, that is, after opening the drop-down for hiding or visualizing columns, is to take the two buttons ‘Hide All’ and ‘Show All’ inside the drop-down menu. Again, in the same way, we can access the buttons with the getElementsByClassName method by passing igx-button--flat the button class. The first button will be ‘hide all’ and the second button will be ‘show all’.

let hideShowAllButtons = document.getElementsByClassName('igx-button igx-button--flat');

let hideAll = hideShowAllButtons[0];
let showAll = hideShowAllButtons[1];

After that, a click listener will be added to both buttons so that when they are clicked, you can execute your custom logic according to the given event.

hideAll.addEventListener('click', function () { //custom logic here  });

showAll.addEventListener('click', function () { //custom logic here });

The described scenario could be observed here:

In addition, I have prepared small sample illustrating this behavior which could be found here. Please test it on your side and let me know how it behaves.

Regarding your other question about overriding buttons you can override the styles and appearance of the buttons such as their texts for the given button with the checkAllText and uncheckAllText properties or style them to your preference by selecting them and setting custom forces. More information about styling Column Hiding UI can be found in this topic in our Angular documentation.

If you require any further assistance on the matter, please let me know.

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics

<igx-grid-toolbar-hiding (checkAll)="checkAll($event)" (uncheckAll)="uncheckAll($event)"></igx-grid-toolbar-hiding>

var _this = this;

hideAll.addEventListener('click', function () {
           _this.checkAll();
         });

showAll.addEventListener('click', function () {
           _this.uncheckAll();
         });

In addition, I have modified my previous sample illustrating this behavior which could be found here. Please test it on your side and let me know how it behaves.

Thank you for your cooperation.

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics