Hi, I'm looking for a workaround on how to customize the hiding/pinning buttons on the igx grid toolbar like changing/removing the icon and adding texts inside. I can't seem to find any solution from the documentation.
Or is there a way to make a normal button trigger the IgxGridToolbarPinningComponent and IgxGridToolbarHidingComponent so that I could use any button designs the way I want.
Current version using: 14.0.12
I want to change this
into this
Thanks in advance
Hi Riva,
Thank you for responding. Your solution is working.
However I just used the custom toolbar and a custom button that triggers igx dropdown. Also your additional info on IgxOverlay came in handy.
Thank you
Hello Justin,
Thank you for posting into our community!
I have been looking into your question and an approach I could suggest is hiding the span element that contains the number of hidden columns via css, e.g.
button[name="btnColumnHiding"] span:first-of-type { display: none; }
and using the buttonText property to add a custom text inside the button. Additionally, this should be done inside the handler for the columnVisibilityChanged event of the IgxGrid component in order to change the number of hidden columns when hiding/showing columns.
Here could be found a small sample demonstrating my suggestion.
Additionally, regarding defining a custom button that toggles these functionalities, I believe that you will find our Column Hiding UI section here quite helpful on this matter as it demonstrates how the column hiding UI could be put anywhere on the page. Also, our Toolbar Custom Content section here demonstrates how a custom button could be included and in order to achieve your requirement, you should handle the click event of that button and use the IgxToggle and IgxOverlay directives to display the content in the proper position. More information could be found in our Toggle Directive topic here.
Please test these approaches on your side and let me know if you need any further assistance regarding this matter.
Looking forward to your reply.
Sincerely, Riva Ivanova Associate Software Developer