add custom icon with tooltip on header of column when filter is applied

Posted by: riya.katawate16 on 24 July 2022, 9:11 pm EST

  • Posted 24 July 2022, 9:11 pm EST

    Hi Team,

    I want to add custom icon which will show tooltip on hover to the header of column when filter is applied to that column. So that user will distinguish between the filter applied column and other columns.

    Thanks in advance.
  • Replied 25 July 2022, 5:27 pm EST

    Hello,

    You may use the formatItemevent of the FlexGrid and add your custom icon to the ColumnHeader cells. As per our understanding, you want to customize the icon when the filter is applied for that specific column, if so then you can add a class to the custom icon and apply the CSS and tooltip accordingly.

    To show the tooltip when hovering over the custom icons you may handle the mouseover event on FlexGrid's hostElement and check if the filter is applied for that column or not and update the tooltip content accordingly.

    Please refer to this sample link demonstrating the same: https://stackblitz.com/edit/angular-ax5bt8?file=src%2Fapp%2Fapp.component.ts

    Regards
  • Replied 25 July 2022, 11:38 pm EST

    hey thanks for your Reply.

    What if i want to add custom icon and tooltip to row when filter is applied to row on right click-> Field settings. I am using pivot grid.

    <wj-pivot-grid
    [itemsSource]="pivotPanel">
    </wj-pivot-grid>
  • Replied 27 July 2022, 5:29 pm EST

    Hello

    Sorry for the delayed response, you can achieve similar behavior in the pivotGrid control as well. You may handle the collectionChanged event of the CollectionView and itrate over the fields to check if the filter is applied on them or not and add the custom icon on their header cell accordingly. Please refer to the sample link below demonstrating the same:

    https://stackblitz.com/edit/angular-umj5im?file=src%2Fapp%2Fapp.component.ts

    Regards
  • Replied 28 July 2022, 12:07 am EST

    Thank you so much. This is what exactly I want.
  • Replied 2 August 2022, 11:00 pm EST

    Hi Team,

    Kindly Help.
    i have added the filter icon on the row when row is filtered

    now I want to show the filtered values on mouseover of the row icon, how can I achieve.
    I am using pivot grid

  • Marked as Answer

    Replied 4 August 2022, 3:59 am EST

    Hello,

    You may refer to the sample link below demonstrating how to show the filtered values list when the mouse hovers over custom icons:

    https://stackblitz.com/edit/angular-mlalme?file=src%2Fapp%2Fapp.component.ts

    You can customize the view of the list as per your requirements.

    Regards
  • Replied 5 August 2022, 12:04 am EST

    Thanks Team for help
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels