1. Home
  2. Forum
  3. Angular - EJ 2
  4. Schedule Resource DataSource and Query not working as expected.

Schedule Resource DataSource and Query not working as expected.

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

3 Replies
AA Arulraj A Syncfusion Team September 5, 2018 11:15 AM UTC

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. 


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. 
 
Arulraj A 


AM Ameet September 12, 2018 08:44 PM UTC

This is working perfectly now.

Thanks for your help.

Regards,

Ameet

NR Nevitha Ravi Syncfusion Team September 13, 2018 06:32 AM UTC

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  



Loader.
Up arrow icon