This is a migrated thread and some comments may be shown as answers.

Insert appointment client side

25 Answers 498 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Jonathan Levy
Top achievements
Rank 1
Jonathan Levy asked on 22 Apr 2009, 02:48 PM
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

25 Answers, 1 is accepted

Sort by
0
Peter
Telerik team
answered on 22 Apr 2009, 03:24 PM
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.
0
Jonathan Levy
Top achievements
Rank 1
answered on 22 Apr 2009, 03:34 PM
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
0
Peter
Telerik team
answered on 24 Apr 2009, 01:11 PM
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.
0
Jonathan Levy
Top achievements
Rank 1
answered on 30 Apr 2009, 02:29 PM
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);

0
Peter
Telerik team
answered on 01 May 2009, 09:05 AM
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.
0
Gerhard
Top achievements
Rank 1
answered on 09 May 2009, 05:07 PM
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?
0
T. Tsonev
Telerik team
answered on 12 May 2009, 03:44 PM
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.
0
Marbry
Top achievements
Rank 1
answered on 30 Jan 2013, 05:54 PM
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"
0
Plamen
Telerik team
answered on 04 Feb 2013, 01:11 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Marbry
Top achievements
Rank 1
answered on 04 Feb 2013, 02:27 PM
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.
0
Plamen
Telerik team
answered on 06 Feb 2013, 01:09 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Marbry
Top achievements
Rank 1
answered on 17 Jun 2013, 04:40 PM
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);
    }
}
0
Plamen
Telerik team
answered on 20 Jun 2013, 08:54 AM
Hi Marbry,

 
Thank you for sharing your solution with the community.

Regards,
Plamen
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Dev
Top achievements
Rank 1
answered on 28 Nov 2013, 04:32 PM
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.
0
Plamen
Telerik team
answered on 03 Dec 2013, 02:04 PM
Hello,

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

Hope this will be helpful.

Regards,
Plamen
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Peter From LA
Top achievements
Rank 1
answered on 27 Oct 2015, 11:02 PM

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

0
Plamen
Telerik team
answered on 28 Oct 2015, 06:07 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Peter From LA
Top achievements
Rank 1
answered on 28 Oct 2015, 07:13 AM

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...

0
Plamen
Telerik team
answered on 02 Nov 2015, 07:11 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Sean
Top achievements
Rank 1
answered on 07 Dec 2016, 04:47 PM

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);

0
Plamen
Telerik team
answered on 08 Dec 2016, 08:55 AM
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
Telerik UI for ASP.NET AJAX is ready for Visual Studio 2017 RC! Learn more.
0
Sean
Top achievements
Rank 1
answered on 09 Dec 2016, 05:15 PM

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

0
Plamen
Telerik team
answered on 12 Dec 2016, 07:08 AM
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
Telerik UI for ASP.NET AJAX is ready for Visual Studio 2017 RC! Learn more.
0
Sean
Top achievements
Rank 1
answered on 15 Dec 2016, 02:10 PM

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?

0
Plamen
Telerik team
answered on 19 Dec 2016, 11:33 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Scheduler
Asked by
Jonathan Levy
Top achievements
Rank 1
Answers by
Peter
Telerik team
Jonathan Levy
Top achievements
Rank 1
Gerhard
Top achievements
Rank 1
T. Tsonev
Telerik team
Marbry
Top achievements
Rank 1
Plamen
Telerik team
Dev
Top achievements
Rank 1
Peter From LA
Top achievements
Rank 1
Sean
Top achievements
Rank 1
Share this question
or