Dashboard layout scroll virtualization

[Cesar Smerling]

Hello, we have the dashboard to visualize panels with a lot of data, grid, gantts, plots, graphs, etc and we need some virtualization for the scrolling to avoid performance issue.
There is a feature for this in the dashboard? If not, there is a way that can be implemented with the ObserverIntersector or in another way? This will be implemented in the feature?

Thanks

[SureshRajan Alagarsamy]

Hi Cesar,

We have reviewed your query and understand that you are looking for virtualization support in the Dashboard Layout component. Currently, our Dashboard Layout does not have built-in virtualization support. However, you can achieve similar functionality by binding the scroll event to the parent div that contains the Dashboard Layout component. When the scrollbar passes the midpoint of the parent div's height, you can dynamically add new panels using the "addPanel" API method.

We encourage you to implement your specific requirements using the scroll event, and you can refer to our provided example as a guideline.

Refer to the below code snippet for further reference.

[app.component.ts]

import { DashboardLayoutComponent,DashboardLayoutModule,PanelModel } from '@syncfusion/ej2-angular-layouts';

....

@Component({

  ....

  template: `

    <div class="control-section" (scroll)="onScroll($event)">

        <ejs-dashboardlayout id='defaultLayout' #defaultLayout [columns]='columns' [cellSpacing]='cellSpacing' [panels]='panels'>

        </ejs-dashboardlayout>

    </div>`,

})

export class AppComponent {

  @ViewChild('defaultLayout')

  public dashboardObj: DashboardLayoutComponent | undefined;

  ....

  private count: number = 12; // Start count based on initial panels

  public panels: any = [

    { row: 0, col: 0, content: '<div class="content">1</div>' },

    ....

    { row: 3, col: 2, content: '<div class="content">12</div>' },

  ];

  @HostListener('scroll', ['$event'])

  onScroll(event: Event) {

    const target = event.target as HTMLElement;

    const scrollTop = target.scrollTop;

    const clientHeight = target.clientHeight;

    const scrollHeight = target.scrollHeight;

    // Check if we have scrolled past the midpoint

    if (scrollTop + clientHeight >= scrollHeight / 2) {

      this.addPanels();

    }

  }

  private addPanels(): void {

    const additionalPanels: PanelModel[] = [];

    for (let i = 1; i <= 6; i++) {

      // Add 6 new panels

      this.count++;

      const row = Math.floor((this.count - 1) / this.columns);

      const col = (this.count - 1) % this.columns;

      additionalPanels.push({

        id: this.count.toString(),

        sizeX: 1,

        sizeY: 1,

        row: row,

        col: col,

        content: `<div class="content">${this.count}</div>`,

      });

    }

    // Add new panels to the DashboardLayout

    additionalPanels.forEach((panel) => {

      (this.dashboardObj as any).addPanel(panel);

    });

  }

}

 

We have also attached a sample for your reference.

Sample: https://stackblitz.com/edit/github-xltfv1-uxbjzc?file=src%2Fapp.component.ts

Regards,
Suresh.