Drag & Drop outside a DestinationHtmlElement

[Camilo]

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

[Camilo]

Anyone? this is urgent I need help please!!!

[Pavlina]

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

[Camilo]

Thanks, I already noticed this behaviour, so I'm trying to accomodate to this approach

[Sergio]

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);



   }

[Pavlina]

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

[Sergio]

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

[Pavlina]

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

[John]

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?

[Steve]

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.

[Pavlina]

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

[Steve]

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.

[Pavlina]

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

[Srikanth]

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

[Pavlina]

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