Drag & Drop outside a DestinationHtmlElement

15 posts, 0 answers
  1. Camilo
    Camilo avatar
    4 posts
    Member since:
    Feb 2011

    Posted 25 Feb 2011 Link to this post

    Hello,

    I am doing some functionality with drag & drop effect in which I have to drag from one listview to another listview and also in the same listview for reordering purposes. What happens is that I can't capture the drop when user drops inside the listview but outside an html element (LinkButton, Label, etc).

    What I tried to do was to put in my ItemTemplate a div running at server and then tried with a Panel containing the data I'm showing in the ListView, so my codebehind could capture this as a htmlElement, but it won't, DestinationHtmlElement is an empty element.

    What should I do??

    I was looking the ListBox aproximation and the drag & drop example is more or less what I am looking for, but I did not use that because I have to customize the List content as a Link followed by a Label and also it shouldn't have a scroll but it should have a variable height depending on the ammount of data it has

    Hope you can help me soon, and if you didn't understand me just let me know

    Thanks in advance,

    Camilo
  2. Camilo
    Camilo avatar
    4 posts
    Member since:
    Feb 2011

    Posted 01 Mar 2011 Link to this post

    Anyone? this is urgent I need help please!!!
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 03 Mar 2011 Link to this post

    Hi Camilo,

    You can drag and drop listview items to any HTML element on the page. It doesn't have to be any particular control, databound or not. RadListView does not recognize the drop target as a server control and does not differentiate between different drop targets. It only reports the HTML element's id, if it has one. In the RadListView Items Drag-and-Drop demo, you can notice we only have the destination HTML element's id available both in the client-side OnItemDropping / OnItemDropped events, as well as the server-side OnItemDrop event. You need to implement your business logic based on that. In the demo, in particular, the OnItemDropping event is used to check if the dragged listview item is dropped on one of the supported genre links. If not, the event is canceled and RadListView does not postback. You can use the same approach to implement any drop behavior for RadListView.

    Best wishes,
    Pavlina
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  5. Camilo
    Camilo avatar
    4 posts
    Member since:
    Feb 2011

    Posted 03 Mar 2011 Link to this post

    Thanks, I already noticed this behaviour, so I'm trying to accomodate to this approach
  6. Sergio
    Sergio avatar
    30 posts
    Member since:
    Jul 2010

    Posted 07 Apr 2011 Link to this post

    Greetings

    I have a similar requirement, the only difference is that I am dropping into a RadListBox from a RadListView.

    For this I utilize the OnItemDrop Event of the RadListView, similar to its use in some of the demos. The argument e.DestinationHtmlElement detects every single(all) html element in the page but the RadListBox. The RadListBox is the only exception :-(

    Say if I add an empty element into the Listbox and then Drop the element over this empty text element, Only then the destination elment (RadListBox1) gets detected. Similarly, If i want to continue adding elements into the ListBox - I must drop the elements carefully into the previous elements so the correct destination elements gets detected.

    It seems to me that under the hood, the box or frame of the ListBox elements remains hidden, separate from the actual items inside the box. How I can I manage so my entire Listbox is always detected?

    protected void RadListViewFriendSelection_ItemDrop(object sender, RadListViewItemDragDropEventArgs e)
       {
            
           if (e.DestinationHtmlElement.IndexOf("RadListBox1") < 0)
           {
                    return;
           }
     
           string uid = e.DraggedItem.GetDataKeyValue("uid").ToString();
           string name = e.DraggedItem.GetDataKeyValue("Name").ToString();
           RadListBoxItem item = new RadListBoxItem();
           item.Text = name;
           
           item.Value = uid;
           item.ImageUrl = String.Format("http://mypage/image/{0}/picture?type=small", uid.ToString());
           RadListBox1.Items.Add(item);
         
     
     
       }

  7. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 13 Apr 2011 Link to this post

    Hi Sergio,

    Here are some drag-n-drop demos which elaborate on this subject:

    RadListBox items
    http://demos.telerik.com/aspnet-ajax/listbox/examples/functionality/draganddrop/defaultcs.aspx

    RadListView items
    http://demos.telerik.com/aspnet-ajax/listview/examples/itemdragdrop/defaultcs.aspx

    Best wishes,
    Pavlina
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  8. Sergio
    Sergio avatar
    30 posts
    Member since:
    Jul 2010

    Posted 13 Apr 2011 Link to this post

    Pavlina

    Please look at my question with a little closer degree of detail.. I am not asking whether there is RadListview and/or RadList Drag and Drop funcionality embeded in the control; and yes, I have had the opportunity to look at the demos..

    My question is - Drag from RadListView ->  Drop to  RadListBox. Why is the event RadListViewFriendSelection_ItemDrop Not exposing The ListBox control or element? Whereas testing shows that it exposes any other element but the listbox?

    Hope this helps
    Thanks
  9. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 19 Apr 2011 Link to this post

    Hello Sergio,

    Please excuse me for misleading you in the previous post.

    Basically the observed behavior is expected. Note that when the item is dropped on the client we can only determine over which html element the item is dropped. Therefore on the server we take the html element of this control instead of the control itself. Based on this element we should understand if the control is ListBox or not.

    Regards,
    Pavlina
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  10. John
    John avatar
    2 posts
    Member since:
    Oct 2011

    Posted 18 Oct 2011 Link to this post

    I am having the same problem.  You cannot reliably drag from a RadListView to a RadListBox.  You can drag to a standard listbox just fine but not a RadListBox.  I believe it has to do with the RadListBox being made up of DIVs and dragging from a RadListView to a DIV does not always return a DestinationHtmlElement.

    Are there any workarounds for this?
  11. Steve
    Steve avatar
    11 posts
    Member since:
    Jan 2011

    Posted 20 Oct 2011 Link to this post

    Same issue here.  If the RadListBox is empty or if you drag the RadListView node to an unoccupied area of the RadListBox, the NodeDrop event of the RadListView control does nothing.
  12. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 25 Oct 2011 Link to this post

    Hello,

    I suggest that you examine the project attached in the forum thread below which elaborates on similar matter: http://www.telerik.com/community/forums/aspnet-ajax/listview/drag-and-drop-from-listview-to-treeview.aspx

    and see if it helps.

    Greetings,
    Pavlina
    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
  13. Steve
    Steve avatar
    11 posts
    Member since:
    Jan 2011

    Posted 25 Oct 2011 Link to this post

    That sample doesn't really do much for me.  I need to get the event on the server side when a node is dropped onto an empty radlistbox (or an empty area of it).  I can get the client side event, but there are problems handling the buttons on the client side.

    Basically, what I need to do is activate/deactivate buttons based on the state of the RadListBox. Doing that in javascript does not work correctly. When I set the disabled property of the button in javascript, the server-side OnClick is lost.
  14. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 28 Oct 2011 Link to this post

    Hello Steve,

    Can you please open a formal support ticket and send us a sample runnable project  demonstrating the problem (and step-by-step instructions on doing so)? In that way we can reproduce and pinpoint the problems you're facing on our side, understand the logic of your application and provide a solution.

    Regards,
    Pavlina
    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
  15. Srikanth
    Srikanth avatar
    3 posts
    Member since:
    Sep 2013

    Posted 28 Jan 2015 Link to this post

    Hai 

    I am Doing Some Functionality with Drag and Drop in i am filling the data in Item databound in Listview when i drag an item and droped in destion i am unable to get the destnation index can any one please clarify or if it is possible can any one send the code 

    Thanks in advance
     here is my code
     <telerik:RadListView ID="RadListView1" runat="server" ItemPlaceholderID="EmployeesContainer"
                                    OnItemDrop="RadListView1_ItemDrop" AllowPaging="false" OnItemCommand="RadListView1_ItemCommand"
                                    DataKeyNames="OrderID,Company" ClientDataKeyNames="OrderID,Company" ClientSettings-AllowItemsDragDrop="true"
                                    OnNeedDataSource="RadListView1_NeedDataSource" OnItemDataBound="RadListView1_ItemDataBound">
                                    <ClientSettings>
                                        <ClientEvents OnItemDragStarted="itemDragStarted" />
                                    </ClientSettings>
                                    <LayoutTemplate>
                                        <%-- <fieldset id="FieldSet1">--%>
                                        <%--  <legend>Orders</legend>--%>
                                        <asp:PlaceHolder ID="EmployeesContainer" runat="server" />
                                        <%-- <div>
                                    <div style="float: left; margin-left: 30%;">
                                        <asp:Button runat="server" ID="btnFirst" CommandName="Page" CommandArgument="First"
                                            Text="First" Enabled="<%#Container.CurrentPageIndex > 0 %>" />
                                        <asp:Button runat="server" ID="btnPrev" CommandName="Page" CommandArgument="Prev"
                                            Text="Prev" Enabled="<%#Container.CurrentPageIndex > 0 %>" />
                                        <span style="vertical-align: top; position: relative; top: 4px">Page
                                            <%#Container.CurrentPageIndex + 1 %>
                                            of
                                            <%#Container.PageCount %></span>
                                        <asp:Button runat="server" ID="btnNext" CommandName="Page" CommandArgument="Next"
                                            Text="Next" Enabled="<%#Container.CurrentPageIndex + 1 < Container.PageCount %>" />
                                        <asp:Button runat="server" ID="btnLast" CommandName="Page" CommandArgument="Last"
                                            Text="Last" Enabled="<%#Container.CurrentPageIndex + 1 < Container.PageCount %>" />
                                    </div>--%>
                                        <%--</fieldset>--%>
                                    </LayoutTemplate>
                                    <ItemTemplate>
                                        <div class="track rlvI">
                                            <%-- <fieldset style="float: left; width: 100%; height: 155px">--%>
                                            <table cellpadding="0" cellspacing="0" width="95%">
                                                <tr>
                                                    <td style="width: 75%;">
                                                        <telerik:RadListViewItemDragHandle Width="50px" Height="50px" ID="RadListViewItemDragHandle1"
                                                            runat="server" ToolTip="Drag to organize" />
                                                        <table cellpadding="6" cellspacing="0" style="margin-top: -50px">
                                                            <tr>
                                                                <td style="width: 75%">
                                                                    <asp:HiddenField ID="hdnField" runat="server" Value='<%#Eval("OrderID") %>' />
                                                                    <%--  <asp:Image ID="imgSample" runat="server" ImageUrl="~/Img/FilledCircle.png" Height="50px"
                                                                        Width="50px" />--%>
                                                                </td>
                                                            </tr>
                                                        </table>
                                                    </td>
                                                </tr>
                                            </table>
                                            <%-- </fieldset>--%>
                                        </div>
                                    </ItemTemplate>
                                    <ClientSettings AllowItemsDragDrop="true">
                                        <ClientEvents OnItemDropping="ItemDropping" />
                                    </ClientSettings>
                                </telerik:RadListView>

    function ItemDropping(sender, args) {

                        if (args.get_destinationElement().innerText.trim().startsWith("OrderID")) {
                            args.get_destinationElement().id = args.get_destinationElement().innerText.trim().split(' ')[0].split(':')[1].trim();
                        }
                        else {
                            args.set_cancel(true);
                        }

                    }
    In Item Dropping i am Unable to get the destination Id

    Can any one please give me solution




  16. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 02 Feb 2015 Link to this post

    Hi,

    If the HTML element over which you drop has ID, then e.DestinationHtmlElement in the OnItemDropping
    handler should point to the right element. Can you confirm that you drop over an HTML element with ID set? 

    In the RadListView Items Drag-and-Drop demo:http://demos.telerik.com/aspnet-ajax/listview/examples/itemdragdrop/defaultcs.aspx you can notice we only have the destination HTML element's id available both in the client-side OnItemDropping / OnItemDropped events, as well as the server-side OnItemDrop event. You need to implement your business logic based on that. In the demo, in particular, the OnItemDropping event is used to check if the dragged listview item is dropped on one of the supported genre links. If not, the event is canceled and RadListView does not postback. You can use the same approach to implement any drop behavior for RadListView.

    Regards,
    Pavlina
    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