I have this telerik tree view control
<telerik:RadTreeView RenderMode="Lightweight" ID="RadTreeView2" runat="server" Width="300px" Height="350px"
EnableDragAndDrop="True" OnNodeDrop="RadTreeView1_HandleDrop" OnClientNodeDropping="onNodeDropping" OnClientNodeDragging="onNodeDragging" EnableDragAndDropBetweenNodes="true">
<DataBindings>
<telerik:RadTreeNodeBinding Expanded="True"></telerik:RadTreeNodeBinding>
</DataBindings>
</telerik:RadTreeView>
I need to call the server side event after drop so I have added OnNodeDrop="RadTreeView1_HandleDrop"and on the cs file I have this event.
protected void RadTreeView1_HandleDrop(object sender, RadTreeNodeDragDropEventArgs e)
{
RadTreeNode sourceNode = e.SourceDragNode;
RadTreeNode destNode = e.DestDragNode;
RadTreeViewDropPosition dropPosition = e.DropPosition;
}
The Event is not hitting after the drop is there anything I am missing.
1 Answer, 1 is accepted
Hi Mandar,
Please make sure there are no JavaScript errors on the page - Troubleshooting JavaScript errors.
In case Ajax is enabled on the page, try to disable it temporarily and test the application that way while monitoring for JavaScript errors again - Get more descriptive errors by disabling AJAX.
Below is a sample code I used for testing the behavior. On my side the event fires as expected.
<asp:Label Text="Label: " ID="Label1" runat="server" />
<telerik:RadTreeView RenderMode="Lightweight" ID="RadTreeView2" runat="server" Width="300px" Height="350px"
EnableDragAndDrop="True" OnNodeDrop="RadTreeView1_HandleDrop" OnClientNodeDropping="onNodeDropping" OnClientNodeDragging="onNodeDragging"
EnableDragAndDropBetweenNodes="true">
<DataBindings>
<telerik:RadTreeNodeBinding Expanded="True"></telerik:RadTreeNodeBinding>
</DataBindings>
<Nodes>
<telerik:RadTreeNode Text="Root 1" Expanded="true">
<Nodes>
<telerik:RadTreeNode Text="Child 1.1"></telerik:RadTreeNode>
<telerik:RadTreeNode Text="Child 1.2"></telerik:RadTreeNode>
<telerik:RadTreeNode Text="Child 1.3"></telerik:RadTreeNode>
<telerik:RadTreeNode Text="Child 1.4"></telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeNode>
<telerik:RadTreeNode Text="Root 2" Expanded="true">
<Nodes>
<telerik:RadTreeNode Text="Child 2.1"></telerik:RadTreeNode>
<telerik:RadTreeNode Text="Child 2.2"></telerik:RadTreeNode>
<telerik:RadTreeNode Text="Child 2.3"></telerik:RadTreeNode>
<telerik:RadTreeNode Text="Child 2.4"></telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeView>
<script>
function onNodeDropping(sender, args) {
//do something
}
function onNodeDragging(sender, args) {
//do something
}
</script>
<script runat="server">
protected void RadTreeView1_HandleDrop(object sender, RadTreeNodeDragDropEventArgs e)
{
Label1.Text += "HandleDrop event Fired! ";
}
</script>I hope this will help.
Looking forward to your feedback.
Kind regards,
Doncho
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
I have tried the above Steps still It is not hitting
This is my complete aspx page
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<head runat="server">
<title>Telerik ASP.NET Example</title>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
<div class="demo-containers">
<telerik:RadScriptBlock runat="Server" ID="RadScriptBlock1">
<script src="../../Scripts/LIBRARY/TreeNodeOrder.js" type="text/javascript">
</script>
<script type="text/javascript">
/* <![CDATA[ */
Sys.Application.add_load(function () {
demo.secondTreeView = $find('<%= RadTreeView2.ClientID %>');
});
/* ]]> */
</script>
</telerik:RadScriptBlock>
<asp:Panel runat="server" ID="Panel1" >
<div class="demo-container size-thin">
<h2>IEnumerable</h2>
<telerik:RadTreeView RenderMode="Lightweight" ID="RadTreeView2" runat="server" Width="300px" Height="350px"
EnableDragAndDrop="True" OnNodeDrop="RadTreeView1_HandleDrop" OnClientNodeDropping="onNodeDropping" OnClientNodeDragging="onNodeDragging" EnableDragAndDropBetweenNodes="true" AutoPostBack="true">
<DataBindings>
<telerik:RadTreeNodeBinding Expanded="True"></telerik:RadTreeNodeBinding>
</DataBindings>
</telerik:RadTreeView>
</div>
</div>
</asp:Panel>
</form>
</body>
Mandar,
I have tested the provided declaration and it is also working fine on my side, see http://somup.com/crQuQfrPoc.
I have attached a runnable sample I used for testing. To run it, you will need to add the Telerik.Web.UI.dll in the bin folder.
To be able to help you with the troubleshooting, we would need a repro of the problem so it would be very helpful if you modify the attached sample so it replicates the problem and send it back to us for investigation.
Rank 1
Hi Doncho,
I have attached my aspx ,cs file and js file due to organisation privacy issue I have removed references and assemblies and sent it separately , drag and drop is working but server side event is not triggering
I hope you will get some idea. Please let me know if it can be resolved it would be really helpful.
Thank you for the provided information, Mandar!
I have noticed that the client-side NodeDropping event is being canceled inside the event listener:
window.onNodeDropping = function(sender, args) {
var dest = args.get_destNode();
if (dest) {
clientSideEdit(sender, args);
args.set_cancel(true);
return;
}
else {
dropOnHtmlElement(args);
}
};I hope this helps. Let me know if any questions remain.
Rank 1
Hi Doncho,
I removed that part and it was working,it was hitting I did some backend code change and ran it again I am getting this error while drag and drop,can you help me with this.
window.__TsmHiddenField = $get('RadScriptManager1_TSM');$('.rrbButton[data-show-leave-page!="1"]', $('#MainToolBar_upToolbar')).click(function (e) { if(typeof clearDirty === 'function') { clearDirty(e); } });Telerik.Web.UI.RadTreeView._preInitialize("RadTreeView2","1117");
after Removing
args.set_cancel(true);
Uncaught TypeError: $ is not a function
Hi Mandar<
Do you have AJAX enabled on the page? If yes, please try to disable it temporarily to see if you will get a more descriptive error - Get more descriptive errors by disabling AJAX
Is there a reference to an external jQuery on the page? A certain version of jQuery is distributed along with the Telerik Controls. I would suggest you make that there are no conflicting jQuery versions on the page. Details about jQuery with Telerik Ajax controls find here - Using jQuery. If jQuery is needed for some custom implementations I would suggest you use the one coming with the Telerik controls. You can set it as a default jQuery version with the following RadScriptManager declaration:
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
<scripts>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
</scripts>
</telerik:RadScriptManager>
Rank 1
Mandar,
There are a couple of options here:
- A code solution that programmatically moves the scroll - please find attached a sample for it.
Check out the following forum threads on the topic: - You can also set the Height property of the RadTreeView and its own scrollbar will be moved while dragging.
<telerik:RadTreeView ID="RadTreeView1" runat="server" EnableDragAndDropBetweenNodes="true" Height="200px" EnableDragAndDrop="true" ></telerik:RadTreeView> - Last but not least while the node is grabbed with the left mouse button, you can scroll down/up with the mouse wheel.
Rank 1
Mandar,
You will need to implement the desired functionality with custom code. You can use the OnClientNodeDropping event of the RadTreeView. There you can:
- Get the source and the destination node (get_sourceNode(), get_destNode())
- Get the needed parent nodes (Whether Node.get_parent Returns the Parent Node or the Parent Treeview)
- Implement the desired condition and cancel the event when needed - set_cancel().
I hope this helps.
Please if you have any further questions that are not directly related to the subject of this thread, feel free to open a new thread where we will be glad to assist again.