When I change the list of gantt-chart it gives error

[NAYAN MIYATRA]

I'm using Gantt-chart in my angular project.

and I want to filter the data based on checkbox click.

but when I associate filtered list to Gantt-chart it gives error.

Critical and Milestone both are filters.

if I click critical then I got the filtered list in console but it's not assigned to the chart. and I got this error.

<div class="row">

  <div class="schedule-wrapper">

    <mat-form-field class="lookAhedSelect">

      <mat-label>Look Ahead</mat-label>

      <mat-select (change)="onLookAheadChange($event)">

        <mat-option *ngFor="let item of lookAhead" [value]="item.value">

          {{item.viewValue}}

        </mat-option>

      </mat-select>

    </mat-form-field>

    <mat-checkbox type="checkbox" (change)="changedMilestone($event)" name="milestone">Milestone</mat-checkbox>

    <mat-checkbox type="checkbox" (change)="changed($event)" name="critical">Critical</mat-checkbox>

    <button class="upload-schedule">Import Schedule

      <i class="fa fa-upload" aria-hidden="true"></i>

      <input name="imageUrl" class="form-control-file" name="Upload Schedule" type="file" (change)="handleInputChange($event)" />

    </button>

  </div>

</div>

<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)"

  [enableVirtualization] = "true"

  ></ejs-gantt>

</div>

// ts code

    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 = {

      timelineViewMode: 'Month',

      timelineUnitSize: 150,

  };

    this.editSettings = {

      allowAdding: true,

      allowEditing: true,

      allowDeleting: true,

      allowTaskbarEditing: true,

      showDeleteConfirmDialog: true

    };

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

  getCriticalList() {

    this.showLoader = true;

    if (this.isChecked) {

      let criticalList = [];

      this.schedulelist.forEach((ele: any) => {

        if (ele.isCritical === true) {

          criticalList.push(ele);

        }

      });

      console.log(criticalList);

      if (criticalList) {

        this.schedulelist = [];

        this.schedulelist = criticalList;

        this.showLoader = false;

      }

      else{

        this.showLoader = false;

      }

    }

  }

[Monisha Sivanthilingam]

Hi Nayan, 

 

Greetings from Syncfusion support. 

 

We have analyzed your issue, however, we were unable to replicate the issue you reported. We created a sample in which we used a check box to filter the data in the gantt. The data in the gantt was filtered properly, without any issues. We are unclear about your requirement. Are you trying to filter the records in the Gantt via checkbox selection or are you trying to assign an already filtered collection of records to the Gantt ? Please explain in detail about your requirement, so that we can provide a solution to you. 

 

Sample: https://stackblitz.com/edit/angular-kqv4bw?file=app.component.ts 

 

Any information you can share with us will be useful to us in providing a solution to you. 

 

Regards, 

Monisha. 

[NAYAN MIYATRA]

I'm trying to assign an already filtered collection of records to the Gantt, because I don't have variable that need to be filtered in column.

[Monisha Sivanthilingam]

Hi Nayan, 

 

We have analyzed your query and would like to inform you that the issue you reported may occur due to the mismatch in mapping in the data and the taskfields. Please ensure that the fields mapped match in the following places. 

 

Data.ts 

 

{ 

  TaskID: 2, 

  TaskName: 'Defining the product and its usage', 

  StartDate: new Date('04/02/2019'), 

  Duration: 3, 

  Progress: 30 

} 

 

 

App.component.ts 

 

this.taskSettings = { 

  id: 'TaskID', 

  name: 'TaskName', 

  startDate: 'StartDate', 

  duration: 'Duration', 

  progress: 'Progress', 

}; 

 

 

We have prepared a sample for your reference. 

 

Please contact us if you require any further assistance. 

 

Regards, 

Monisha.