When I load 1050 data in gantt chart, my page stucks

[NAYAN MIYATRA]

My Code:

[HTML]

div class="col-sm-12">

    <ejs-gantt

    #gantt1

    id="ganttDefault"

    height="550px"

    [labelSettings]="labelSettings"

    [allowFiltering]='true'

    [allowSorting]= 'true'

    [dataSource]="schedulelist"

    [taskFields]="taskSettings"

    [timelineSettings]="timelineSettings"

    [editSettings]="editSettings"

    [toolbar]="toolbar"

    allowExcelExport='true'

    (queryTaskbarInfo) = "queryTaskbarInfo($event)"

    (toolbarClick)="toolbarClick($event)"

    (actionComplete)="onActionComplete($event)"

    ></ejs-gantt>

  </div>

My Code:

[TS]

 ngOnInit(): void {

    this.getScheduleList(this.projectID);

    this.taskSettings = {

      id: 'uniqueId',

      name: 'activityName',

      startDate: 'startDate',

      endDate: 'endDate',

      duration: 'duration',

      isCritical: 'isCritical',

      child: 'subtasks',

      dependency: 'predecessors',

    };

    this.labelSettings = {

      leftLabel: 'Task ID: ${taskData.activityCode}',

    }

    this.timelineSettings = {

      topTier: {

        format: 'MMM dd, yyyy',

        unit: 'Week',

      },

      bottomTier: {

        unit: 'Day',

      },

    };

    this.editSettings = {

      allowAdding: true,

      allowEditing: true,

      allowDeleting: true,

      allowTaskbarEditing: true,

      showDeleteConfirmDialog: true

    };

    this.toolbar = ['Add', 'Edit', 'Update', 'ExpandAll', 'CollapseAll', 'Search', 'ExcelExport', 'CsvExport'];

  }

 

[DATA]

[Monisha Sivanthilingam]

Hi Nayan,

Greetings from Syncfusion support.

We have analyzed the stack trace and code snippets you shared, and we noticed that you have used dependency connections in your data. When dependency connections are mapped to the Gantt Chart, then there will be a lot of internal calculations, and hence, the Gantt Chart gets stuck when loading a large number of records. However, we have Virtual Scrolling support to overcome this issue. Virtual Scroll support in Gantt allows you to load a large amount of data without performance degradation. This mode can be enabled by setting the enableVirtualization property to true.

We have prepared a sample for your reference.

To learn more information about Virtual Scrolling in Gant Chart, please refer to our Online Documentation and Sample.

Please contact us if you require any further assistance.

Regards,

Monisha.

[Monisha Sivanthilingam]

Hi Nayan, 

 

Greetings from Syncfusion support. 

 

We have analyzed the stack trace and code snippets you shared, and we noticed that you have used dependency connections in your data. When dependency connections are mapped to the Gantt Chart, then there will be a lot of internal calculations, and hence, the Gantt Chart gets stuck when loading a large number of records. However, we have Virtual Scrolling support to overcome this issue. Virtual Scroll support in Gantt allows you to load large amount of data without performance degradation. This mode can be enable by setting the enableVirtualization property to true. 

 

We have prepared a sample for your reference. 

 

To learn more information about Virtual Scrolling in Gant Chart, please refer to our Online Documentation and Sample. 

 

Please contact us if you require any further assistance. 

 

Regards, 

Monisha. 

[NAYAN MIYATRA]

I've added "enableVirtualization" to my graph but still it's not loading the Data.

<div class="col-sm-12">

    <ejs-gantt *ngIf="schedulelist && schedulelist.length > 0"

    #gantt1

    id="ganttDefault"

    height="550px"

    [labelSettings]="labelSettings"

    [allowFiltering]='true'

    [allowSorting]= 'true'

    [dataSource]="schedulelist"

    [taskFields]="taskSettings"

    [timelineSettings]="timelineSettings"

    [editSettings]="editSettings"

    [toolbar]="toolbar"

    allowExcelExport='true'

    (queryTaskbarInfo) = "queryTaskbarInfo($event)"

    (toolbarClick)="toolbarClick($event)"

    (actionComplete)="onActionComplete($event)"

    [enableVirtualization] = "true"

    ></ejs-gantt>

  </div>

[Monisha Sivanthilingam]

Hi Nayan, 

 

We have analyzed the screenshot and the codes you shared. We suspect that you have used the GanttModule in your app.module.ts file. If that is the case, please import the VirtualScrollService module in the app.module.ts file of your application. The following code snippets demonstrate the solution. 

 

App.module.ts 

 

import { MultiSelectAllModule } from '@syncfusion/ej2-angular-dropdowns'; 

 

import { 

  TextBoxAllModule, 

  NumericTextBoxAllModule 

} from '@syncfusion/ej2-angular-inputs'; 

 

import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'; 

 

import { CheckBoxAllModule } from '@syncfusion/ej2-angular-buttons'; 

 

import { GanttModule } from '@syncfusion/ej2-angular-gantt'; 

 

import { 

  SelectionService, 

  VirtualScrollService 

} from '@syncfusion/ej2-angular-gantt'; 

 

import { HttpModule } from '@angular/http'; 

import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 

import { RouterModule } from '@angular/router'; 

import { CommonModule } from '@angular/common'; 

import { BrowserModule } from '@angular/platform-browser'; 

import { NgModule } from '@angular/core'; 

 

import { AppComponent } from '../app.component'; 

 

@NgModule({ 

  declarations: [AppComponent], 

  imports: [ 

    BrowserModule, 

    GanttModule, 

    DropDownListAllModule, 

    CheckBoxAllModule, 

    TextBoxAllModule, 

    NumericTextBoxAllModule, 

    MultiSelectAllModule 

  ], 

  providers: [SelectionService, VirtualScrollService], 

  bootstrap: [AppComponent] 

}) 

export class AppModule {} 

 

 

Sample: https://stackblitz.com/edit/angular-pgz3ht?file=app%2Fapp.module.ts 

 

Please contact us if you require any further assistance. 

 

Regards, 

Monisha. 

[NAYAN MIYATRA]

That worked, Thanks.

[Monisha Sivanthilingam]

Hi Nayan, 

 

You are welcome. 

 

Please contact us if you require any further assistance. 

 

Regards, 

Monisha.