I have an igx grid something like this
I want to reduce the column header size. I wanted to replace the 3 dots which open the filter and sorting menu.
Instead I want the filter and sorting menu to open when I click on the header itself. Also if possible I want to change the cursor to pointer while doing that.My Ignite version is 11.0.9
Hello,
Thank you for posting on our forums,
All columns have width property, so if you would like to set it specifically, you can use this property. If all you are looking to do is to hide the icon for Excel Style Filtering, you template the button and not assign an icon for it, effectively hiding it.
Regarding sorting indicators, you can do that by overwriting the css class:
Thanks, Tihomir,The above-mentioned solution is awesome.I am facing one little problem with it though.
I want to close the filter component if clicked on Apply or Close.When I click on Apply and Cancel button on the IgxGridExcelStyleFilterComponent it doesn't communicate with the IgxToggle created, so the filter remains open until the user clicks outside of the filter.It's pretty bad UX-wise.I was wondering if we can use the existing overlay service of IgxGridExcelStyleFilterComponent.If not I would like to listen to events of Apply and Cancel and close the IgxToggle manually.
As per my previous comment, there are no events that would help handle the situation, so the best approach would be adding event listener to the toggle list from the conditional styling as well. Something like:
Sincerely,Tihomir TonevAssociate Software DeveloperInfragistics
your example didnt have the component
addEventListener would be the way to go, since there are not exposed any other related events to the excelStyleFiltering.
Regarding the conditional filter, this is not popping in the app that I have sent. Can you please let me know of the changes you have made that make it pop.
Looking forward to your reply.
Sincerely,
Tihomir TonevAssociate Software DeveloperInfragistics
Yes Tihomir, it does close when I click apply.However, it doesn't respond when I click Cancel.I found a workaround using addEventListener, if you have an Angular way to do it that would be helpful.And I found another issue with the above implementation.The Conditional filters open behind the Excel filter.
It would help if I can catch when the Conditional filter is clicked so that I can close the ExcelFilter.Sincerely Thanks for your help.
Yes Tihomir, it does close when I click Apply.I saw the filteringDone function, It works when I click on Apply.Although I wanted to close the filter when clicked on the Cancel button (since the excel filter closes normally on Cancel).I found a workaround for that using addEventListener, if you have another solution that solves it using Angular ways please let me know.And I have faced another issue with IgxExcelStyleConditionalFilter inside the excel filter.The Conditional filter opens behind the ExcelFilter.