We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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

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

1 Reply

PS Pavithra Subramaniyam Syncfusion Team March 20, 2019 08:52 PM

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; 
     
   



 
Please get back to us if you need further assistance. 
 
Regards, 
Pavithra S. 


Loader.
Live Chat Icon For mobile
Up arrow icon