Flexgrid - Prevent selection from hyperlinks

Flexgrid - Prevent selection from hyperlinks

Posted by: ECHRLicences on 26 October 2018, 8:17 am EST

• 

  ECHRLicences

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 26 October 2018, 8:17 am EST

  Hi,

  When a user click on a hyperlink or a button in a cell from a flexgrid, the selection will be automatically updated.
  
  It should not be the default behaviour, or at least there should be a way to prevent it.

  I’m attaching a few demos with the unexpected behaviour.

  Es6 version:
  
  https://stackblitz.com/edit/js-k4dwyt

  Angular 6 version:
  
  https://stackblitz.com/edit/angular-umbmgs

  Stopping the event bubbling does not seems to do anything.

  As a workaround I could disable the selection for specific rows using the “onSelectionChanging” event of the grid.
  
  Unfortunately this solution does not work properly with mixed contents (e.g. a cell containing both some text and a hyperlink)

  Is there any way to solve this issue ?

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 29 October 2018, 1:20 am EST

  To prevent the default selection behaviour of the grid, you need to attach handler for the ‘mousedown’ event in capturing phase and call preventDefault() as required.
  
  Please refer to the following code snippet:

  flex.hostElement.addEventListener('mousedown', (e)=>{
        if(e.target.tagName == 'A') {
          e.preventDefault();
        }
      }, true);
  

  You may find the updated samples here:
  
  ES6: https://stackblitz.com/edit/js-dgmkwj?file=index.html
  
  Angular: https://stackblitz.com/edit/angular-wexfxw?file=src%2Fapp%2Fgrid.component.ts

  ~Sharad

• 

  ECHRLicences

  • Post Options:
  • Link
    Copy

  Posted 29 October 2018, 3:51 am EST

  Hi Sharad,

  It worked !
  
  Thank you very much.

  Have a nice day.