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

Binding a data source to the Schedule control using jquery

Hi,

After the Schedule has been rendered on the webpage, I would like to refresh the data using jquery and bind the results to the Scheduler.

Is this possible to do with this control? 

Thanks

7 Replies

KK Karthigeyan Krishnamurthi Syncfusion Team May 27, 2016 10:33 AM UTC

Hi Mahindra,   
   
Thank you for contacting Syncfusion support.   
   
Yes, it is possible to bind the refreshed data results to the Scheduler for which we have prepared the sample that can be download from the following location:   
   
In the above sample, we have initially rendered the single appointment into Schedule control. When the button named “Click Me” is clicked, more appointments will be retrieved from the database and rendered into Schedule. We have used ajax concept for binding the result into Scheduler.   
   
If we have misunderstood your requirement or else if the above sample doesn’t satisfy your requirement, kindly share the following information with us to proceed further.   
1.       Code example/sample (if possible).   
2.       Image or vide demo explaining your requirement.   
   
Also, please let us know, if you require any further assistance on this.   
   
Regards,   
Karthigeyan   
 



MM Mahindra Morar June 15, 2016 11:10 AM UTC

Thank you for your example. its just what I wanted.

Can your example be extend to use jquery to change a resource group and reload the scheduler?

Thanks 


KK Karthigeyan Krishnamurthi Syncfusion Team June 16, 2016 07:11 AM UTC

 
Thanks for your update.     
 
We have prepared the sample for your requirement Need to change a resource group and reload the scheduler” which can be download from the following location:   
 
In the above sample we have initially rendered the default Scheduler with two radio buttons named “Hotel Room” and “Medical Room”. When any one of the radio button is selected, Scheduler is refreshed with the corresponding resource group. Kindly refer to the following code example used in the above sample.   
<Code> 
function OnChange(args) {// this function will be called when the radio button is clicked 
        if (args.model.text == "Hotel Room") { 
            $("#Schedule1").ejSchedule({ 
                group: { 
                    resources: ["Rooms", "Owners"] 
                }, 
                resources: [ 
                { 
                    field: "roomId", 
                    title: "Room", 
                    name: "Rooms", allowMultiple: false, 
                    resourceSettings: { 
                        dataSource: [ 
                      { text: "Room1", id: 1, color: "#cb6bb2" }, 
                        { text: "ROOM2", id: 2, color: "#56ca85" }], 
                        text: "text", id: "id", color: "color" 
                    } 
                }, { 
                    field: "ownerId", 
                    title: "Owner", 
                    name: "Owners", allowMultiple: true, 
                    resourceSettings: { 
                        dataSource: [ 
                        { text: "Nancy", id: 11, groupId: 1, color: "#ffaa00" }, 
                        { text: "Steven", id: 12, groupId: 2, color: "#f8a398" }, 
                        { text: "Michael", id: 13, groupId: 1, color: "#7499e1" } 
                        ], 
                        text: "text", id: "id", groupId: "groupId", color: "color" 
                    } 
                }], 
 
            }); 
        } 
    } 
</Code> 

Regards, 
Karthigeyan 



MM Mahindra Morar June 16, 2016 10:13 AM UTC

Hi, 

I am trying to populate the resource from a ajax request to a URL as below:

  $.ajax({
            type: "GET",
            url: "/AllocationMaintenance/GetResources?prdgrp=" + prodGroup,
            dataType: "json",
            async: false,
            success: function (resp)
            {               
                var object = [];
                for (var i = 0; i < resp.length; i++)
                {
                    object[i] = { Id: resp[i].Id, Text: resp[i].Text }
                }
                $("#Schedule1").ejSchedule("option", "resourceSettings.dataSource", object);    

            },
            error: function (e)
            {
                alert('Error: ' + e);
            }
        });

But it doesn't seem to work, Are you able to review this code or provide an example on how to do it.
Thanks.


KK Karthigeyan Krishnamurthi Syncfusion Team June 17, 2016 12:34 PM UTC

Hi Mahindra,   
   
We have prepared the sample for your requirement “Dynamic resource group rendering via ajax post” which can be download from the following location:   
   
In the above sample we have initially rendered the default Scheduler with two radio buttons named “Hotel Room” and “Medical Room”. When any one of the radio button is selected, Scheduler is refreshed with the corresponding resource group. Data source for resource group are assigned from controller via ajax post. Kindly refer to the following code example used in the above sample. 
<Code> 
if (args.model.text == "Hotel Room") { 
            $.ajax({ 
                type: "POST", 
                url: "/Schedule/Resgroup", 
                data: { name: args.model.text }, 
                dataType: "json", 
                success: function (result) { 
                    $("#Schedule1").ejSchedule({ 
                        group: { 
                            resources: ["Rooms", "Owners"] 
                        }, 
                        resources: [ 
                        { 
                            field: "roomId", 
                            title: "Room", 
                            name: "Rooms", allowMultiple: false, 
                            resourceSettings: { 
                                dataSource: result.rooms, // assigning the data source from controller 
                                text: "text", id: "id", color: "color" 
                            } 
                        }, { 
                            field: "ownerId", 
                            title: "Owner", 
                            name: "Owners", allowMultiple: true, 
                            resourceSettings: { 
                                dataSource: result.owners, // assigning the data source from controller 
                                text: "resText", id: "resId", groupId: "groupid", color: "rescolor" 
                            } 
                        }], 
 
                    }); 
                }, 
            }); 
        } 
</Code> 

Regards, 
Karthigeyan 



MM Mahindra Morar June 23, 2016 07:37 AM UTC

Hi,

I have modified your example that you kindly supplied in the previous thread to request the appoints using an Ajax call in the same function to retrieve the resources.
However in doing so, no appointments are shown on the grid when selecting any rooms from the option control.

Would you please review the attached file to see if I am doing something wrong.

Thanks


Attachment: Dynamic_resource_gruping_change_9af08ea4.zip


KK Karthigeyan Krishnamurthi Syncfusion Team June 24, 2016 10:58 AM UTC

   
Thanks for your update.   
   
While rendering the resource dynamically in Scheduler, it is not necessary to re-render the appointments in Scheduler, as it will get automatically mapped to their corresponding rooms and owner. You just need to externally map the corresponding resource fields. In the provided sample, room and owner id of the appointments are not mapped correctly which is the cause for the issue “Appointments are not displaying in Scheduler”. If you wish to reload the appointments during dynamic rendering of the resources, kindly map the room and owner id in the ajax post as shown below.   
<Code> 
$.ajax({ 
            type: "GET", 
            dataType: "json", 
            url: "/Schedule/GetAppointments", 
            success: function (resp) 
            { 
                var object = []; 
                for (var i = 0; i < resp.length; i++) 
                { 
                    object[i] = { Id: resp[i].Id, Subject: resp[i].Subject, StartTime: new Date(resp[i].StartTime.match(/\d+/)[0] * 1), EndTime: new Date(resp[i].EndTime.match(/\d+/)[0] * 1), AllDay: resp[i].AllDay, Recurrence: resp[i].Recurrence, RecurrenceRule: resp[i].RecurrenceRule, RoomId: resp[i].RoomId, OwnerId: resp[i].OwnerId } 
                } 
                $("#Schedule1").ejSchedule("option", "appointmentSettings.dataSource", object);     // assign the datasource to the schedule control 
 
            }, 
            error: function (e) 
            { 
                alert('Error: ' + e); 
            } 
        }); 
</Code> 

We have modified the sample which can be download from the following location: 

Regards, 
Karthigeyan 


Loader.
Up arrow icon