Very poor performance even with virtualization

[Deniz]

Hi,

I have prepared a sample tree-grid with 40 columns and 200 rows. Even with column and row virtualization performance of the table is very poor. It takes a few seconds to perform the first render, and scrolling horizontally and vertically is laggy. It freezes for a few seconds when scrolling. I have specified the height property as 1000px to fill the page. If I use a smaller size, like 291px (as in your examples), rendering performance improves a lot. But I don't think no one will want the table to cover only one-fifth of the page height. As you can see from the below code, the content of each cell is very simple. In a real-life application, images, calculated values, etc., can make the performance much worse. I couldn't attach the video showing the issue, so I have uploaded it here, https://youtu.be/NMpOPAY2jUw. As you can see in the video, it takes a lot of time for the table to scroll. It lags a lot. If data is bigger, it sometimes displays an empty page for 5 seconds on a high and development machine.

import {ColumnModel, TreeGridComponent, VirtualScroll} from "@syncfusion/ej2-react-treegrid";
import * as React from "react";
import {Inject} from "@syncfusion/ej2-react-schedule";

const columns: ColumnModel[] = [];
for (let i = 0; i < 40; i++) {
  columns.push({
    field: "field" + i,
    headerText: "Field " + i,
    width: 100,
    // @ts-ignore
    template: (row: any) => {
      return <span>{row["field" + i]}span>;
    },
  });
}

const data: any[] = [];
for (let i = 0; i < 200; i++) {
  const row: any = {id: i, field0: "Row " + i};
  for (let j = 1; j < 40; j++) {
    row["field" + j] = "Cell " + i + " " + j;
  }
  data.push(row);
}

function App() {
  return (
    <TreeGridComponent
      treeColumnIndex={1}
      childMapping="subtasks"
      columns={columns}
      dataSource={data}
      enableVirtualization={true}
      enableColumnVirtualization={true}
      height="1000"
    >
      <Inject services={[VirtualScroll]} />
    TreeGridComponent>
  );
}
export default App;



[Pon Selva Jeganathan]

Hi Deniz ,   

Query: performance issue while using virtualization

Based on your query, you are facing performance issues when you set the height property value to 1000 with the virtualization feature. While using the virtualization feature, the number of records displayed in the TreeGrid is determined implicitly by the height of the content area, and a buffer record will be maintained in the TreeGrid content in addition to the original set of rows.

If you are using 200 rows with 40 columns, it will render nearly 8,000 cells (rows * columns). And you are using the column template for all cells. So, it will take some time to render (8000 cells) in the tree grid.

To avoid this issue, we suggest that you use an allowPaging property to overcome the reported problem. Using treegrid paging to fetch only a pre-defined number of records from the data source It will help improve the performance.

Please refer to the below help documentation,

https://ej2.syncfusion.com/react/documentation/treegrid/paging/

Please refer to the below demo,

https://ej2.syncfusion.com/react/demos/#/bootstrap5/treegrid/paging

Please refer to the below API documentation,

https://ej2.syncfusion.com/documentation/api/treegrid/#allowpaging

Regards,

Pon selva

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly

[Deniz]

Hi Pon Selva,

Unfortunately, I do not agree with you. Please note that it is not rendering 200 * 40 cells. We have enabled virtualization. As you can see in the video, just 27 rows and 20 columns fit on the screen. On the virtualization page of the tree grid, you state that "TreeGrid allows you to load large amount of data without performance degradation", ​but this is not true. Even virtualization doesn't allow the tree grid to display a large number of items. Actually, by today's standards, this is not a large data set. For example check this, https://rawgit.com/bvaughn/react-virtualized/master/playground/grid.html, It is rendering an image, text and a text field for each cell for a 1000 x 1000 grid, and it is like butter. So, I think there is a performance bug here. 

[Pon Selva Jeganathan]

Deniz,   

Query: performance issue while using virtualization

While rendering more templates in TreeGrid columns, we faced a performance problem. We have now implemented react virtual dom concepts to enhance template rendering performance. If you want to resolve the performance-related issue of template rendering by setting requireTemplateRef as false in the TreeGrid load event.

Please refer to the below code snippet,

 

function load(args) {

    var tree =

      document.getElementsByClassName('e-treegrid')[0].ej2_instances[0];

 

    tree.grid.requireTemplateRef = false;

  }

 

Documentation : https://ej2.syncfusion.com/react/documentation/api/grid/#requiretemplateref

Sample:  https://stackblitz.com/edit/demo-react-functional-stateful-component-2vys6y?file=index.js,index.html,package.json

Note : By default, this property is set to true, which allows you to access the template elements in the queryCellInfo and headerCellInfo events. However, if you set the requireTemplateRef property to false, you will not be able to access the template elements in these events. Instead of using conditional rendering to apply customization.

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly

[Deniz]

Hi,

Thanks a lot for your support. This really solved the performance issue. We also tried to valueAccessor instead of a template for columns that have simpler values, and it also helped a lot. Thanks again. 

[Suganya Gopinath]

Deniz,

We are glad that the issue has been resolved. Please get back to us for further assistance. 

We are marking this thread as  solved.