This is a migrated thread and some comments may be shown as answers.
Horizontal orientation for certain nodes

6 Answers 241 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
6 Answers, 1 is accepted

answered on 30 Mar 2010, 02:17 PM
treeviewhorizontal.zip
Hello Phani,

Please find attached a simple page demonstrating this approach, download it and give it a try.

All the best,
Yana
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
answered on 02 Apr 2010, 02:50 PM
Here is the modified aspx page
    
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="treeViewHorizontal.aspx.cs" Inherits="treeViewHorizontal" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!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></title>  
        
                <style type="text/css">  
        
                    .RadTreeView .horizontal li   
        
                    {  
        
                        float: left;  
        
                    }  
        
                     div.RadTreeView .horizontal .rtLast,  
        
                     div.RadTreeView .horizontal li .rtUL  li  
        
                     {  
        
                         float:none;  
        
                     }  
        
                </style> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                      <asp:ScriptManager ID="ss" runat="server" /> 
        
                <div> 
        
                    <telerik:RadTreeView ID="treeView1" runat="server" Skin="Vista" ShowLineImages="false">  
        
                        <Nodes> 
        
                            <telerik:RadTreeNode runat="server" Text="Root RadTreeNode1">  
        
                                <Nodes> 
        
                                    <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1" flow="horizontal">  
        
                                        <Nodes> 
        
                                            <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1">  
        
                                            <Nodes> 
        
                                                <telerik:RadTreeNode runat="server" Text="Substring" flow="horizontal">  
        
                                                    <Nodes> 
        
                                                        <telerik:RadTreeNode runat="server" Text="Input String">  
        
                                                            <Nodes> 
        
                                                                <telerik:RadTreeNode runat="server" Text="Substring" flow="horizontal">  
        
                                                                    <Nodes> 
        
                                                                        <telerik:RadTreeNode runat="server" Text="Input String"></telerik:RadTreeNode> 
        
                                                                        <telerik:RadTreeNode runat="server" Text="Start Pos"></telerik:RadTreeNode> 
        
                                                                        <telerik:RadTreeNode runat="server" Text="Length"></telerik:RadTreeNode> 
        
                                                                    </Nodes> 
        
                                                                </telerik:RadTreeNode> 
        
                                                            </Nodes> 
        
                                                        </telerik:RadTreeNode> 
        
                                                        <telerik:RadTreeNode runat="server" Text="Start Pos"></telerik:RadTreeNode> 
        
                                                        <telerik:RadTreeNode runat="server" Text="Length"></telerik:RadTreeNode> 
        
                                                    </Nodes> 
        
                                                </telerik:RadTreeNode> 
        
                                             </Nodes> 
        
                                            </telerik:RadTreeNode> 
        
                                            <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 2">  
        
                                            </telerik:RadTreeNode> 
        
                                            <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 3">  
        
                                            </telerik:RadTreeNode> 
        
                                        </Nodes> 
        
                                    </telerik:RadTreeNode> 
        
                                    <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 2">  
        
                                    </telerik:RadTreeNode> 
        
                                </Nodes> 
        
                            </telerik:RadTreeNode> 
        
                            <telerik:RadTreeNode runat="server" Text="Root RadTreeNode2">  
        
                                <Nodes> 
        
                                    <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1" flow="horizontal">  
        
                                        <Nodes> 
        
                                            <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1">  
        
                                            </telerik:RadTreeNode> 
        
                                            <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 2">  
        
                                            </telerik:RadTreeNode> 
        
                                            <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 3">  
        
                                            </telerik:RadTreeNode> 
        
                                        </Nodes> 
        
                                    </telerik:RadTreeNode> 
        
                                    <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 2">  
        
                                    </telerik:RadTreeNode> 
        
                                </Nodes> 
        
                            </telerik:RadTreeNode> 
        
                            <telerik:RadTreeNode runat="server" Text="Root RadTreeNode3">  
        
                            </telerik:RadTreeNode> 
        
                        </Nodes> 
        
                    </telerik:RadTreeView> 
        
                </div> 
        
                </form> 
        
                <script type="text/javascript">  
        
                    function pageLoad() {  
        
                        var tree = $find("<%=treeView1.ClientID %>");  
        
                        for (var i = 0; i < tree.get_allNodes().length; i++) {  
        
                            var node = tree.get_allNodes()[i];  
        
                            if (node.get_attributes().getAttribute("flow") == "horizontal") {  
        
                                node._nodeListElement.className += " horizontal";  
        
                            }  
        
                        }  
        
                    }  
        
                    </script> 
        
            </body> 
        
            </html>