how can we open ejs menu only on click ? And remove hover effect when we mouse over on row ?

Hello Team,

We are using  menu in grid control and facing performance issue when grid having 100+ records and we identified that menu created ahead of time and the grid is watching mouse movement so it can display the menu when button is hovered. If we change this so the menu is created only on a click of the button the performance problem should go away. 

Note: We have requirement for infinite scrolling so cant use pagination option with in the grid.

Can any one suggest how we can open menu only on click event? 

Please find attached html for your reference. I tried to remove beforeOpen and beforeClose events and seen to remove  onhover effect but didn't work since it has default behaviour.

 <e-column *ngIf="gridConfigSettings?.showActionItems" [allowEditing]='false' width="90" minWidth="20"> -->
      <ng-template #template let-data>
        <div class='custom-menu'>
          <ejs-menu #menu [items]='menuItems' (beforeOpen)='beforeOpen($event, data)' (beforeClose)='beforeClose($event)'
            (select)='onSelect($event,data[linkKey])'>
          ejs-menu>
        div>
      ng-template>
    e-column>



Thanks,
Anil N

Attachment: ejsMenu_6b16b0b4.zip

1 Reply

RS Rajapandiyan Settu Syncfusion Team June 18, 2020 02:24 PM UTC

Hi Anilkumar, 

Greetings from syncfusion support. 

Query : We are using  menu in grid control and facing performance issue 
               Can any one suggest how we can open menu only on click event?  
 
As we discussed in the meeting in the ticket (280297 – same query) you have resolved the performance issue by using contextMenu items instead of EJS-Menu control. you need a sample with contextMenu and infinite scroll feature and we need to open the contextMenu item by both click and mouse over. We will provide sample in that ticket. 

So you can follow that incident for further updates on this query. 

Regards, 
Rajapandiyan S 


Loader.
Up arrow icon