Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
35
Replace 3 dots on igx column
posted

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

Parents
No Data
Reply
  • 1500
    Verified Answer
    Offline posted

    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:

      .sort-icon{
        displaynone;
      }
    Same for the cursor
      .igx-grid-th__title {
        cursorpointer;
      }
    Regarding click opening ExcelStyleFiltering, you can re-template each header you would like to have filtering enabled, catch the mouse event and then host the filter dialog in a container, since grid currently does not have method to open the filter programatically out of the box. I have created a sample using igxToggle, but you can host it in any other container fitting your needs:
    If you have any further questions or concerns, please let me know..
    Sincerely,
    Tihomir Tonev
    Associate Software Developer
    Infragistics
Children