RadTreeView control for left pane navigation

Question

My page has a left pane which has a RAD Treeview telerik control. It is working fine with parent nodes and child nodes. Below is the image of what it looks like.

I am creating a custom userControl now, to replace this treeview control. I want this new control to be able to get all nodes, level wise and display it as a block, for example: When I land on the page for the first time, what I need to see is:

• Accessories
• Awards
• FIAT
• Technology
• Warranty

within a container(a div may be), and when I click on FIAT, I want it to display another div below this top level div which shows me:

• 2014
• 2015

then when I click on 2014 another div below which shows

• 500
• 500c

and so on.

Can someone direct me towards a solution for this.

Thanks.

Answer 1

Start by checking out the telerik ASP documentation on the tree control.

There are several examples.

Your tree structure would look something like this:

 <telerik:RadTreeView ID="RadTreeView1" runat="server" Height="250px" Width="100%"
        EnableDragAndDrop="true" OnNodeClick="RadTreeView1_NodeClick" OnNodeCollapse="RadTreeView1_NodeCollapse"
        OnNodeExpand="RadTreeView1_NodeExpand" OnNodeDrop="RadTreeView1_NodeDrop" Style="border: 1px solid #CBE7F5;">
        <Nodes>
            <telerik:RadTreeNode Text="Accessories" ExpandMode="ServerSide" Expanded="true">
                <Nodes>
                <!-- add Accessories nodes here -->
                </Nodes>
            </telerik:RadTreeNode>
            <telerik:RadTreeNode Text="Awards" ExpandMode="ServerSide">
                <Nodes>
                <!-- add Awards nodes here -->
                </Nodes>
            </telerik:RadTreeNode>
            <telerik:RadTreeNode Text="FIAT" ExpandMode="ServerSide">
                <Nodes>
                    <telerik:RadTreeNode Text="2014" ExpandMode="ServerSide">
                        <telerik:RadTreeNode Text="500" ExpandMode="ServerSide">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="500c" ExpandMode="ServerSide">
                        </telerik:RadTreeNode>
                    </telerik:RadTreeNode>
                    <telerik:RadTreeNode Text="2014" ExpandMode="ServerSide">
                    </telerik:RadTreeNode>
                </Nodes>
            </telerik:RadTreeNode>
            <telerik:RadTreeNode Text="Technology" ExpandMode="ServerSide">
                <Nodes>
                <!-- add Technology nodes here -->
                </Nodes>
            </telerik:RadTreeNode>
            <telerik:RadTreeNode Text="Warranty" ExpandMode="ServerSide">
                <Nodes>
                <!-- add Warranty nodes here -->
                </Nodes>
            </telerik:RadTreeNode>
</telerik:RadTreeView>