How can I customize drag-and-drop between two ComponentOne TreeView components?

Question

I have 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.

Answer 1

Eric,

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" %>

Treeview Test 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);
      }
  };

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