Filter horizontal grouping on Schedule

[Sergio]

Hi all!

I'm looking for a way to filter group items on a schedule.

Please, look at this example: https://ej2.syncfusion.com/angular/demos/#/material/schedule/resource-grouping

What I'm trying to reach is to have only one item in that header, for example 'Airways 1', with it's calendar below; and some kind of scroll-arrows or button to display the other Airways 2 and 3, and once pressed, display only the calendar attached to this new group.

I think this could be an option:

Anyway, I would prefer a button that, when pressed, displays a list with the other options.

I hope I have been clear enough.

[Karthigeyan Krishnamurthi]

Hi Sergio, 

 

Syncfusion greetings. 

 

We have prepared the below sample to display the resource based on button click. 

https://stackblitz.com/edit/angular-z1spi7-ajwwwy?file=app.component.html 

 

<div class='buttonDiv'> 

         <button id='prevButton'  cssClass="e-flat" iconCss="e-btn-sb-icon e-prev-icon" ejs-button (click)="onPreviousClick()" ></button> 

         <button id='nextButton'  cssClass="e-flat" ejs-button class = 'e-btn-sb-icon e-next-icon' (click)="onNextClick()"></button> 

 </div> 

 

onPreviousClick() { 

    let index = this.getResourceIndex(); 

    if (index > 0) { 

      let resource = (this.resourceDataSource[index - 1] as any).AirlineId; 

      this.scheduleObj.resources[0].query = new Query().where('AirlineId', 'equal', resource); 

      this.scheduleObj.dataBind(); 

    } 

  } 

  onNextClick() { 

    let index = this.getResourceIndex(); 

    if (index < this.resourceDataSource.length - 1) { 

      let resource = (this.resourceDataSource[index + 1] as any).AirlineId; 

      this.scheduleObj.resources[0].query = new Query().where('AirlineId', 'equal', resource); 

      this.scheduleObj.dataBind(); 

    } 

  } 

 

Regards, 

Karthi 

 

[Sergio]

It has helped so much, thanks!

[Karthigeyan Krishnamurthi]

Most welcome 😊