Angular Gantt Chart not filtering correctly

[Cesar Smerling]

Hi I'm testing the angular gantt filtering and it seems that is not working correctly, but I see in the example that works fine. I share the code. Something I'm Missing

The problem is that is not filtering on column or on search, but when Apply multiple filters and clear one the filters works. 

Thanks

Component

import {Component, Input, OnInit, ViewEncapsulation} from '@angular/core';
import {Tasks} from "../../models/tasks";
import {Resource} from "../../models/resource";
import {ColumnModel, TimelineSettingsModel} from '@syncfusion/ej2-angular-gantt';
import {SelectionSettingsModel} from '@syncfusion/ej2-angular-grids';

@Component({
  selector: 'app-gantt',
  templateUrl: './gantt.component.html',
  styleUrls: ['./gantt.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class GanttComponent implements OnInit {
  @Input() data: Tasks[];
  @Input() resources: Resource[];

  projectStartDate: Date;
  projectEndDate: Date;

  taskSettings;
  timelineSettings: TimelineSettingsModel;
  editSettings;
  toolbar;
  labelSettings;
  selectionSettings: SelectionSettingsModel;
  columns: ColumnModel[];
  eventMarkers : object[];

  constructor() { }

  ngOnInit() {
    this.projectStartDate = new Date('04/02/2019 07:00:00 AM');
    this.projectEndDate = new Date('04/03/2019 00:00:00 AM');

    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      endDate: 'EndDate',
      duration: 'Duration',
      progress: 'Progress',
      dependency: 'Predecessor',
      resourceInfo: 'resources',
      child: 'subtasks',
    };

    this.timelineSettings = {
      timelineUnitSize: 60,
      topTier: {
        unit: 'Hour',
      },
      bottomTier: {
        unit: 'Minutes',
        count: 15,
      },
    };

    this.selectionSettings = {
      type: 'Multiple',
    };

    this.editSettings = {
      allowAdding: true,
      allowEditing: true,
      allowDeleting: true,
      allowTaskbarEditing: true,
      showDeleteConfirmDialog: true
    };

    this.toolbar = [
      'Add', 'Edit', 'Update', 'Delete', 'Cancel',
      'ExpandAll', 'CollapseAll','ZoomIn', 'ZoomOut', 'ZoomToFit',
      { text: 'Save', tooltipText: 'Save',id: 'Save', prefixIcon:  'e-save'},
      'Search'
    ];

    this.labelSettings = {
      rightLabel: 'Progress: ${taskData.Progress}%',
      leftLabel: 'Duration: ${taskData.Duration}',
      taskLabel: 'TaskName'
    };

    this.columns = [
      { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
      { field: 'TaskName', headerText: 'Task Name', width: '250' },
      { field: 'resources', headerText: 'Resources ', width: '150' },
    ];

    this.eventMarkers = [
      {
        day: new Date('04/02/2019 07:15:00 AM'),
        label: 'Mark 1'
      },
      {
        day: new Date('04/02/2019 09:45:00 AM'),
        label: 'Test Mark 2'
      }
    ];
  }

  public queryTaskbarInfo(args: any) {
    let parentResources;
    if(args.taskbarType === 'ChildTask') {
      const parentId = args.data.parentItem? args.data.parentItem.taskId : null;
      parentResources = this.data.find( event => event.TaskID === parentId).resources;
    }

    const resources = parentResources ? parentResources : args.data.taskData.resources;
    if(resources && resources.length === 1) {
      const resourceId = resources[0];
      const resource = this.resources.find( res => res.resourceId === resourceId);
      if(args.taskbarType === 'ChildTask')
        args.taskbarBgColor = resource.childColor;
      else
        args.taskbarBgColor = resource.parentColor;
      args.progressBarBgColor = resource.progressColor
    }
  }

  public toolbarClick(args: any): void {
    if (args.item.text === 'Save') {
      console.log("Saved Data", this.data);
    }
  };

  public onActionComplete(args: any): void {
    if (args.requestType == "filterafteropen" && (args.columnName === "StartDate" || args.columnName === "EndDate")) {
      args.filterModel.dlgDiv.querySelector('.e-datetimepicker').ej2_instances[0].min = new Date(1969, 5, 1);
      args.filterModel.dlgDiv.querySelector('.e-datetimepicker').ej2_instances[0].max = new Date(1969, 8, 30);
      args.filterModel.dlgDiv.querySelector('.e-datetimepicker').ej2_instances[0].showTodayButton = false;
      args.filterModel.dlgDiv.querySelector('.e-datetimepicker').ej2_instances[0].dataBind();
    }
  }


}

Html

<ejs-gantt  id="ganttDefault" height="780px"
            [projectStartDate]="projectStartDate"
            [projectEndDate]="projectEndDate"
            [dataSource]="data"
            [taskFields]="taskSettings"
            [timelineSettings]="timelineSettings"
            [editSettings]="editSettings"
            [selectionSettings]="selectionSettings"
            [toolbar]="toolbar"
            [columns]="columns"
            [labelSettings]="labelSettings"
            [eventMarkers]="eventMarkers"
            [allowRowDragAndDrop]="true"
            [allowFiltering]="true"
            resourceNameMapping='resourceName'
            resourceIDMapping='resourceId'
            [resources]="resources"
            [durationUnit]="'Minute'"
            (queryTaskbarInfo) = "queryTaskbarInfo($event)"
            (toolbarClick)="toolbarClick($event)"
            (actionComplete)="onActionComplete($event)"
>
</ejs-gantt>

Module

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

import {AppComponent} from './app.component';
import {SchedulerComponent} from './components/scheduler/scheduler.component';
import {ScheduleModule} from '@syncfusion/ej2-angular-schedule';
import {EventsService} from "./services/events.service";
import {GanttComponent} from './components/gantt/gantt.component';
import {
  DayMarkersService,
  EditService,
  FilterService,
  GanttModule,
  RowDDService,
  SelectionService,
  ToolbarService
} from "@syncfusion/ej2-angular-gantt";
import {NumericTextBoxAllModule, TextBoxAllModule} from "@syncfusion/ej2-angular-inputs";
import {DropDownListAllModule, MultiSelectAllModule} from "@syncfusion/ej2-angular-dropdowns";
import {CheckBoxAllModule} from "@syncfusion/ej2-angular-buttons";

@NgModule({
  declarations: [
    AppComponent,
    SchedulerComponent,
    GanttComponent,
  ],
  imports: [
    BrowserModule,
    ScheduleModule,
    GanttModule,
    DropDownListAllModule,
    CheckBoxAllModule,
    TextBoxAllModule,
    NumericTextBoxAllModule,
    MultiSelectAllModule
  ],
  providers: [EventsService, ToolbarService, EditService, SelectionService,RowDDService, FilterService,DayMarkersService  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

[Karthikeyan Raja]

Hi Cesar,  

  

We have analyzed and prepared sample with your code snippet. In our sample filtering and searching was working fine. So kindly let us know the exact issue replication steps to reproduce the reported issue or video reference for issue so that will be helpful for us to serve you better. Please find our sample from below link 

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

  

Regards,  

Karthikeyan Raja 

[Cesar Smerling]

Hi! I have giveng an other try and it's doesn't work.

I copied the example code and doesn't work.

I attached a video showing the missbehavior.

Attachment: Scheduler__Google_Chrome_20200311_084122_f0431e63.7z

[Cesar Smerling]

Here I attach the code of all project.

Attachment: scheduler_34d22ba0.zip

[Karthikeyan Raja]

Hi Cesar, 

 

Sorry for the delay. 

We have analyzed your query and we are able to reproduce the reported issue in your sample. We suspected that the reported issue is due to missing dependent packages. By installing npm install @syncfusion/ej2-angular-gantt itself will install all its dependent packages. We have modified your sample with updated package.json file. Please find the sample from below link, 

Sample - https://www.syncfusion.com/downloads/support/directtrac/general/ze/gantt-filtering-updated-1067669221 

 

Please find the below documentation link for further reference, 

Documentation - https://ej2.syncfusion.com/angular/documentation/gantt/getting-started/#adding-syncfusion-gantt-package 

 

Please get back to us, if you need any further assistance on this. 

 

Regards, 

Karthikeyan Raja