RadScheduler - Drag and drop - get_destinationHtmlElement issue.

8 posts, 0 answers
  1. Tracy-Lee
    Tracy-Lee avatar
    6 posts
    Member since:
    Aug 2013

    Posted 09 Oct 2013 Link to this post

    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.




  2. Tracy-Lee
    Tracy-Lee avatar
    6 posts
    Member since:
    Aug 2013

    Posted 10 Oct 2013 Link to this post

    Hi there

    Any comments or feedback would be greatly appreciated. I have still not managed to find a solution.
    Thank you very much.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Tracy-Lee
    Tracy-Lee avatar
    6 posts
    Member since:
    Aug 2013

    Posted 14 Oct 2013 Link to this post

    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.
  5. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 14 Oct 2013 Link to this post

    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
    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.
  6. Tracy-Lee
    Tracy-Lee avatar
    6 posts
    Member since:
    Aug 2013

    Posted 14 Oct 2013 Link to this post

    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.




  7. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 17 Oct 2013 Link to this post

    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
    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.
  8. Suresh Sanghani
    Suresh Sanghani avatar
    4 posts
    Member since:
    Sep 2014

    Posted 13 Sep 2014 Link to this post

    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!





  9. Bozhidar
    Admin
    Bozhidar avatar
    1103 posts

    Posted 15 Sep 2014 Link to this post

    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
     

    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.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017