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

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

• 

  riya.katawate16

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  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.

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  riya.katawate16

  • Post Options:
  • Link
    Copy

  Posted 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”>
  
  

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  riya.katawate16

  • Post Options:
  • Link
    Copy

  Posted 28 July 2022, 12:07 am EST

  Thank you so much. This is what exactly I want.

• 

  riya.katawate16

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  riya.katawate16

  • Post Options:
  • Link
    Copy

  Posted 5 August 2022, 12:04 am EST

  Thanks Team for help