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.
Phani Alla
Top achievements
Rank 1
Phani Alla asked on 25 Mar 2010, 10:38 PM
Hello Telerik Team,

I'm hoping the answer to this would be yes.
Can i have certain nodes' orientation set to horizontal based on an attribute value on the node? If so how can I achieve this?
I looked at this forum post but couldn't really figure how i could achieve that only for few nodes based on a condition.
I would really appreciate any help.

Thanks much,
Phani

6 Answers, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 30 Mar 2010, 02:17 PM
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.
0
Phani Alla
Top achievements
Rank 1
answered on 01 Apr 2010, 10:18 PM
Hi Yana,

Thank you so much for the reply. This worked for me, except when i had nested nodes of same kind. Please see the screenshot attached, i've modified your example to include nested nodes with the attribute flow set to horizontal. The "Substring" nodes are the ones that have flow="horizontal" they still have their children displayed vertically.
Can you please help me with this.

Thanks again,
Phani
0
T. Tsonev
Telerik team
answered on 02 Apr 2010, 02:41 PM
Hi Phani,

It looks like there's a problem with the attachment. Can you try to attach it again?

Sincerely yours,
Tsvetomir Tsonev
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.
0
Phani Alla
Top achievements
Rank 1
answered on 02 Apr 2010, 02:48 PM
Here it is...

Thank you,
Phani
0
Phani Alla
Top achievements
Rank 1
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> 
 
0
Yana
Telerik team
answered on 08 Apr 2010, 12:10 PM
Hello Phani Alla,

I'm sorry for the delayed reply.

Unfortunately the rendering of the treeview doesn't allow to have nested horizontal nodes. Only nodes that don't have childnodes can be aligned horizontally.

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.
Tags
TreeView
Asked by
Phani Alla
Top achievements
Rank 1
Answers by
Yana
Telerik team
Phani Alla
Top achievements
Rank 1
T. Tsonev
Telerik team
Share this question
or