Dynamically Grouping

[Aaron Hodgins]

I'm fetching events from my database using the DataManager and i'd like to group the events based on their Subject. 

How would I accomplish this? Because I'm making the groups and setting it as the resource directive data source but it's not updating. And using another DataManager for grouping seems like it only sends a get request once when the component loads, when I would need it to do it on date change like the schedule components datasource.

[Vinitha Devi Murugan]

Hi Aaron, 

 

Greetings from Syncfusion Support. 

 

We've verified your reported query and informed you that Datamanger for resource datasource is only called on first load, as is our scheduler's default behaviour. If you want to update the resource datasource during date navigation, we recommend using the query option of datamanager in our scheduler's navigating event, as shown below. 

 

App.component.html 

<ejs-schedule #scheduleObj cssClass='schedule-group' width='100%' height='550px' [group]="group" [selectedDate]="selectedDate"  

        [eventSettings]="eventSettings" [(currentView)]="scheduleView" (popupOpen)="onPopupOpen($event)" (navigating)=”onNavigate($event)”>  

        <e-resources>  

            <e-resource field='GroupID' title='Group Name' name='Groups' [allowMultiple]='allowMultiple' [query]='querySource' [dataSource]='resourceDataManager'  

                textField='GroupName' idField='GroupID' colorField='CalendarColor'>  

            </e-resource>  

        </e-resources>  

    </ejs-schedule>  

 

App.component.ts. 

 

import { ViewEncapsulation, Component, OnInit, ViewChild } from '@angular/core';  

import { EventSettingsModel, DayService, WeekService, WorkWeekService, MonthService, AgendaService, GroupModel, ScheduleComponent } from '@syncfusion/ej2-ng-schedule';  

import { DataManager, Query, Predicate, UrlAdaptor } from '../../node_modules/@syncfusion/ej2-data';  

@Component({  

  selector: 'app-root',  

  templateUrl: './app.component.html',  

  styleUrls: ['./app.component.css'],  

  providers: [DayService, WeekService, WorkWeekService, MonthService, AgendaService],  

  encapsulation: ViewEncapsulation.None  

})  

export class AppComponent implements OnInit {  

  @ViewChild('scheduleObj')  

  public scheduleObj: ScheduleComponent;  

  public selectedDate: Date = new Date(2018, 3, 1);  

  public resourceDataSource: Object[] = [  

    { GroupName: 'Airways 1', GroupID: 1, CalendarColor: '#EA7A57' },  

    { GroupName: 'Airways 2', GroupID: 2, CalendarColor: '#357cd2' },  

    { GroupName: 'Airways 3', GroupID: 3, CalendarColor: '#7fa900' }  

  ];  

  

  public fields: Object = { text: 'GroupName', value: 'GroupID' };  

  public mode: string = 'Box';  

  public popHeight: string = '300px';  

  public filterPlaceholder: string = 'Select group';  

  public value: number[] = [1];  

  

  public scheduleView : string = "Month";  

  public resourceDataManager: DataManager = new DataManager({  

    url: 'http://localhost:54738/Home/LoadResourceData',  

    adaptor: new UrlAdaptor  

  });  

  

  public querySource: Query = new Query().take(1);  

  private dataManger: DataManager = this.dataManger = new DataManager({  

    url: 'http://localhost:54738/Home/LoadData', // Here pass your REST WEB API load data  

    crudUrl: 'http://localhost:54738/Home/UpdateData',  

    adaptor: new UrlAdaptor  

    // headers: [{ Authorization: `Bearer ${sessionStorage.getItem("sessionTokenName")}` }]  

  });  

  

  public group: GroupModel = { resources: ['Groups'] };  

  public allowMultiple: Boolean = true;  

  public eventSettings: EventSettingsModel = {  

    dataSource: this.dataManger  

  };  

    

  ngOnInit(): void {  

  

  }  

  

  public onPopupOpen(args:any){  

  

  }  

  

  public onNavigate(args: any) {  

    this.scheduleObj.resources[0].query = new Query().addParams("value",args.value.toString()).take(args.value.length);  

    this.scheduleObj.resources[0].dataSource = this.resourceDataManager;  

  }  

}  

 

Service Project: 

 

public JsonResult LoadResourceData(Filter filter) 

{ 

    string[] selectedResource = new string[10]; 

    List < ScheduleResourceData > data = new List<ScheduleResourceData>(); 

    if (filter.value != null && filter.value != "") { // This code block will execute when selecting more groups  

        selectedResource = filter.value.Split(','); 

        for (int i = 0; i < selectedResource.Length; i++) 

        { 

            var filterData = db.ScheduleResourceDatas.Where(res => res.GroupID == Convert.ToInt32(selectedResource[i])).ToList(); 

            data.Add(new ScheduleResourceData { GroupName = filterData[0].GroupName, GroupID = filterData[0].GroupID, CalendarColor = filterData[0].CalendarColor }); 

        } 

    } 

    else { // This code block will execute for the initial load  

        var filterData = db.ScheduleResourceDatas.ToList(); 

        for (int i = 0; i < filterData.Count; i++) 

        { 

            data.Add(new ScheduleResourceData { GroupName = filterData[0].GroupName, GroupID = filterData[0].GroupID, CalendarColor = filterData[0].CalendarColor }); 

        } 

    } 

    var resourceData = data.ToList().Take(filter.take); 

    return Json(resourceData, JsonRequestBehavior.AllowGet); 

} 

 

public class Filter { 

    public int take { get; set; }  

            public string value { get; set; }  

        } 

 

Also, we suggest you to refer below forum for more information. 

 

https://www.syncfusion.com/forums/139630/schedule-resource-datasource-and-query-not-working-as-expected?reply=NDJvlS  

 

UG: https://ej2.syncfusion.com/react/documentation/schedule/resources/#resource-fields  

API: https://ej2.syncfusion.com/react/documentation/api/schedule/resources/#query  

 

Kindly try with the above sample and get back to us if you need any further assistance. 

 

Regards, 

Vinitha