Performance issue in TreeGrid with tooltip - Branched from 196043

[Abel]

Abel

Mar 07, 2025 02:35 PM

I have the same performance issue. I am using the tree grid component in which each row has its own tooltip because the content is dependent on the row data.

When adding many items to the tree grid (~100), the performance when scrolling is too poor and the problems seems related because it fires the change detection.

When scrolling "fast", the tree, even with virtualization, disappears some seconds and the page is unresponsive. 

----------------------

Abel

Mar 12, 2025 07:23 PM

Hi 

Thank you for your answer but it is not the same implementation as mine.

Let me attach the sample modified with my configuration. 

My real scenario is even worse as i have more columns and when scrolling, the treegrid gets blank and unresponsive for some seconds.

Thanaks

Attachment: Archivo_620cc041.zip

[Shek Mohammed Asiq Abdul Jabbar]

Hi Abel,

Greetings from Syncfusion support.

We have validated the sample you shared and suspect that you want to render a custom tooltip for each row. In your sample, you have rendered the tooltip in a separate template, which may be causing the performance issue.

To optimize performance, we recommend wrapping the TreeGrid component inside the Tooltip component. You can configure the custom tooltip to be displayed on hover using the beforeRender event.

Please refer to the following documentation and sample with virtualization:

• Documentation:
  Display Custom Tooltip for Columns
• Sample with Virtualization and Column Template:
  StackBlitz Sample

If you face any issued further, please share the video demonstration replicating the issue.

Regards,
Shek

[Abel]

Hello

But i need the tooltip to only show when we click in a button in the last column and the content should be a template with a custom component inside with its data depending on the row, not just a plain text.

Thanks

[Shek Mohammed Asiq Abdul Jabbar]

Hi Abel,

Based on your query, we suspect that you want to display a tooltip when clicking the template button. We have prepared a simple sample with virtualization to show the tooltip on button click, which will be hidden when the mouse leaves the button div. We have also modified the content based on the button's data.

Please refer to the following code snippet:

.html

<ng-template #template let-data>

          <button

            class="empData"

            (click)="showTooltip($event, data)"

            (mouseleave)="hideTooltip()"

          >

            Tooltip

          </button>

          <ejs-tooltip

            #tooltip

            id="tooltip"

            content="Tooltip content"

            target=".empData"

          ></ejs-tooltip>

        </ng-template>

      </e-column>

 

.ts

showTooltip(event: MouseEvent, data: any) {

    const targetElement = event.target as HTMLElement;

 

    // Format the properties for display

    const content = `

      <div><strong>FIELD1:</strong> ${data.FIELD1}</div>

      <div><strong>FIELD2:</strong> ${data.FIELD2}</div>

      <div><strong>FIELD3:</strong> ${data.FIELD3}</div>

      <div><strong>FIELD4:</strong> ${data.FIELD4}</div>

      <div><strong>Crew Count:</strong> ${data.Crew?.length || 0}</div>

    `;

 

    this.tooltip.content = content;

 

    // Open the tooltip at the clicked button

    this.tooltip.open(targetElement);

  }

 

  // Hide tooltip on hover

  hideTooltip() {

    if (this.tooltip) {

      this.tooltip.close();

    }

  }

 

Please check the following sample for reference:
Sample

Kindly let us know if you need further assistance.

Regards,
Shek