Filter horizontal grouping on Schedule

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.




3 Replies

KK Karthigeyan Krishnamurthi Syncfusion Team September 11, 2019 11:00 AM UTC

Hi Sergio, 
 
Syncfusion greetings. 
 
We have prepared the below sample to display the resource based on button click. 
 
<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 
 



SE Sergio September 12, 2019 02:55 PM UTC

It has helped so much, thanks!


KK Karthigeyan Krishnamurthi Syncfusion Team September 13, 2019 04:06 AM UTC


Loader.
Up arrow icon