Page is getting stuck when my grid having more records when each row having ejs-menu on mouse hover

[Anilkumar Nalla]

Hi Team,

I am using ejs-grid component in my angular 7 app and i have been facing performance issue when the grid having more records ( Eg: 100+ records) due to this page is getting stuck and cant do any action further.

I analysed the issue and identified that problem is with row menu for each row. When i commented the ejs-menu the performance is MUCH better.

You can refer the below threat for your reference which we have contacted you at the time of implementation stage. 

https://www.syncfusion.com/forums/153087/onhover-need-to-get-an-icon-at-the-end-of-a-row

Please let us know the potential solution for this issue and do needful ASAP. 

[Rajapandiyan Settu]

Hi Anilkumar, 

Greetings from syncfusion support. 

Query : i have been facing performance issue when the grid having more records ( Eg: 100+ records) due to this page is getting stuck and cant do any action further.  

 

We are also able to reproduce the reported behavior at our end when having 100+ records in a single page of grid. In your requirement we have rendered EJS-Menu control by using column template feature. so the Menu control rendered based on the currentViewRecords. If the grid having 100+ currentviewRecords then menu control is rendered 100+ times in that page which leads performance issue. 

We can overcome this issue by using pagination in the grid. so we render only few records in a page. Please refer the  below code example and sample for more information.  

App.component.html 

<ejs-grid #grid id='grid' height='400px' (dataBound)='dataBound($event)' allowPaging='true' [pageSettings]='pageSettings' [dataSource]='pData' [editSettings]='editSettings' [childGrid]='childGrid' [toolbar]='toolbar' (rowDataBound)='rowDataBound($event)'> 

    <e-columns> 

        ------- 

    </e-columns> 

</ejs-grid> 

App.component.ts 

 

  ngOnInit() { 

    this.pageSettings = { pageSize: 9 }; 

------ 

} 

Sample : https://www.syncfusion.com/downloads/support/forum/154944/ze/GridUpdated1224524273.zip 

UG : https://ej2.syncfusion.com/angular/documentation/grid/paging/?no-cache=1#pager-with-page-size-dropdown 

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

Please get back to us if you need further assistance on this. 

Regards, 

Rajapandiyan S 

[Anilkumar Nalla]

Hi Rajapandiyan Settu,

In our requirement we are loading all the records at single instance due to having infinite scrolling   (loading records on scrolling) requirement in near future. 

 Even if  we do implement  pagination also we would be loading bunch of records and ejs-menu is going to be render for each row right. How can we overcome this issue ? Please do needful on providing solution.

[Rajapandiyan Settu]

Hi Anilkumar, 

Thanks for your update 

Query : Even if  we do implement  pagination also we would be loading bunch of records and ejs-menu is going to be render for each row right. How can we overcome this issue ? 

 

When we using infinite scrolling in the grid we have rendered minimum 150+ rows in the DOM. so the grid having 150+ EJS Menu control in the DOM which leads performance issue. 

To avoid rendering large number of Menu control in the DOM, we suggest you to use pagination in the grid. grid paging is depends grid datasource length and pageSize . by default the grid pageSize is 12. So 12 rows (12 menu control) only rendered in DOM. now we can avoid the performance issues in grid. 

If we moving to another page we have removed the previous page’s rows from the DOM and appended new rows of current page to the DOM. 

If you having bunch of records we divided it by pageSize (12) and rendered only 12 records by page. You can also change the page size by below documentation. 

UG : https://ej2.syncfusion.com/angular/documentation/grid/paging/#pager-with-page-size-dropdown  

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

Note : when using pagination you don’t need infinite scrolling. 

 

Please get back to us if you need further assistance on this. 

Regards, 

Rajapandiyan S 

[Anilkumar Nalla]

Hi Rajapandiyan Settu,

With reference to your response, we can try with pagination with in the grid . But we had a requirement for Infinite scrolling.

The  problem is  every row has its 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.  I tried  removing event (beforeOpen) and with below code snippet to create menu only when ever we click ..

 Is there any way to create menu items only on clicking on row ? instead on mouse hover ?

I tried with showItemOnClick attribute to open menu only on click but don't see any luck on performance front. PFB code for your reference. 

HTML -->

Earlier code -->

            (select)='onSelect($event,data[linkKey])'>

         

Tried -->

 

     

       

         

            (select)='onSelect($event,data[linkKey])' [showItemOnClick]='true'>

         

       

     

   

.ts -->

  created(args, data) {

       if (data[this.menuOptionsField] && data[this.menuOptionsField].length > 0) {

      const menuObj: MenuComponent = args.parentItem.parentObj;

      menuObj.hideItems(data[this.menuOptionsField], false);

    }

  }

[Anilkumar Nalla]

Hi Team,

Can i have any update on issues list down in below incident ?

https://www.syncfusion.com/support/directtrac/incidents/280297

Thanks

[Rajapandiyan Settu]

Hi Anilkumar, 

Yes you can follow that incident regarding this query. 

Regards, 

Rajapandiyan S