RadScheduler - Drag and drop - get_destinationHtmlElement issue.

[Tracy-Lee]

Hi

I have a radgrid and a radscheduler. Users are able to drag tasks from the radgrid onto the radscheduler.
This works fine on occasion, but more often it does not work. I've been debugging and the issue seems to be with the

var htmlElement = eventArgs.get_destinationHtmlElement();

This is sometimes returning the correct element (which would be the td on the scheduler), but it is more than often returning the dragged rows and not the actual destination element.

So often the htmlElement being returned is:

<div id="ct100_ContentPlaceHolder_RadGrid1_DraggedRows" class="RadGrid Radgrid_WebBlue GridDraggedRows GridDraggedRows _WebBlue" style="z-index:99999; width:400px; position:absolute; top:227px; left:930px" tabindex="0">
  <table class="rgMasterTable" rules="all" border="1" style="width:100%;table-layout:auto;empty-cells:show;">
    <tbody>
<tr class="rgRow rgSelectedRow">
          <td class="rgSorted">2013-10-09 08:00</td>        
          <td>Blah blah blah</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
    </tbody>
  </table>
</div>

when in actual fact what should be being returned is:

<td class="rsAptCreate rsAptCreateRow1">&nbsp;</td>

There is no difference in the way in which I drag and drop. When I hover the dragged content over the scheduler, the cells highlight in blue - to show it is hovered correctly. It's very frustrating as it is erratic and it's not working more than it is actually working.
I'm using Chrome and have a master page. I've used the following page as the example.
The code for the radgrid is as follows:

<telerik:RadGrid runat="server" ID="RadGrid1" GridLines="Both"
                    AutoGenerateColumns="False" OnRowDrop="RadGrid1_RowDrop" Skin="WebBlue"  Height="100%"
                    OnNeedDataSource="RadGrid1_NeedDataSource"
                    OnItemCreated="RadGrid1_ItemCreated"
                    OnItemCommand="RadGrid1_ItemCommand" AllowSorting="true">
                    <ClientSettings AllowRowsDragDrop="True" EnableAlternatingItems="false">
                        <Selecting AllowRowSelect="True"></Selecting>
                        <ClientEvents OnRowDropping="rowDropping" OnRowDblClick="onRowDoubleClick"></ClientEvents>
                    </ClientSettings>
                    <MasterTableView DataKeyNames="TaskId,UserId,DueDateTime">
                        <SortExpressions>
                            <telerik:GridSortExpression FieldName="DueDateTime" SortOrder="Ascending"></telerik:GridSortExpression>
                        </SortExpressions>
                        <Columns>
                            <telerik:GridDateTimeColumn DataField="DueDateTime" HeaderText="Due" DataFormatString="{0:yyyy-MM-dd HH:mm}" HeaderStyle-Width="120px"></telerik:GridDateTimeColumn>
                            <telerik:GridBoundColumn DataField="Details" HeaderText="Task" SortExpression="Details" UniqueName="Details" AllowFiltering="false"></telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="UserId" HeaderText="UserId" ReadOnly="True" SortExpression="UserId" UniqueName="UserId" Display="false"></telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="Fullname" HeaderText="Assigned" ReadOnly="True" SortExpression="Fullname" UniqueName="Fullname"></telerik:GridBoundColumn>
                        </Columns>
                    </MasterTableView>
                </telerik:RadGrid>

The code for the scheduler is as follows:

<telerik:RadScheduler ID="RadScheduler1" runat="server" DataDescriptionField="Details"  DataKeyField="TaskId"
                DataReminderField="Details" DataSourceID="DSTasks"
                DataStartField="DueDateTime" DataEndField="EstEndTime" DataSubjectField="Details" Skin="WebBlue"
                GroupBy="User" TimelineView-UserSelectable="false" OnNavigationComplete="RadScheduler1_NavigationComplete" Height="1350px"
                WeekView-HeaderDateFormat="ddd d, MMM" CustomAttributeNames="TaskTemplateName"

                OnAppointmentCommand="RadScheduler1_AppointmentCommand"
                OnAppointmentInsert="RadScheduler1_AppointmentInsert"
                >
                <AdvancedForm Modal="true"></AdvancedForm>
                <ResourceTypes>
                    <telerik:ResourceType KeyField="id" Name="User" TextField="name" ForeignKeyField="UserId" DataSourceID="DSUsers"></telerik:ResourceType>
                </ResourceTypes>
                <AppointmentTemplate>
                    <div><%# Eval("Subject")%> (<%# Convert.ToDateTime(Eval("Start")).ToString("HH:mm")%>-<%# Convert.ToDateTime(Eval("End")).ToString("HH:mm")%><%# Eval("TaskTemplateName")%>)</div>
                </AppointmentTemplate>
            </telerik:RadScheduler>

The javascript for the drag event is as follows:

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
    <script type="text/javascript">
        function rowDropping(sender, eventArgs) {
            // Fired when the user drops a grid row
            var htmlElement = eventArgs.get_destinationHtmlElement();
            var scheduler = $find('<%= RadScheduler1.ClientID %>');

            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.getAppointmentFromDomElement(htmlElement).get_timeSlot();
                else
                    timeSlot = scheduler._activeModel.getTimeSlotFromDomElement(htmlElement);

                $get("<%=TargetSlotHiddenField.ClientID %>").value = timeSlot.get_index();

                // The HTML needs to be set in order for the postback to execute normally
                eventArgs.set_destinationHtmlElement("<%=TargetSlotHiddenField.ClientID %>");
            }
            else {
                // The node was dropped elsewhere on the document
                eventArgs.set_cancel(true);
            }
        }

        function isPartOfSchedulerAppointmentArea(htmlElement) {
            // Determines if an html element is part of the scheduler appointment area
            // This can be either the rsContent or the rsAllDay div (in day and week view)
            var test1 = $telerik.$(htmlElement).parents().is("div.rsAllDay");
            var test2 = $telerik.$(htmlElement).parents().is("div.rsContent");

            return $telerik.$(htmlElement).parents().is("div.rsAllDay") || $telerik.$(htmlElement).parents().is("div.rsContent")
        }

        function onRowDoubleClick(sender, args) {
            sender.get_masterTableView().editItem(args.get_itemIndexHierarchical());
        }
    </script>
</telerik:RadScriptBlock>

Please let me know if I'm doing anything wrong, or if this happens to be a known issue. I have browsed other posts, but haven't found any related content. I initially tested drag and drop functionality on 2 radgrids and was getting the same issue.

[Tracy-Lee]

Hi there

Any comments or feedback would be greatly appreciated. I have still not managed to find a solution.
Thank you very much.

[Tracy-Lee]

Hi

Please can someone get back to me with regards to this issue.
My other option is to rewrite all the code and remove the drag drop functionality from the radgrid altogether - which I am trying to avoid.

I'm still getting the issue where the 
rowDropping(sender, eventArgs) eventArgs.get_destinationHtmlElement(); returns the ctl00_ContentPlaceHolder_RadGrid1_DraggedRows and not the actual scheduler cell. This is happening 70-80% of the time. The other 20-30% of the time it works fine, but I can't release the solution as is.
Any help would be greatly appreciated.

Thank you.

[Boyan Dimitrov]

Hello,

I would like to clarify that I have tested our Drag-and-drop From Grid to Scheduler demo and I am not able to replicate any issue. Could you please confirm whether you are facing that same problem when you try to drag and drop a row from the RadGrid to the RadScheduler. If yes - please list the exact steps to reproduce that problem so we can inspect it.


Regards,
Boyan Dimitrov
Telerik

[Tracy-Lee]

Hi

Thank you for getting back to me.

I am dragging and dropping from the radgrid to scheduler. I've attached screenshots.
When debugging the "var htmlElement = eventArgs.get_destinationHtmlElement();" sometimes returns the correct html element (the scheduler), but more often than not returns the dragged rows div.

The code I'm using is as mentioned in the first post. I'm happy to attach the full code files if that helps.

[Boyan Dimitrov]

Hello,

I would like to clarify that I have tested the scenario with the provided code that you sent us in your initial post. I am afraid that I am not able to replicate the described problem, when I am dropping a RadGrid row the eventArgs.get_destinationHtmlElement() method it returns the correct RadScheduler table cell element

<td class="rsAptCreate rsAptCreateRow1"> </td>

Could you please confirm that if you use the provided code in this demo you face the same problem? Please clarify what RadControls version you use in your application.


Regards,
Boyan Dimitrov
Telerik

[Suresh Sanghani]

I am facing same issue but i have found that its only related with Crome.
In Mozila,
var htmlElement = eventArgs.get_destinationHtmlElement(); 
It is working very well and as expected.

But some time its not working in Crome.
I feel that in some Crome version its working correctly and for others its returns wrong elements i.e its return gridrow td element instead of scheduler td element. 
Please any one fix it.

Thanks in Advance!

[Bozhidar]

Hi,

You've opened a separate forum thread with the same Title, where you've pasted some sample code:
http://www.telerik.com/forums/radscheduler---drag-and-drop---get_destinationhtmlelement-issue

So to prevent clutter we will investigate your issue only in that thread, and close this one.

Regards,
Bozhidar
Telerik