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

RadScheduler - drag and drop

11 Answers 181 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Mehmet
Top achievements
Rank 1
Mehmet asked on 18 Sep 2014, 01:18 PM
hi,

I am trying to extract the info of an attribute once the drop action is done.

I tried doing "var selectedStaffID = scheduler.getAppointmentFromDomElement(htmlElement).get_attributes("StaffID");"
However, that didn't help me.
How can i get the data of the scheduler's attribute on a spot where the appointment is dropped ?
thank you
01.function rowDropping(sender, eventArgs) {
02.                    // Fired when the user drops a grid row
03.                    var htmlElement = eventArgs.get_destinationHtmlElement();
04.                    var scheduler = $find('<%= RadScheduler2.ClientID %>');
05. 
06.                    if (isPartOfSchedulerAppointmentArea(htmlElement)) {
07.                         
08.                        // The row was dropped over the scheduler appointment area
09.                        // Find the exact time slot and save its unique index in the hidden field
10.                        var timeSlot;
11.                        //var selectedStaffID = scheduler.getAppointmentFromDomElement(htmlElement).get_attributes("StaffID");
12.                        //alert(selectedStaffID);
13.                        if ($telerik.$(htmlElement).parents(".rsApt").length != 0)
14.                            timeSlot = scheduler.getAppointmentFromDomElement(htmlElement).get_timeSlot();
15.                        else
16.                            timeSlot = scheduler._activeModel.getTimeSlotFromDomElement(htmlElement);
17.                        $get("<%=TargetSlotHiddenField.ClientID %>").value = timeSlot.get_index();
18. 
19.                        // The HTML needs to be set in order for the postback to execute normally
20.                        eventArgs.set_destinationHtmlElement("<%=TargetSlotHiddenField.ClientID %>");
21.                    }
22.                    else {
23.                         
24.                        // The node was dropped elsewhere on the document
25.                        eventArgs.set_cancel(true);
26.                    }
27.                }

11 Answers, 1 is accepted

Sort by
0
Plamen
Telerik team
answered on 19 Sep 2014, 06:13 AM
Hello Mehmet,

In such scenarios we recommend using .get_attributes().getAttribute("StaffID") as it is documented in this help topic.

Hope this will help you solve the issue.

Regards,
Plamen
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Mehmet
Top achievements
Rank 1
answered on 19 Sep 2014, 06:27 AM
Hi Plamen,

No luck.

timeSlot = scheduler._activeModel.getTimeSlotFromDomElement(htmlElement);
                           var selectedStaff = scheduler.get_attributes().getAttribute("StaffID");
                            alert(selectedStaff);

selectedStaff comes up "undefined"..  
what else could I try ?
thank you

0
Plamen
Telerik team
answered on 19 Sep 2014, 10:30 AM
Hi Mehmet,

It looks like there is some kind of misunderstanding. 

TimeSlot objects do not have attributes and only the appointments do so the result you are getting is expected. You can refer to this help topic where more information about the timeslot client object is provided.

Regards,
Plamen
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Mehmet
Top achievements
Rank 1
answered on 20 Sep 2014, 05:09 AM
Hi,

Yes, true. However, my scheduler is grouped by the staff list and once I drag the appointment and drop it onto scheduler, I am taking the date-time and I have to retrieve the information of which staff that I drop the appointment on. I am working on the example that you have given me which is :

var resource = null;
if (timeSlot.get_resource)
resource = timeSlot.get_resource();

I dont know how to receive the staff that I drop the appointment on it as the scheduler is grouped by the staff list. Staff List is described as a resource for the scheduler. Hope I could have explained better. 

I have attached a screenshot where you can see that I drag the appointment from the bottom grid and drop on to the scheduler above. Once I drop it I have to know what date - time (which I know) and which staff that I allocate for as you can see the staff name on the left hand side.
Appreciate your time and help..

0
Plamen
Telerik team
answered on 25 Sep 2014, 05:04 AM
Hello Mehmet,

In a scenario when RadScheduler is GroupedBy resource you can get the resource of the timeslot client object as in the code that you shared (get_resource)and here below if how you can get the text, key and type of this resource:
timeSlot.get_resource().get_text();
timeSlot.get_resource().get_type();
timeSlot.get_resource().get_key();

Hope this information will help you solve the issue.

Regards,
Plamen
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
asanka
Top achievements
Rank 1
answered on 28 Jul 2015, 06:51 AM

Hi,

I have a small problem drag and drop resources in to all day appointments. Since that facility not enable on All day area.But it's working fine in other calendar area.How can I overcome this issue?I'm using CustomScheduleViewDragDropBehavior  inside DragDropBehavior ,

<telerik:RadScheduleView.DragDropBehavior>
                                    <moduleCalendar:CustomScheduleViewDragDropBehavior />
                                </telerik:RadScheduleView.DragDropBehavior>
                                <telerik:RadScheduleView.ViewDefinitions><telerik:RadScheduleView.DragDropBehavior>.

Thanks

0
Nasko
Telerik team
answered on 30 Jul 2015, 02:08 PM
Hello Asanka,

From the provided description of your scenario we assume your question is about WPF or Silverlight's RadSheduleView. If that is the case currently it is not possible to drag or drop Appointments inside the AllDay area of RadScheduleView

However, if this information does not answer completely your question we suggest you to post it either to the WPF or Silverlight forum. We will also need some more detailed information about the desired by you functionality and the behavior you are currently observing. Thus we could be able to provide you with a proper solution if possible.

Hopes this helps.

Regards,
Nasko
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
asanka
Top achievements
Rank 1
answered on 03 Aug 2015, 04:56 AM

Hi Nasko,

Thank you very much for your reply.Yes.My Question is about Silverlight's RadSheduleView. Actually I'm not drag and drop appointments in to all day area.What I'm doing is drag and drop other resources (People,Locations etc.) in to one of the appointment in all day area.For this I'm using telerik:RadScheduleView.DragDropBehavior as I mentioned above and it's not enable for all day area appointments.But It's working fine normal appointments.Is there any different way to activate that facility?

Here with attached the fully details of my RadSheduleView code.

 

     <telerik:RadScheduleView           
            SnapAppointments="True"
            Name="radScheduleDetails"
            NavigationHeaderVisibility="Collapsed"  
            SelectedSlot="{Binding SelectedSlot,Mode=TwoWay}"
            ActiveViewDefinitionIndex="{Binding ActiveViewDefinitionIndex,Mode=TwoWay}"  
            DragVisualTemplate="{StaticResource DragVisualContentTemplate}"
            DragDropHighlightStyle="{StaticResource CustomDragDropHighlightStyle}"
            EditAppointmentDialogStyle="{StaticResource CustomEditAppointmentDialogStyle}"           
            Grid.Column="1" MouseRightButtonUp="RadScheduleDetails_OnMouseRightButtonUp"
            Grid.Row="0" MinAppointmentWidth="1"
            Grid.RowSpan="2"     
            VisibleRangeChanged="radScheduleDetails_VisibleRangeChanged"
            ToolTipTemplate="{StaticResource AppointmentToolTipTemplate}"
            AppointmentsSource="{Binding Appointments,Mode=TwoWay}"                
            SelectedAppointment="{Binding SelectedAppointment, Mode=TwoWay}"
            AppointmentSelectionChanged="radScheduleDetails_AppointmentSelectionChanged"
            AppointmentItemContentTemplate="{StaticResource templateCalAppointment}"
            ShowDialog="RadScheduleDetails_OnShowDialog"              
            DialogClosing="RadScheduleDetails_OnDialogClosing"
            AppointmentEdited="RadScheduleView_AppointmentEdited"
            GroupDescriptionsSource="{Binding GroupDescriptions,Mode=TwoWay}"
            ResourceTypesSource="{Binding ResourceTypes,Mode=TwoWay}"
            VisibleRangeChangedCommand="{Binding VisibleDateRangeChanged}"
            VisibleRangeChangedCommandParameter="{Binding VisibleRange,RelativeSource={RelativeSource Self}}"
            CurrentDate="{Binding ViewCurrentDate,Mode=TwoWay}"                         
            SpecialSlotsSource="{Binding WorkingHours}"                
            TimeRulerItemStyleSelector="{StaticResource TimeRulerItemStyleSelector}"      
            ShowCurrentTimeIndicator="True"                 
            MinTimeRulerExtent="600" MaxTimeRulerExtent="10000"    ShowAppointmentDeleteButton="False"             
            AppointmentEditing="radScheduleDetails_AppointmentEditing"
                AppointmentStyleSelector="{StaticResource AppointmentItemStyleSelector}">

                                <telerik:RadScheduleView.DragDropBehavior>
                                    <moduleCalendar:CustomScheduleViewDragDropBehavior />
                                </telerik:RadScheduleView.DragDropBehavior>
                                <telerik:RadScheduleView.ViewDefinitions>

                                    <telerik:DayViewDefinition
                        x:Name="DayViewDefination" TimerulerMajorTickStringFormat="{}{0:HH}:{0:mm}"
                                               EnableSmallAppointmentRendering="True"                                        
                                               ShowWeekGroupHeaders="False"                                             
                                               GroupFilter="{Binding GroupFilter,Mode=TwoWay}"                       
                                               MinTimeRulerExtent="1600"         
                                               MaxTimeRulerExtent="1600"                                                 
                                               MajorTickLength="1h"
                                               MinorTickLength="30min"      
                                               ShowTimeRuler="True"   
                                               ShowAllDayArea="True"
                        />



                                    <telerik:WeekViewDefinition ShowWeekGroupHeaders="False"      TimerulerMajorTickStringFormat="{}{0:HH}:{0:mm}"                                          
                                             WeekGroupHeaderStringFormat="Week {0} ,{1:D}"    
                                             MinorTickLength="30min"
                                             MajorTickLength="1h"
                                             GroupFilter="{Binding GroupFilter}"  MinTimeRulerExtent="1600"  MaxTimeRulerExtent="1600"  ShowAllDayArea="True"  />

                                    <telerik:MonthViewDefinition CalendarWeekRule="FirstFullWeek"  FirstDayOfWeek="Monday"
                                                 GroupFilter="{Binding GroupFilter,Mode=TwoWay}" />

                                    <telerik:TimelineViewDefinition GroupFilter="{Binding GroupFilter}"
                                                    TimerulerMajorTickStringFormat="{}{0:HH:mm}"
                                                                MajorTickLength="1day"
                                                                MinorTickLength="1day"
                                                                TimerulerGroupStringFormat="{}{0:dd ddd}"
                                                     MinTimeRulerExtent="1"   />

                                    <telerik:WeekViewDefinition Title="Multi Days"
                                            GroupFilter="{Binding SelectedDateFilter}" FirstDayOfWeek="{Binding FirstDayOfWeek}" VisibleDays="{Binding VisibleDays}"
                                                 MinTimeRulerExtent="1600"         
                                               MaxTimeRulerExtent="1600"                                                
                                               MajorTickLength="1h"
                                               MinorTickLength="30min"      
                                               ShowTimeRuler="True"    
                                                GroupHeaderDateStringFormat="{}{0:dddd(dd/MM/yyyy)}"
                                               ShowAllDayArea="True"  />

                                </telerik:RadScheduleView.ViewDefinitions>

                    <telerik:RadContextMenu.ContextMenu>
                        <telerik:RadContextMenu x:Name="RadContextMenu" IsEnabled="{Binding IsContextMenuEnable}" >

                            <telerik:RadMenuItem Name="copyContextmenuitem" Header="{Binding LocalizedStrings.CAL_RIGHT_CLICK_COPY,
                                                Source={StaticResource myCustomResources}}"
                                         Command="{Binding DC[AppointmentCopyCommand],Mode=TwoWay }"
                                         CommandParameter="{Binding Menu.UIElement.SelectedAppointments, RelativeSource={RelativeSource Self}}"
                                         Visibility="{Binding Header, RelativeSource={RelativeSource Self}, Converter={StaticResource NullToVisibilityConverter}}"/>

                                        <telerik:RadMenuItem Name="linkContextmenuitem" Header="{Binding LinkHeader,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
                                         Command="{Binding DC[AppointmentLinkCommand],Mode=TwoWay}"                                                 
                                         Visibility="{Binding Header, RelativeSource={RelativeSource Self}, Converter={StaticResource NullToVisibilityConverter}}"/>
                                    </telerik:RadContextMenu>
                                </telerik:RadContextMenu.ContextMenu>

                            </telerik:RadScheduleView>​

 

 Thanks

 

 

0
Nasko
Telerik team
answered on 05 Aug 2015, 01:16 PM
Hello Asanka,

The desired by you functionality is currently not supporter by RadScheduleView. As I have already explained in my previous response I am afraid that dragging not only of appointments but of any other UIElement inside the AllDayArea is currently not supported.

You can log this as a feature request in our Feedback Portal where we could get some feedback about this feature and evaluate it.

We apologize for any caused inconvenience.

Regards,
Nasko
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
Keith Jusas
Top achievements
Rank 1
answered on 08 Feb 2017, 02:53 PM

Hello Plamen

I'm also having the same issue i tired the things you said but my drag drop functionality doesn't work anymore. This is the javascirpt my trying . Can you please help me out what i'm doing wrong ?

 

if (isPartOfSchedulerAppointmentArea(htmlElement)) {
    // 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;
              if ($telerik.$(htmlElement).parents(".rsApt").length != 0)
        timeSlot = Scheduler.scheduler.getAppointmentFromDomElement(htmlElement).get_timeSlot();
    else
        timeSlot = Scheduler.scheduler._activeModel.getTimeSlotFromDomElement(htmlElement);
     
              $get(Scheduler.targetSlotHiddenFieldId).value = timeSlot.get_index();
              var resource = null;
              if (timeSlot.get_resource)
                  resource = timeSlot.get_resource().get_Key();
              $get(Scheduler.ResourceNameHiddenFieldID).value = resource;
    // The HTML needs to be set in order for the postback to execute normally
    eventArgs.set_destinationHtmlElement(Scheduler.targetSlotHiddenFieldId);
     
}
0
Vessy
Telerik team
answered on 09 Feb 2017, 01:39 PM
Hi Keith,

We have already answered your support ticket on the matter, for both sides convenience I will advice that we continue our conversation there.

To whom it may concerns - a live demo on how to drag and drop rows from RadGrid to RadScheduler for ASP.NET AJAX can be found here:
http://demos.telerik.com/aspnet-ajax/scheduler/examples/draganddropintegration/defaultcs.aspx?product=scheduler


Regards,
Vessy
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
Mehmet
Top achievements
Rank 1
Answers by
Plamen
Telerik team
Mehmet
Top achievements
Rank 1
asanka
Top achievements
Rank 1
Nasko
Telerik team
Keith Jusas
Top achievements
Rank 1
Vessy
Telerik team
Share this question
or