Insert appointment client side

[Jonathan Levy]

Hi

Are there any examples of how to add an appointment to the diary on the client side. I can add an appointment to by database using AJAX but I have to refresh the page to show the new appointment. I'd like to be able to just add it to the scheduler without refreshing the page.

Thanks
Jon

[Peter]

Hello Jonathan,

Using AJAX and calling RadScheduler's Rebind() method when you updated the database should refresh the control and display the changes.

Alternatively, you can use the new client binding feature of RadScheduler demonstrated in the following examples:

http://demos.telerik.com/aspnet-ajax/scheduler/examples/webservice/defaultcs.aspx

http://demos.telerik.com/aspnet-ajax/scheduler/examples/wcf/defaultcs.aspx


All the best,
Peter
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Jonathan Levy]

Hi Peter

I use jquery to insert the appointment into my database. The example is more than I was looking for. Is there no way of adding an appointment in javascript?

something like scheduler.add_appointment(appointment); ?

Cheers
Jon

[Peter]

Hi Jonathan,

Yes, RadScheduler's client object has an insertAppointment():
http://www.telerik.com/help/aspnet-ajax/client-side-objects-radscheduler.html

Here is an illustration of its usage:

 function onClientTimeSlotClick(sender, eventArgs) {
        var newAppointment = new Telerik.Web.UI.SchedulerAppointment();

        var startTime = eventArgs.get_targetSlot().get_startTime();

        var endTime = new Date(startTime);
        endTime.setMinutes(endTime.getMinutes() + 45);

        newAppointment.set_start(startTime);
        newAppointment.set_end(endTime);
        newAppointment.set_subject("Manually Inserted Appointment");

        sender.insertAppointment(newAppointment);
    }

Greetings,
Peter
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Jonathan Levy]

Hi Peter

I have this but it doesn't quite work. I'm in my own function so don't have access to the sender so I've tried getting the scheduler using $find(). Can you see anything that would stop it working?

var

 

newAppointment = new Telerik.Web.UI.SchedulerAppointment();

 

newAppointment.set_start(start);

newAppointment.set_end(end);

newAppointment.set_subject($.clientID(

"TextBoxSubject").val());

 

 

var scheduler = $find('<%= RadScheduler1.ClientID %>');

 

scheduler.insertAppointment(newAppointment);

[Peter]

Hi Jonathan Levy,

That looks fine to me. Have you tried this code? Does it work?


Regards,
Peter
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Gerhard]

I have a similar problem, where I want to insert an appointment on the clientside only.

The reason why I'm trying to do this is because our schedular is quite large in size with a lot of hacks and twirks, and the page itself contains a lot of different components and is quite heavy. We've tried using ajax, but every event takes a couple of seconds, which is just too slow for us to use.

I tried using the web service functions that are built in the schedule component, but it was simply too limited in functions for us to use. Instead, we came up with the idea to call our own web services through javascript. What we do is catch some of the events in javascript, call a web service, and abort the postback. This works fine when moving around or resizing appointments.

However, when deleting or inserting appointments it's not as simple. Using "sender.insertAppointment(newAppointment);" tries to make a postback, and we're trying to avoid that. We want to insert or delete on the client only - nothing else.

How do you do it on your own examples using web services, since you're able to insert or delete without postbacks?

[T. Tsonev]

Hello Gerhard,

It looks like using the client rendering independently of our predefined web services is a popular request. We like the idea and we plan to implement it in such way that the web services can be turned off completely or mixed with other data sources.

We hope to be able to complete this in time for the Q2 release, but we have other tasks planned and it might get delayed.

For the moment you might try the following workaround. You can cancel the events that are fired before making the actual web service calls - OnClientAppointmentWebServiceInserting, OnClientAppointmentsPopulating and the like. This way the appointment will be rendered, but no web service call will take place. For this to work the scheduler must be in web service mode, even if the service is not actually used. For example:

<telerik:RadScheduler             OnClientAppointmentWebServiceInserting="cancelEvent"
OnClientAppointmentsPopulating="cancelEvent"
OnClientResourcesPopulating="cancelEvent" ...>
<WebServiceSettings Path="~/SchedulerDataService.asmx" />
</telerik:RadScheduler>

function buttonClick(e)
{
    var start = new Date("2009/05/10 15:00");
    var end = new Date("2009/05/10 16:00");

    var newAppointment = new Telerik.Web.UI.SchedulerAppointment();
    newAppointment.set_start(start);
    newAppointment.set_end(end);
    newAppointment.set_subject("Test");

    var scheduler = $find('<%= RadScheduler1.ClientID %>');
    scheduler.insertAppointment(newAppointment);
}

function cancelEvent(sender, eventArgs)
{
    eventArgs.set_cancel(true);
}

I hope this helps.

Greetings,
Tsvetomir Tsonev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Marbry]

Has this been updated?  I'm trying to do the same thing, insert and update appointments on the client only and handle the changes with my own web service calls.

I haven't had any luck in preventing the post back though, I keep getting an UpdateAppointment  arg in a postback when I call updateAppointment() on the client ":__EVENTARGUMENT=%7b%22command%22%3a%22UpdateAppointment%22%2c%22appointmentID"

[Plamen]

Hi Marbry,

 
You can insert and update appointment in scenario with Web Service binding as it is done explained in this help article against the insertAppointment and updateAppointment functions.

I am attaching a sample project where the insert is done with a button click. Hope this will be helpful.

Kind regards,
Plamen
the Telerik team

[Marbry]

I would prefer not to have to rewrite everything I've done so far just to implement all that.

Are you saying there is still no way to add an appointment on the client and have it rendered without a postback or implementing that entire approach?

For instance, in the RadTreeView and other controls on the client we can call trackChanges()  ... make the desired changes via client api ... then call commitChanges() and cancel the postback as desired.  But the changes we made are still rendered on the client, and we can handle any server side updates separately as needed.  That's basically what I'm trying to achieve.

I can intercept the postback and stop that, but the changes I make via the client API are never rendered.

[Plamen]

Hi Marbry,

 
Thank you for your concern with RadControls.

Unfortunately such functionality is not supported with RadScheduler. Yet you can add and update appointments with callback instead of postback as it is done in the attached project. Please excuse us for this limitation of the control.

Greetings,
Plamen
the Telerik team

[Marbry]

I don't like having to hack the emitted HTML since it could break it, but I did get this working for now for editing an existing appointment.  But here it is in case someone else might find it useful.  It does prevent having to necessarily reload the entire page.

This is the callback function for my custom editing dialog, using radwindow.  It sets the edited values as arguments to pass them back to the parent page that contains the scheduler.

function OnEditDialogClose(sender, args)
{
    var startDate = args._argument["StartDate"];
    var endDate = args._argument["EndDate"];
    var value = args._argument["Value"];
    var apptID = args._argument["apptID"];

    var sched = $find( "<%= scheduler.ClientID %>" );

    var appt = sched._appointments.findByID(apptID);
    if (appt != null)
    {
        appt.set_start(new Date(startDate));
        appt.set_end(new Date(endDate));

        appt._domElement.title = value;

        var arr = appt._domElement.children[0].children[0].children[0].children[0].innerHTML.split("<a");
        if (arr.length == 2)
        {
            var newHTML = arr[0].replace(appt.get_subject(), value) + "<a" + arr[1];
            appt._domElement.children[0].children[0].children[0].children[0].innerHTML = newHTML;
        }

        appt.set_subject(value);
    }
}

[Plamen]

Hi Marbry,

 
Thank you for sharing your solution with the community.

Regards,
Plamen
Telerik

[Dev]

Is it possible to get the database schema for the example you attached as SQL insert statements? The provided MDF is the wrong version for attaching to my SQL server.

[Plamen]

Hello,

Here is the script that should help you generate the same table.

Hope this will be helpful.

Regards,
Plamen
Telerik

[Peter From LA]

Fast-forward to today...

Is there a way to achieve adding/editing/deleting appointments on Client-Side without the dreaded post-backs or service calls?

In some cases all we want is the pretty picture - we may have our own custom ways to get there...

 

P

[Plamen]

Hi,

Adding, editing or deleting appointments on Client-Side without the dreaded post-backs or service calls is not supported by RadScheduler.

Hope this will explain the issue.

Regards,
Plamen
Telerik

[Peter From LA]

Is there a "real" reason behind the inability to simply add/edit/delete appointments on the Client-Side, or you just have not gotten to it yet?

I would totally understand if this is of really low priority for Telerik, but what is hard for me to accept is that there is no need for it...

[Plamen]

Hi,

Thank you for sharing your opinion regarding this functionality.

 Implementing such functionality is not needed by any of the currently supported  bindings by RadScheduler but rather a custom way of inserting, updating and deleting the appointments. That is why such case is not much desired by many customers. Yet you can log such feature is our Feedback portal and explain what is the exact case you would use it so it can be consider its possible implementation for the future versions of the control.

Regards,
Plamen
Telerik

[Sean]

Hi,

I am inserting an appointment on client side that is within a for loop.  Does not matter how many appointments I insert, only the last appointment shows in the radscheduler.  Thanks for your help in advance.

 

var newAppointment = new Telerik.Web.UI.SchedulerAppointment();
var startDate = new Date(arrStartYear[0], arrStartDate[0] - 1, arrStartDate[1], arrStartTime[0], arrStartTime[1]);
var endDate = new Date(arrEndYear[0], arrEndDate[0] - 1, arrEndDate[1], arrEndTime[0], arrEndTime[1]);
var subject = results[i].AppointmentNames;
newAppointment.set_start(startDate);
newAppointment.set_end(endDate);
newAppointment.set_subject(subject);
radAppointmentScheduler.insertAppointment(newAppointment);

[Plamen]

Hi,

This is expected behavior since the insertAppointment method invokes a postback or callback and only one of the appointments is added with it. Unfortunately there is no method for inserting many appointments at the same time. In such case you can either create your own method to add appointments directly to the datasource and rebind the scheduler after that.

Regards,
Plamen
Telerik by Progress

[Sean]

Thanks Plamen,

Another question:  I am currently using a web service (asmx) that brings back a List<> object filled with appointments from sql server.  Is it possible in javascript to just bind the List<> to the radscheduler? or do I have to follow your demo and create another provider and controller?  It seems like double the work. I have bound a data table directly on server side before and just wondering if the same logic exists on client side?

Thanks

[Plamen]

Hello,

Yes, this is the recommended way for binding RadScheduler.  The only other client binding that is supported is OData binding - yet it is only supported in readonly mode.

Regards,
Plamen
Telerik by Progress

[Sean]

Hi,

I am attempting to use radscheduler set_minutesPerRow(interval) on client side.  The interval is based on user input.  When I rebind the radscheduler the time slots with the correct interval minutes flashes for a split second then all the time slots disappears, only the headers display.  Any ideas to why?

[Plamen]

Hi,

Unfortunately this property can be set only from the server. Setting it from the client is not sup[ported by the control.

Regards,
Plamen
Telerik by Progress