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. Image for the cookie policy date

Ajax data used for appointmentSettings dataSource

I am testing the ejSchedule Control.

Everything works well when I use local data as in Option 1 below.

However, when I try to use it with remote data from a AJAX call, as in Option 2, everything just stops.

I attach screen images from VisualStudio showing sample content from the local data in "EventsDataFamily.png"
and from the variable in "gEventItems.png".

NOTE:
I have used similar method for loading ajax data for the following without any problem
  categorizeSettings: {
    dataSource: gCategoryItems,
                   
  resources: [
     {
         field: "groupId",
         title: "GROUP",
         name: "Groups",
         allowMultiple: false,
         resourceSettings: {
             dataSource: gGroupItems,     

Why will it not work with appointmentSettings.dataSource ?

Thanks

Morgan



             

Option 1:
appointmentSettings: {
    dataSource: window.EventsDataFamily,
                    
Where the local data is as follows:-

window.EventsDataFamily = [
{
    Id: 100,
    Subject: "Class",
    StartTime: new Date(2014, 4, 5, 9, 00),
    EndTime: new Date(2014, 4, 5, 16, 00),
    Description: "",
    AllDay: false,
    Recurrence: true,
    RecurrenceRule: "FREQ=DAILY;INTERVAL=1;COUNT=5",
    categoryId: "1",
    groupId: 1,
    ownerId: 3  //Karl
},


Option 2:
appointmentSettings: {
    dataSource: gEventItems,

Where gEventItems is loaded from an AJAX call as follows:-

var gEventItems = null;
gEventItems = AjaxGetDataFromUrl("/api/ParentSchedulerApi/GetListOfEvents/");

I found a routine online that will convert date strings("2014-05-05T16:00:00") to javascript Date (e.g. Mon May 05 2014 16:00:00 GMT+0100 (GMT Daylight Time))
   convertDateStringsToDates(gEventItems);



function AjaxGetDataFromUrl(urlStr) {
    var thisData = null;

    $.ajax({
        url: urlStr,
        async: false,
        dataType: "text",
        error: function (xhr, ajaxOptions, thrownError) {
            alert("Save Error.\r\nURL:" + urlStr + "\r\n" + thrownError);
        },
        success: function (data) {
            thisData = $.parseJSON(data);
        }
    });

    return thisData;
}


Attachment: ScreenShots_9a1932f8.7z

5 Replies

KK Karthigeyan Krishnamurthi Syncfusion Team July 28, 2016 12:19 PM UTC

Hi Morgan, 
 
Thank you for contacting Syncfusion support. 

We suspect that appointment’s Start/End time is not processed in a correct format before rendering it in the Scheduler, which may be the cause for this issue. We have prepared a sample for loading the appointments in Scheduler via ajax post which can be download from the following location: 

In the above sample, initially empty Schedule will be rendered. When the button is clicked, appointments will be rendered in Scheduler via ajax post. Kindly refer to the following code example used in the above sample. 
<Code> 
$.ajax({ 
                url: "/Home/GetData", success: function (result) { 
                    var object = []; 
                    // 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, 
                            Recurrence: result[i].Recurrence, 
                            RecurrenceRule: result[i].RecurrenceRule 
                        } 
                    } 
                    $("#Schedule1").ejSchedule("option", "appointmentSettings.dataSource", object); // Assigns the DataSource to the Schedule control. 
                }, 
            }); 
</Code> 

Regards, 
Karthigeyan  



MO Morgan July 29, 2016 01:31 PM UTC

Thank you for your sample project. I attach an updated version that indicates the problem I am having.

You will find that I have assigned two variables.
One is the result of your controller call '/Home/GetData', the other is from my call to '/Home/GetData_Json'.
I used QuickWatch (Ctrl+D, Q) feature of VisualStudio to examine contents of two variables in the javascript function 'BtnClick()'
The structure and types of the variables 'thisData' and 'thisDataJson' are the same.
However, if I call "$("#Schedule1").ejSchedule("option", "appointmentSettings.dataSource", thisDataJson);" the programme hangs.
It works fine if I use "$("#Schedule1").ejSchedule("option", "appointmentSettings.dataSource", thisData);"

Can you see something that I am missing. As far as I can see, 'Schedule1' should display data from either variable.

Thanks

Morgan


Below is some information that might be helpful.



This is the data from thisData[0] which is the return from GetData() function in the HomeController.
-       thisData    [[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]]   Object, (Array)
+       __proto__   []  Object, (Array)
        length  8   Number
-       [0] {...}   Object
+       __proto__   {...}   Object
        AllDay         false                                                 Boolean
        Description    undefined                                             Undefined
+       EndTime        Sun May 04 2014 04:30:00 GMT+0100 (GMT Daylight Time) Object, (Date)
        Id             103                                                   Number
        Recurrence     0                                                     Number
        RecurrenceRule null                                                  Null
+       StartTime      Sun May 04 2014 03:00:00 GMT+0100 (GMT Daylight Time) Object, (Date)
        Subject        "What Happened Next?"                                 String
+       [1] {...}   Object
+       [2] {...}   Object
+       [3] {...}   Object
+       [4] {...}   Object
+       [5] {...}   Object
+       [6] {...}   Object
+       [7] {...}   Object


This is the data from thisDataJson[0] which is returned from my GetData_Json() function in the HomeController. 
Note that the names and types are identical (Ecxept for Description: My result is String yours is Undefined)
-       thisDataJson    [[object Object],[object Object]]   Object, (Array)
+       __proto__   []  Object, (Array)
        length  2   Number
-       [0] {...}   Object
+       __proto__   {...}   Object
        AllDay         false                                                 Boolean
        Description    ""                                                    String
+       EndTime        Mon May 05 2014 16:00:00 GMT+0100 (GMT Daylight Time) Object, (Date)
        Id             100                                                   Number
        Recurrence     1                                                     Number
        RecurrenceRule "FREQ=DAILY,INTERVAL=1,COUNT=5"                       String
+       StartTime      Mon May 05 2014 09:00:00 GMT+0100 (GMT Daylight Time) Object, (Date)
        Subject        "Class"                                               String

+       [1] {...}   Object








The following is an extract from HomeController.cs relating to my function 'GetData_Json()':
        public JsonResult GetData_Json()
        {
            List<SchedulerClasses.EventItem> thisEventItems = new List<SchedulerClasses.EventItem>();
            SchedulerClasses.EventItem eItem = null;

            eItem = new SchedulerClasses.EventItem();
            eItem.Id = 100;
            eItem.Subject = "Class";
            eItem.StartTime = new DateTime(2014, 5, 5, 9, 00, 00);
            eItem.EndTime = new DateTime(2014, 5, 5, 16, 00, 00);
            eItem.Description = "";
            eItem.AllDay = false;
            //eItem.Recurrence = true;
            eItem.Recurrence = 1;
            eItem.RecurrenceRule = "FREQ=DAILY,INTERVAL=1,COUNT=5";
            eItem.categoryId = "1";
            eItem.groupId = 1;
            eItem.ownerId = 3;
            thisEventItems.Add(eItem);

            eItem = new SchedulerClasses.EventItem();
            eItem.Id = 101;
            eItem.Subject = "Class - Rugby @ Wanderers";
            eItem.StartTime = new DateTime(2014, 5, 5, 16, 00, 00);
            eItem.EndTime = new DateTime(2014, 5, 5, 17, 00, 00);
            eItem.Description = "";
            eItem.AllDay = false;
            //eItem.Recurrence = false;
            eItem.Recurrence = 0;
            eItem.RecurrenceRule = "";
            eItem.categoryId = "2";
            eItem.groupId = 1;
            eItem.ownerId = 3;
            thisEventItems.Add(eItem);

            return Json(thisEventItems, JsonRequestBehavior.AllowGet);
        }

        public class SchedulerClasses
        {
            public class EventItem
            {
                // NOTE: This class is structured to be the same as following local data
                //  window.EventsDataFamily = [
                //  {
                //    Id: 100,
                //    Subject: "Class",
                //    StartTime: new Date(2014, 4, 5, 9, 00),
                //    EndTime: new Date(2014, 4, 5, 16, 00),
                //    Description: "",
                //    AllDay: false,
                //    Recurrence: true,
                //    RecurrenceRule: "FREQ=DAILY;INTERVAL=1;COUNT=5",
                //    categoryId: "1",
                //    roomId: 1,
                //    ownerId: 3
                //  },
                //
                // I had originally set Recurrence to be Boolean since the recurrence value above was 'true'
                // I have changed this to int (1=true, 0=false)

                public int Id { get; set; }
                public String Subject { get; set; }
                public DateTime? StartTime { get; set; }
                public DateTime? EndTime { get; set; }
                public String Description { get; set; }
                public Boolean AllDay { get; set; }
                //public Boolean Recurrence { get; set; }
                public int Recurrence { get; set; }
                public String RecurrenceRule { get; set; }
                public String categoryId { get; set; }
                public int groupId { get; set; }
                public int ownerId { get; set; }
            }
        }

Attachment: Sample_1cbeeb79.zip


SE Sellakumar Syncfusion Team August 1, 2016 02:06 PM UTC

Hi Morgan, 
 
Thanks for your update. 

We have checked the sample provided by you and found that in your Controller page, the appointment recurrenceRule has been defined wrongly.  

The example code is as follows: 

<Code> 

Your code: 
eItem.RecurrenceRule = "FREQ=DAILY,INTERVAL=1,COUNT=5"; 
 
Correct Format: 
eItem.RecurrenceRule = "FREQ=DAILY;INTERVAL=1;COUNT=5"; 

<Code> 

Kindly check with it and let us know if it solves your problem and also let us know if you need any further assistance on this. 
 
Regards, 
Sellakumar K 



MO Morgan August 2, 2016 07:25 AM UTC

Thank you for your help in this matter.

The incorrectly formatted 'RecurrenceRule' was the problem.

Morgan


KK Karthigeyan Krishnamurthi Syncfusion Team August 3, 2016 05:03 AM UTC

Hi Morgan, 
 
Thanks for your update. 
 
We are glad to hear that your issue has been resolved. 
 
Please let us know if you need further assistance. 
 
Regards, 
Karthigeyan 
 


Loader.
Up arrow icon