Drag and Drop onto RadScheduler

[Hrushikesh Mokashi]

Hi All,

I have on asp table where I am filling appointments dynamically.
I want to give user facility to drag that appointment and drop onto a radscheduler.
After user drops that appointment onto Radscheduler that appointment's datetime should get set to the new date time where tit is dropped.

How can I achieve this?


Best Regards,.
Hrushikesh.

[Atanas Korchev]

Hi Hrushikesh Mokashi,

I suggest you check this online example which demonstrates drag and drop between RadGrid and RadScheduler.

Sincerely yours,
Albert
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Hrushikesh Mokashi]

Hi Albert,

Thank you for your reply.

I gone through the code.
It is doing transfer from radgrid to radscheduler.

I want ot do it as from' Div' tag to  radscheduler.

What I have achieved is,
1. Dragging item from 'Div' tag
2. Fetching the DateTime where User has dropped the item.

Now, I want to show the item on radscheduler. For taht I would require server side code.
I can use __doPostback but it will refresh the whole page.
I want only radscheduler to be refreshed as there are many controls on it.

Can you please help me out?
Below is my code.

<script type="text/javascript">

 

 

function

fnGetInfo(divid3)

 

{

 

 

var c = event.srcElement.id;

 

 

var htmlElement = event.srcElement; //eventArgs.get_destinationHtmlElement

 

 

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

 

 

 

 

// The row was dropped over the scheduler appointment area

 

 

// Find the exact time slot and save its unique index in the hidden field

 

 

var timeSlot = scheduler._activeModel.getTimeSlotFromDomElement(htmlElement);

 

$get(

"TargetSlotHiddenField").value = timeSlot.get_index();

 

 

 

// The HTML needs to be set in order for the postback to execute normally

 

// __doPostback()

}

 

</script>

<

telerik:RadScheduler ID="radSchedulCalender" runat="server" DataEndField="Endtime" ondragenter="fnCancelDefault()" ondrop="fnGetInfo1(this.id)" ondragover="fnCancelDefault()" />

 

[Atanas Korchev]

Hello Hrushikesh Mokashi,

You can use RadAjaxManager in this case. Configure it so the initiator control is the ajax manager itself and the updated control is the scheduler. You can initiate an ajax update by calling the ajaxRequest client-side method of the ajax manager. Then you need to implement the required logic inside the AjaxRequest server-event. Here is a quick example:

Ajax manager configuration:

<telerik:RadAjaxManager runat="Server" ID="RadAjaxManager1" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
<AjaxSettings>
    <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
        <UpdatedControls>
            <telerik:AjaxUpdatedControl ControlID="RadScheduler1" />
        </UpdatedControls>
    </telerik:AjaxSetting>
</AjaxSettings>

</telerik:RadAjaxManager>

code to initiate the ajax request from javascript:

var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
ajaxManager.ajaxRequest();

server-side code should be located in the AjaxRequest server event:
        protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
        {
            //Update the scheduler here
        }

I hope this helps,
Albert
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Hrushikesh Mokashi]

Hi Albert ,

Thank you for your reply.

I tried with the code but it failed as my Scheduler is on Content page so I am using RadAjaxManagerProxy.

Temporarily I am using following code to execute postback.

var

Scheduler = $find("ctl00_Content_radSchedulCalender");

 

 

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

 

 

////// //var app = Scheduler._appointments.findByID(str[0]);

 

 

////// //__doPostBack('RadScheduler1', 'DataBinding')

 

newAppointment.set_start(

new Date);

 

newAppointment.set_end(

new Date);

 

newAppointment.set_subject(

"Manually Inserted Appointment");

 

Scheduler.insertAppointment(newAppointment);

Server side -

Protected

Sub radSchedulCalender_AppointmentInsert(ByVal sender As Object, ByVal e As Telerik.Web.UI.SchedulerCancelEventArgs) Handles radSchedulCalender.AppointmentInsert

 

 

Dim s As String = "" 

 

 

End Sub

 

And this is working fine.

But can you please let me know if I want to use RadAjaxmanagerProxy (which is on content page. radAjaxManager is on Master page) to go to server side with refreshing only target control how can I do that?


Best Regards,
Hrushikesh.

[Atanas Korchev]

Hi Hrushikesh Mokashi,

Handling the AjaxRequest using RadAjaxManagerProxy is a bit tricky. You should use RadAjaxManager.GetCurrent(Page) to get the parent RadAjaxManager and subscribe to its AjaxRequest event from codebehind using the AddHandler function. On the client side you should get the RadAjaxManager like this:

var ajaxManager = $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>");

However I recommend you just wrap the scheduler inside RadAjaxPanel and use your current implementation.

All the best,
Albert
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[piyush]

Hi admin 

My rad scheduler drag drop appointment not working.

I want to Drag Drop not use any other Source.

I only Drag and Drop Same Appointment to other place.

[Ivan Danchev]

Hello,

The Appointment Drag and Drop can be disabled if the Scheduler's AllowEdit property is set to "false" or its ReadOnly property is set to "true". If these two properties are properly set I would suggest subscribing to the control's OnClientAppointmentMoving event and check whether it fires and whether there are any js errors when you try to drag and drop the Appointment. 

Regards,
Ivan Danchev
Telerik