Ajax data used for appointmentSettings dataSource

[Morgan]

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

[Karthigeyan Krishnamurthi]

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: 

http://www.syncfusion.com/downloads/support/forum/125171/ze/Sample1509908715 

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  

[Morgan]

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

[Sellakumar]

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 

[Morgan]

Thank you for your help in this matter.

The incorrectly formatted 'RecurrenceRule' was the problem.

Morgan

[Karthigeyan Krishnamurthi]

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