How can I customize drag-and-drop between two ComponentOne TreeView components?
I have 开发者_C百科two TreeView components in .NET web page. I want to drag-and-drop nodes from one tree to the other, but not vice versa. I also want to drag-and-drop items at a certain level (the lowest level), and drop them at a certain level (the second-lowest level). I have written custom code in Flex to do similar customization for drag-and-drop, but I am a newbie with .NET, and really have no clue here. Could someone please give me some advice. This is a prototype, so I only need basic functionality, but eventually I will need these drops to perform real-time calls to the database to update the data for these move operations.
You can do this pretty easily in JavaScript using the OnClientNodeDropped event handler. You can also use the OnClientNodeDragStarted handler to cancel drag events if they are not at the desired level. I have posted a downloadable drag and drop treeview sample here. Below is the sample code from the project.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register TagPrefix="cc1" Namespace="C1.Web.UI.Controls.C1TreeView" Assembly="C1.Web.UI.Controls.3" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Treeview Test</title>
<script type="text/javascript" id="ComponentOneClientScript2">
function adminTV_OnClientNodeDropped(sender, eventArgs) {
var dropTarget = eventArgs.get_desObj();
//if drop to the root level.the droptarget is treeview
if (dropTarget == sender) {
eventArgs.set_canceled(true);
return;
}
var node = eventArgs.get_node();
//the other treeview's node can't drop to the admin's.
if (node.get_treeView() != dropTarget.get_treeView()) {
eventArgs.set_canceled(true);
return;
}
//prevent drop the admin's node to the other level.
if (dropTarget.get_level() != 0) {
eventArgs.set_canceled(true);
return;
}
};
function adminTV_OnClientNodeDragStarted(sender, eventArgs) {
//can't drag root node.
if (eventArgs.get_node().get_level() == 0) {
eventArgs.set_canceled(true);
}
};
function userTV_OnClientNodeDropped(sender, eventArgs) {
var dropTarget = eventArgs.get_desObj();
//if drop to the root level.the droptarget is treeview
if (dropTarget == sender) {
eventArgs.set_canceled(true);
return;
}
//prevent drop the node to the other level.
if (dropTarget.get_level() != 0) {
eventArgs.set_canceled(true);
return;
}
};
function userTV_OnClientNodeDragStarted(sender, eventArgs) {
//can't drag root node.
if (eventArgs.get_node().get_level() == 0) {
eventArgs.set_canceled(true);
}
};
</script>
</head>
<body style="font-weight: 700">
<form id="form1" runat="server">
<div>
<asp:ScriptManager runat="server"></asp:ScriptManager>
<cc1:C1TreeView runat="server" ID="adminTV" AllowDragDrop="true"
VisualStyle="ArcticFox" VisualStylePath="~/C1WebControls/VisualStyles"
OnClientNodeDropped="adminTV_OnClientNodeDropped"
onclientnodedragstarted="adminTV_OnClientNodeDragStarted" >
<Nodes>
<cc1:C1TreeViewNode runat="server" Expanded="true" Selected="false" Text="Administrators">
<Nodes>
<cc1:C1TreeViewNode runat="server" Expanded="false" Selected="false" Text="Admin1">
</cc1:C1TreeViewNode>
<cc1:C1TreeViewNode runat="server" Expanded="false" Selected="false" Text="Admin2">
</cc1:C1TreeViewNode>
<cc1:C1TreeViewNode runat="server" Expanded="false" Selected="false" Text="Admin3">
</cc1:C1TreeViewNode>
<cc1:C1TreeViewNode runat="server" Expanded="false" Selected="false" Text="Admin4">
</cc1:C1TreeViewNode>
</Nodes>
</cc1:C1TreeViewNode>
</Nodes>
</cc1:C1TreeView>
<cc1:C1TreeView runat="server" ID="userTV" AllowDragDrop="true"
VisualStyle="ArcticFox" VisualStylePath="~/C1WebControls/VisualStyles"
OnClientNodeDropped="userTV_OnClientNodeDropped"
onclientnodedragstarted="userTV_OnClientNodeDragStarted" >
<Nodes>
<cc1:C1TreeViewNode runat="server" Expanded="True" Selected="False" Text="Users">
<Nodes>
<cc1:C1TreeViewNode runat="server" Expanded="False" Selected="False" Text="User1">
</cc1:C1TreeViewNode>
<cc1:C1TreeViewNode runat="server" Expanded="False" Selected="False" Text="User2">
</cc1:C1TreeViewNode>
<cc1:C1TreeViewNode runat="server" Expanded="False" Selected="False" Text="User3">
</cc1:C1TreeViewNode>
<cc1:C1TreeViewNode runat="server" Expanded="False" Selected="False" Text="User4">
</cc1:C1TreeViewNode>
<cc1:C1TreeViewNode runat="server" Expanded="False" Selected="False" Text="User5">
</cc1:C1TreeViewNode>
<cc1:C1TreeViewNode runat="server" Expanded="False" Selected="False" Text="User6">
</cc1:C1TreeViewNode>
</Nodes>
</cc1:C1TreeViewNode>
</Nodes>
</cc1:C1TreeView>
</div>
</form>
</body>
</html>
加载中,请稍侯......
精彩评论