We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Does the Schedule have problems with too many appointments / resources?

Thread ID:

Created:

Updated:

Platform:

Replies:

132866 Sep 26,2017 08:34 AM UTC Oct 9,2017 11:45 AM UTC JavaScript 7
loading
Tags: ejSchedule
Paul Kocher
Asked On September 26, 2017 08:34 AM UTC

Hi!
I have some problems with the schedule. We want to use it as a roster. I have a DropDownList with some clients. As soon as the DropDownList changes I run a query which gets all shifts associated with the client.
This works for clients which don't have too many employees associated and about 40 shifts. As soon as I select an "older" client which, of course, has more employees associated to it, the query is executed successfully:
This is what is returned:
  1. [{DienstID: "c485410f-e9aa-4e0e-bca2-02c247123785",…},…]
So the query is successful but I guess there's just too many results
What's weird also is, that when I check the network tab of the dev tools in Chrome I can see that the same query is run 4 times. I added two videos to show you the problems:
The first video shows you the three queries (the ones with "GetData?Id="). They all have the same size in result, too:

This is the code I use:
$('#versorgung').ejDropDownList({
    dataSource: dataManager,
    fields: {
    text: 'FullName',
    value: 'Id'
    },
    selectedIndex: 0,
    width: '100%',
    actionComplete: function (args) {
        id = $('#versorgung').ejDropDownList('getSelectedValue');
        getMitarbeiter();
        getDienstarten();
    },
    change: function (args) {
        id = $('#versorgung').ejDropDownList('getSelectedValue');
        getMitarbeiter();
        getDienstarten();
        createSchedule();
    }
});

function createSchedule() {
    $(function () {
        var dataManager = ej.DataManager("/Dienst/GetData?Id=" + id);
        var dataManagerRes = ej.DataManager("/Dienst/GetMitarbeiterVersorgung?Id=" + id);
        ej.Schedule.Locale["de-DE"] = { Resources: "Mitarbeiter" };
        $("#dienstplan").ejSchedule({
                locale: "de-DE",
                width: "100%",
                height: "725px",
                cellWidth: "50px",
                orientation: "horizontal",
                enableLoadOnDemand: true,
                currentView: "Month",
                views: ["Month"],
                showCurrentTimeIndicator: false,
                showQuickWindow: false,
                currentDate: new Date(),
                group: {
                   resources: ["Mitarbeiter"]     
                },
                resources: [{
                      allowMultiple: true,
                      field: "MitarbeiterID",
                      title: "Mitarbeiter",
                      name: "Mitarbeiter",
                resourceSettings: {
                     dataSource: dataManagerRes,
                     text: "MaFullName",
                     id: "MitarbeiterID",
                     value: "MitarbeiterID"
                     }
                }],
               appointmentSettings: {
                    applyTimeOffset: false,
                    dataSource: dataManager,
                    id: "MitarbeiterID",
                    startTime: "Beginn",
                    endTime: "Ende",
                    description: "DienstartText",
                    subject: "DienstartAbkzg",
                    allDay: true,
                    resourceFields: "MaFullName"
               }
          });
     });
};

Do you understand why it runs the query so many times?
The second video shows you that when too many events are fetched (I think that this is the problem) they aren't displayed:



What seems to be the problem here? :<

Nevitha Ravi [Syncfusion]
Replied On September 27, 2017 04:15 PM UTC

Hi Paul, 
  
Thank you for contacting Syncfusion Support. 
  
Query1:  We suspect that multiple usage of data manager (during initial loading and within create function) could be the cause for the issue. We have achieved the same scenario using ajax which can be downloaded from the below location.  
  
 
<Code> 
function createSchedule() { 
        $.ajax({ 
            type: "POST", 
            url: "/Home/GetData", 
            contentType: "application/json; charset=utf-8", 
            data: JSON.stringify({ id: id }), 
            success: function (result) { 
                $("#Schedule1").ejSchedule({ 
                    group: { 
                        resources: ["Owners"] 
                    }, 
                    resources: [ 
                      { 
                          field: "ownerId", 
                          title: "Owner", 
                          name: "Owners", allowMultiple: false, 
                          resourceSettings: { 
                              dataSource: result.resource, 
                              text: "text", id: "id", groupId: "groupId", color: "color" 
                          } 
                      }], 
                    appointmentSettings: { 
                        dataSource: result.appoint, 
                        id: "Id", 
                        subject: "Subject", 
                        startTime: "StartTime", 
                        endTime: "EndTime", 
                        description: "Description", 
                        allDay: "AllDay", 
                        recurrence: "Recurrence", 
                        recurrenceRule: "RecurrenceRule", 
                        resourceFields: "ownerId" 
                    } 
                }); 
            } 
        }); 
    } 
 
Controller 
public JsonResult GetData(int id) 
        { 
            var appointment = db.MultipleResources.ToList(); 
            List<MultipleResource> appointmentList = appointment.ToList(); 
            appointmentList = appointment.ToList().Where(app => app.OwnerId == id).ToList(); 
            var resource = db.Owners.ToList(); 
            List<Owner> resourceList = resource.ToList(); 
            resourceList = resource.ToList().Where(res => res.id == id).ToList();// here particular appointment is filtered 
            var values = new {resource= resourceList, appoint= appointmentList }; 
            return Json(values, JsonRequestBehavior.AllowGet); 
        } 
</Code> 
  
Query2:  When more resources are rendered cell height will be adjusted which could be the cause for the issue “appointments not displayed when rendered with more resources”. We request you to set showOverflowButton property to false to overcome the issue. 
 
<Code> 
$("#Schedule1").ejSchedule({ 
            width: "100%", 
            height: "525px", 
            orientation: "horizontal", 
            currentDate: new Date(2017, 5, 5), 
            currentView: ej.Schedule.CurrentView.Workweek, 
            showOverflowButton: false, 
            enableLoadOnDemand: true 
        }); 
</Code> 
  
Regards, 
Nevitha. 
 


Paul Kocher
Replied On September 28, 2017 06:49 AM UTC

Hello Nevitha,

thanks for your answer! The suggestion to set the showOverflowButton to false fixed the problem that the appointments didn't show up.

I do have a problem with the answer for my first query though.

I followed the steps to enable LoadOnDemand in order to query the appointments everytime the date gets changed in the schedule. When I use the suggested $.ajax operation only the Id gets passed to the controller - in order for the query to work I also need "CurrentDate, CurrentView, CurrentAction" to be passed to the controller as shown here: https://help.syncfusion.com/js/schedule/data-binding#loading-data-on-demand

Is there a way to include these parameters in the initial query? Or how would I be able to get this working?


Karthigeyan Krishnamurthi [Syncfusion]
Replied On September 29, 2017 08:34 AM UTC

Hi Paul, 
 
Thanks for your update. 
 
We have preapred the LOD CRUD sample to pass extra parameter which can be download from the below location. 
 
<Code> 
public JsonResult GetData(string CurrentView, DateTime CurrentDate, string CurrentAction, string value) 
{ 
    var data = AppointmentRepository.FilterAppointment(CurrentDate, CurrentAction, CurrentView, value); 
    BatchDataResult result = new BatchDataResult(); 
    result.result = data; 
    result.count = db.Appointments.ToList().Count > 0 ? db.Appointments.ToList().Max(p => p.Id) : 1; 
    return Json(result, JsonRequestBehavior.AllowGet); 
} 
 
function onChange(args) { // this function will be called when the check box is clicked 
    var name; 
    if (args.isChecked) 
        name = args.model.text; 
    else 
        name = null; 
    var obj = $("#Schedule1").data("ejSchedule"); // object for schedule is created 
    var dataManager1 = ej.DataManager({ 
        url: '@Url.Action("GetData","Home")', 
        crudUrl: '@Url.Action("Batch", "Home")', 
        crossDomain: true 
    }); 
    var query = ej.Query().addParams("value", name); // By using addParams we can send the parameter to controller for filtering 
    if (!ej.isNullOrUndefined(obj)) 
        obj.option("appointmentSettings.query", query); // here we are assigning the query to schedule 
} 
</Code> 
 
In the above sample, during initial rendering, ‘value’ parameter will be null and no appointment will be rendered in Scheduler. When the Nancy checkbox is clicked, Nancy name will be retrieved in ‘value’ and one appointment will be rendered.  
 
Regards, 
Karthigeyan 




Paul Kocher
Replied On October 2, 2017 10:23 AM UTC

Hello Karthigeyan,

thank you for the explanation and the sample! 

I tried to customize that so it works with my requirement. 

One thing is strange though, the controller successfully returns appointments but they don't show up in the schedule anymore.

The problem seems to be this line: schObj.option("appointmentSettings.query", query); // here we are assigning the query to schedule

It just doesn't render the appointments anymore...It feels like it messes up the appointmentFields or something? :|


Nevitha Ravi [Syncfusion]
Replied On October 3, 2017 03:25 PM UTC

Hi Paul, 
  
Thanks for your update. 
  
We have suspect the below causes for the reported issue “appointments not rendering”, kindly check the below cases in your project. 
  
  1. Kindy ensure that id type used in the resource collection and appointment collection (which holds resource value) is of same type (string or int).
  2. If AJAX post is used, start and end time should be converted manually in AJAX success as it will be returned in the below format.
  
 
  
Kindly use the below highlighted code to convert the appointments start and end time to standard format. 
  
<Code> 
    $.ajax({ 
                type: "POST", 
                url: "WebService1.asmx/GetTask", 
                contentType: "application/json; charset=utf-8", 
                dataType: "json", 
                success: function (result) { 
                    var object = []; 
                    result = result.d; 
                    // Stores the result values to the object collection. 
                    for (var i = 0; i < result.length; i++) { 
                        object[i] = { 
                            Id: result[i].Id, 
                            Subject: result[i].Subject, 
                            StartTime: new Date(result[i].StartTime.match(/\d+/)[0] * 1), 
                            EndTime: new Date(result[i].EndTime.match(/\d+/)[0] * 1), 
                            Description: result[i].Description, 
                            AllDay: result[i].AllDay, 
                        } 
                    } 
                    $("#Schedule1").ejSchedule("option", "appointmentSettings.dataSource", object); // Assigns the DataSource to the Schedule        control. 
                }, 
            }); 
</Code> 
  
  
Regards, 
Nevitha. 
 


Paul Kocher
Replied On October 6, 2017 01:40 PM UTC

Hello Nevitha,

unfortunately I couldn't get this working :|

I did however put together an example project which shows you the problem I'm facing. 

As soon as I try to filter an appointment the appointments don't show up on the schedule anymore. I also tried the ajax post you suggested but this failed, too.

So if the project works for you, just let the schedule load and you will notice everything is ok when you change the "Clients" DropDownList but as soon as you select an Employee it stops working.

I hope you can tell me what the issue is.


Addition: What I also would like to do is hide the unselected resources in the schedule so maybe you can give me a hint how to do that, too :)

Thanks in advance

Paul


Attachment: ScheduleProblem_3bdd1afd.zip

Karthigeyan Krishnamurthi [Syncfusion]
Replied On October 9, 2017 11:45 AM UTC

Hi Paul, 
 
Thanks for sharing sample with us. 
 
We have created an incident for your last update and we request you to have a follow up with the below incident link for further update on this. 
 
Regards,
 
Karthigeyan 
 
 
 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;