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
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
14 Answers, 1 is accepted
0
Camilo
Top achievements
Rank 1
answered on 01 Mar 2011, 05:29 PM
Anyone? this is urgent I need help please!!!
0
Hi Camilo,
Best wishes,
Pavlina
the Telerik team
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!
0
Camilo
Top achievements
Rank 1
answered on 03 Mar 2011, 04:40 PM
Thanks, I already noticed this behaviour, so I'm trying to accomodate to this approach
0
Sergio
Top achievements
Rank 1
answered on 07 Apr 2011, 10:57 PM
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?
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);
}
0
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
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.
0
Sergio
Top achievements
Rank 1
answered on 13 Apr 2011, 09:01 PM
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
Hope this helps
Thanks
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
0
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
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.
0
John
Top achievements
Rank 1
answered on 18 Oct 2011, 11:27 PM
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?
Are there any workarounds for this?
0
Steve
Top achievements
Rank 1
answered on 20 Oct 2011, 04:38 PM
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.
0
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
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
0
Steve
Top achievements
Rank 1
answered on 25 Oct 2011, 02:51 PM
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.
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.
0
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
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
0
Srikanth
Top achievements
Rank 1
answered on 28 Jan 2015, 02:38 PM
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
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
0
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
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.