How can I disable the row selection on context menu click in Angular Grid

[Samir Modi]

Hi Team,

I have a situation while working with grid and rows having contex menu. The problem is, context menu triggers row selection by default and i have an api call on row selection event which pulls remote data. and displays in another grid underneath. Is there a way i can disable row selection on context menu. Currently, every time i right click it tries to fetch data for that row. Thanks in advance!

Regards,

Samir

[Pavithra Subramaniyam]

Hi Samir, 

Greetings from Sycnfusion. 

You can cancel selecting the row during context-menu open by binding the “mousedown” event to Grid using the “created” event of Grid. And based on the clicked mouse button, we will be cancelling the selection in the “rowSelecting” event of Grid. Please refer the code example below, 

    <ejs-grid #Grid [dataSource]='data' ... (rowSelecting)="rowSelecting($event)" (created)="created($event)"> 

        ... 

    </ejs-grid> 

[ts] 

    created(args){ 

        this.grid.element.addEventListener('mousedown',function(args){ 

          if(args.which == 3){         //check for the right click mouse button 

            this.flag = true; 

          } 

        }.bind(this)) 

    } 

    rowSelecting(args){ 

      if(this.flag == true){ 

        args.cancel = true;     //cancel the selection during opening context menu by right click 

        this.flag = false; 

      } 

    } 

Sample               : https://stackblitz.com/edit/angular-aqfrqb-am2ty9?file=context-menu.component.ts  

Documentation : https://ej2.syncfusion.com/angular/documentation/api/grid/#rowselecting 

   https://ej2.syncfusion.com/angular/documentation/api/grid/#created 

 

Please get back to us if you need further assistance. 

 

Regards, 

Pavithra S.