Schedule Resource DataSource and Query not working as expected.

[Ameet]

Here is what I the business requirement is -

• On the page there is dropdownlist that displays all the groups the user is following. It has schedule that can be displayed in groups.
  
• By default when the page loads it should just pull up the first group from the dropdownlist and display the calendar schedule for that group.
• The user can select multiple groups and the schedule will display the additional groups.

Here is what I have done so far -

HTML page -

[mode]='mode' [popupHeight]='popHeight' [showDropDownIcon]='true' showSelectAll='false' [filterBarPlaceholder]='filterPlaceholder'

[value]="value" (change)="onChange($event)">

[(currentView)]="scheduleView" (popupOpen)="onPopupOpen($event)" >

textField='GroupName' idField='GroupID' colorField='CalendarColor' [query]='querySource'>

Code is as follows -

public resourceDataManager: DataManager = new DataManager({

url: 'MyURL',

adaptor: new UrlAdaptor,

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

});

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

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

url: 'MyURL', // Here pass your REST WEB API load data

adaptor: new UrlAdaptor,

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

});

I was expecting based on the querySource it would just get the first record from the result set.

Your help is greatly appreciated.

Thanks,

Ameet

SIGN IN To post a reply.

[Arulraj A]

Hi Ameet, 

Thanks for contacting Syncfusion support. 

We have prepared the sample with the shared code example and tried to achieve your requirement, which can be downloaded from the following location. 

Angular Sample [Front End]:  http://www.syncfusion.com/downloads/support/forum/139630/ze/ScheduleGroupFiltering7749199  

Service Project [Back End]: http://www.syncfusion.com/downloads/support/forum/139630/ze/ScheduleCRUDWithResources1130900672  

In the above sample, we have used the multiselect control to select the resources (i.e. group). Hence, you can select multiple option (i.e. groups) from the displaying option. Also, we have filtered the resources based on the query (i.e. Take) value in the server side. Initially displayed with the first group and then based on the selected option in the multiselect control displaying two or three groups in the Schedule control. Please refer to the following code example and screenshots of the working scenario. 

Code Example: 

Angular Code:- 

app.component.html page: 

<div> 

    <ejs-multiselect id='groups' [dataSource]='resourceDataSource' [fields]='fields' [mode]='mode' [popupHeight]='popHeight' [showDropDownIcon]='true' showSelectAll='false' [filterBarPlaceholder]='filterPlaceholder' 

    [value]="value" (change)="onChange($event)"></ejs-multiselect> 

</div> 

<div> 

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

        [eventSettings]="eventSettings" [(currentView)]="scheduleView" (popupOpen)="onPopupOpen($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> 

</div> 

app.component.ts page: 

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 

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

  }); 

 

  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 onChange(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 – Controller Page: 

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; } 

        } 

Screenshot: 

 

Initial Rendering: 

 

 

Selecting multiple groups: 

 

 

 

Note: Focus out from the multiselect control after selecting the group to trigger the change event properly and take effect of rendering selected groups in the Schedule. Also, run the Service project before running the angular sample to load the appointment and resource data properly. 

Kindly try with the above sample and suggestion. If we misunderstood your requirement and if you still facing any issues on this revert us with some more information about requirement like screenshot or complete schedule rendering code example or reproduce the issue in the above sample. The information provided by you will be more helpful for us to analyze your requirement further and provide you the possible solution. 

 

Regards, 

Arulraj A 

[Ameet]

This is working perfectly now.

Thanks for your help.

Regards,

Ameet

[Nevitha Ravi]

Hi Ameet,  

 

Thanks for your update.  

 

We are glad that our solution works at your end. Please let us know if you need any assistance.  

 

Regards,  

Nevitha