How to show icons on hover in wijmo flexgrid

How to show icons on hover in wijmo flexgrid

Posted by: teenu.k on 10 August 2021, 10:37 am EST

• 

  teenu.k

  • Post Options:
  • Link
    Copy

  Posted 10 August 2021, 10:37 am EST - Updated 3 October 2022, 12:53 pm EST

  Hi,
  
  I need to show 3 icons horizontally on the hover of the cells in the first column inside flexgrid using angular. and I need to fire click event for each icon.

  I have tried like creating wijmo popup on hover and added these icons inside popup. but i couldn’t able to set the background of the icons as transparent.

  Here I am attaching the image for my requirment .
  
  

  

  808×174 19.7 KB

  code snippet inside current html

  <wj-flex-grid #flex class=“flexgridClass” [frozenColumns]=“2” (initialized)=“flexInitialized(flex)” [columnGroups]=“allTableColumn”
  
  [headersVisibility]=“‘Column’” [selectionMode]=“‘Row’” [itemsSource]=“invoiceItemsSource” [itemFormatter]=“itemFormatter”>

        </wj-flex-grid>
  

  Thanks,
  
  Teenu

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 11 August 2021, 9:16 am EST

  Hi Teenu,

  To set the background of icons inside popUp we may attach a css class to these span elements which represents the icons and may set the background property to transparent.

  If we wish to make any changes in the popUp background color, we may set the same css to the wj-popup css selector.

  Please refer to the sample below:

  https://stackblitz.com/edit/angular-oqmz9b

  Thank you