[ANGULAR] Filter Events in vertical Mode scheduler

[Hiba Rizk]

Hi,

in a horizontal mode scheduler we have

[filterBarFeature]="true"

when the option is set to ture events /resources are filtered based on the passed filter
is there a way to have the same functionality in a vertical mode scheduler, a public method or something, because i want to pass the filter from outside the bryntum control and on run time

Thanks in advanced

Regards,

[mats]

Yes you can always use the store.filter API, please see our docs: https://bryntum.com/docs/scheduler/#Core/data/mixin/StoreFilter

[Hiba Rizk]

how this is integrated with angular ?

  @ViewChild(SchedulerComponent) scheduler: SchedulerComponent;
  ....

this.scheduler.schedulerEngine.eventStore.filter({
      filters: {
        property: 'resourceId',
        value: value,
        operator: '='
      },
      replace: true
    });

[sergey.maltsev]

Hi!

You could add your code to ngAfterViewInit

ngAfterViewInit() {
     this.scheduler.schedulerEngine.eventStore.filter({
      filters: {
        property: 'resourceId',
        value: value,
        operator: '='
      },
      replace: true
    });
}

Check our Angular integration guide here
https://www.bryntum.com/docs/scheduler/#guides/integration/angular.md

Also check Angular demos in distribution package in exampes/angular folder.

[Hiba Rizk]

Hi,

what i'm trying to do is to hide the resource along with it's event, but the event are not updated unless i'm using timeout
the below code is fired on button click

 modifyResources() {
    let value = "1a";
    this.resources = this.resources.filter(r => r.id !== value );
    this.scheduler.schedulerEngine.eventStore.filter({
      filters: {
        property: 'resourceId',
        value: value,
        operator: '!='
      },
      //replace: true
    });
  }

and also the below will do the same thing:

modifyResources() {
    this.resources = this.resources.filter(r => r.id !== "1a");
    setTimeout(() => {
    this.events = this.events.filter(e => e.resourceId !== "1a");
    })
  }

[Hiba Rizk]

Hi,

Any idea how this should work without timeout ?

[mats]

Why did you introduce the timeout? Seems like a weird thing to have in production code.

[Hiba Rizk]

because the UI is not refreshed if i don't set the setTimeout

[saki]

Well, this should be extremely simple. Just filter the resource store. For that, change mode to 'vertical' in angular basic example and then apply the filter to the resource store.

rs-filter.gif (334.94 KiB) Viewed 1665 times