🍉 Meet Flexmonster Pivot Table & Charts 2.9.Check out all hot features!
Get Free Trial

on hover property not working in latest release 2.7.17

Lekhraj asked on October 23, 2019

Hello Team,
Currently, we are using 
“ng-flexmonster”: “^2.7.17”,
“flexmonster”: “^2.7.17”, for our angular 7 application.
we had implemented to mask phone number on gird view and display it mouse on hover.
customizeCellFunction(cell, data) {

      if (data.type === ‘value’ && data.hierarchy.dimensionName === ‘phoneNumber’) {
      if (cell.text.length === 10) {
        const match = cell.text.match(/^(\d{3})(\d{3})(\d{4})$/);
        if (match) {
          const formattedPhone = ‘(‘ + match[1] + ‘) ‘ + match[2] + ‘-‘ + match[3];
          cell.attr[‘title’] = formattedPhone;
        cell.text = ‘******’ + cell.text.substring(6, 10);

this was working fine on my previous version 2.7.3 please find the attached screenshot.
one more addition to this we have to still achieve that, while exportTo we have to export phone numbers without masking. 
we would like to know is there any changes made in the latest release and provide some sample examples.
Thanks and Regards,


1 answer

Vera Didenko Vera Didenko Flexmonster October 24, 2019

Hello, Lekhraj,
Thank you for writing to us.
Could you please specify which company you represent? 
We need this information for our records.
1. Regarding hover:
We would like to explain that since version 2.7.3 certain changes have been made to the grid. These changes enhanced and improved scrolling for mobile and touchpad devices. However, it seems this in return affected the way hover works.
1.1) One way to get the hover working as before is to apply the following CSS:

#fm-pivot-view .fm-grid-layout #fm-data-sheet .fm-scroll-placeholder {
  pointer-events: none;

However, please keep in mind that this way the scrolling experience will be affected.
1.2) Also, as an alternative to hover, there is a possibility to show a pop-up window with the phone number on mouse click. The cellclick Flexmonster event can be used for this: https://www.flexmonster.com/api/cellclick/
2. About showing full data on export:
This can be achieved by turning off the customizeCell hook on export start and enabling it back when the export is complete.
We kindly recommend using exportstart and exportcomplete Flexmonster events and the customizeCell() API call for controlling the customizeCell hook.
Please let us know if you have any questions.
Waiting for your reply.
Best Regards, 

Please login or Register to Submit Answer