ComponentOne TreeView for ASP.NET WebForms
Task-Based Help / Setting C1TreeView Properties to Allow Drag-and-Drop Behaviors / Drag-and-drop Behaviors Between Two Tree Structures
In This Topic
    Drag-and-drop Behaviors Between Two Tree Structures
    In This Topic

    This topic will walk you through setting C1TreeView properties to allow drag-and-drop behaviors between two tree structures.

    In Design View

    1. In Design View, add two C1TreeView controls to your project and create several child nodes for each control.
    2. Select the first C1TreeView control and navigate to the Properties window.
    3. Locate the AllowDrag and AllowDrop properties and use the drop-down menus to set both to "true".
    4. Select the second C1TreeView control and navigate to the Properties window.
    5. Locate the AllowDrop property and use the drop-down menu to set it to "true". This will allow you to drag items from the first C1TreeView control and drop them into the second C1TreeView control at run time.
    6. Press F5 to run your program. Note that you are able to drag nodes from the first tree and drop them into the second tree.

    In Source View

    1. Insert the following markup in the second set of <asp:Content> tags to create two C1TreeView controls.
      Markup
      Copy Code 
      <cc1:C1TreeView ID="C1TreeView1" runat="server">
        <Nodes>
            <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"
                Owner="C1TreeView1" StaticKey="C1TreeView1_0" Text="C1TreeViewNode6"
                TreeView="C1TreeView1">
            </cc1:C1TreeViewNode>
            <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"
                Owner="C1TreeView1" StaticKey="C1TreeView1_1" Text="C1TreeViewNode4"
                TreeView="C1TreeView1">
                <Nodes>
                    <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"
                        Owner="" StaticKey="C1TreeView1_10" Text="C1TreeViewNode1"
                        TreeView="C1TreeView1">
                    </cc1:C1TreeViewNode>
                    <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"
                        Owner="" StaticKey="C1TreeView1_11" Text="C1TreeViewNode2"
                        TreeView="C1TreeView1">
                    </cc1:C1TreeViewNode>
                    <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"
                        Owner="" StaticKey="C1TreeView1_12" Text="C1TreeViewNode3"
                        TreeView="C1TreeView1">
                    </cc1:C1TreeViewNode>
                </Nodes>
            </cc1:C1TreeViewNode>
            <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"
                Owner="C1TreeView1" StaticKey="C1TreeView1_2" Text="C1TreeViewNode5"
                TreeView="C1TreeView1">
            </cc1:C1TreeViewNode>
            <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"
                Owner="C1TreeView1" StaticKey="C1TreeView1_3" Text="C1TreeViewNode1"
                TreeView="C1TreeView1">
                <Nodes>
                    <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"
                        Owner="" StaticKey="C1TreeView1_30" Text="C1TreeViewNode1"
                        TreeView="C1TreeView1">
                    </cc1:C1TreeViewNode>
                    <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"
                        Owner="" StaticKey="C1TreeView1_31" Text="C1TreeViewNode2"
                        TreeView="C1TreeView1">
                    </cc1:C1TreeViewNode>
                    <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"
                        Owner="" StaticKey="C1TreeView1_32" Text="C1TreeViewNode3"
                        TreeView="C1TreeView1">
                    </cc1:C1TreeViewNode>
                </Nodes>
            </cc1:C1TreeViewNode>
            <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"
                Owner="C1TreeView1" StaticKey="C1TreeView1_4" Text="C1TreeViewNode2"
                TreeView="C1TreeView1">
            </cc1:C1TreeViewNode>
            <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"
                Owner="C1TreeView1" StaticKey="C1TreeView1_5" Text="C1TreeViewNode3"
                TreeView="C1TreeView1">
                <Nodes>
                    <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"
                        Owner="" StaticKey="C1TreeView1_50" Text="C1TreeViewNode1"
                        TreeView="C1TreeView1">
                    </cc1:C1TreeViewNode>
                    <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"
                        Owner="" StaticKey="C1TreeView1_51" Text="C1TreeViewNode2"
                        TreeView="C1TreeView1">
                    </cc1:C1TreeViewNode>
                    <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"
                        Owner="" StaticKey="C1TreeView1_52" Text="C1TreeViewNode3"
                        TreeView="C1TreeView1">
                    </cc1:C1TreeViewNode>
                </Nodes>
            </cc1:C1TreeViewNode>
            <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"
                Owner="C1TreeView1" StaticKey="C1TreeView1_6" Text="C1TreeViewNode7"
                TreeView="C1TreeView1">
            </cc1:C1TreeViewNode>
        </Nodes>
    </cc1:C1TreeView
    <cc1:C1TreeView ID="C1TreeView2" runat="server">
        <Nodes>
            <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"
                Text="C1TreeViewNode6">
                <Nodes>
                    <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"
                        Text="C1TreeViewNode1">
                    </cc1:C1TreeViewNode>
                    <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"
                        Text="C1TreeViewNode2">
                    </cc1:C1TreeViewNode>
                </Nodes>
            </cc1:C1TreeViewNode>
            <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"
                Text="C1TreeViewNode7">
            </cc1:C1TreeViewNode>
            <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"
                Text="C1TreeViewNode8">
                <Nodes>
                    <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"
                        Text="C1TreeViewNode1">
                    </cc1:C1TreeViewNode>
                    <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"
                        Text="C1TreeViewNode2">
                    </cc1:C1TreeViewNode>
                    <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"
                        Text="C1TreeViewNode3">
                    </cc1:C1TreeViewNode>
                    <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"
                        Text="C1TreeViewNode4">
                    </cc1:C1TreeViewNode>
                </Nodes>
            </cc1:C1TreeViewNode>
            <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"
                Text="C1TreeViewNode1">
            </cc1:C1TreeViewNode>
            <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"
                Text="C1TreeViewNode2">
            </cc1:C1TreeViewNode>
            <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"
                Text="C1TreeViewNode3">
                <Nodes>
                    <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"
                        Text="C1TreeViewNode1">
                    </cc1:C1TreeViewNode>
                    <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"
                        Text="C1TreeViewNode2">
                    </cc1:C1TreeViewNode>
                    <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"
                        Text="C1TreeViewNode3">
                    </cc1:C1TreeViewNode>
                    <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"
                        Text="C1TreeViewNode4">
                    </cc1:C1TreeViewNode>
                    <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"
                        Text="C1TreeViewNode5">
                    </cc1:C1TreeViewNode>
                    <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"
                        Text="C1TreeViewNode6">
                    </cc1:C1TreeViewNode>
                    <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"
                        Text="C1TreeViewNode7">
                    </cc1:C1TreeViewNode>
                </Nodes>
            </cc1:C1TreeViewNode>
            <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"
                Text="C1TreeViewNode4">
            </cc1:C1TreeViewNode>
            <cc1:C1TreeViewNode runat="server" CheckState="UnChecked" NodeIndex="0"
                Text="C1TreeViewNode5">
            </cc1:C1TreeViewNode>
        </Nodes>
    </cc1:C1TreeView>
    2. Locate the first set of <cc1:C1TreeView> tags and add AllowDrag="True" and AllowDrop="True". The tag should resemble the following sample. 

      <cc1:C1TreeView ID="C1TreeView1" runat="server" AllowDrag="True"
                      AllowDrop="True">
    3. Locate the second set of <cc1:C1TreeView> tags and add AllowDrop="True". The tag should resemble the following sample. 

      <cc1:C1TreeView ID="C1TreeView2" runat="server" AllowDrop="True">
    4. Press F5 to run your program. Note that you are now able to drag nodes from the first tree and drop them into the second tree.