This is a migrated thread and some comments may be shown as answers.

children of node positioned horizontal instead of vertical

6 Answers 144 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
AVH
Top achievements
Rank 1
AVH asked on 08 Oct 2008, 07:28 PM
hello,

to save space and minimize scrolling i would like to be able to position children of a node horizontally beside one another instead of vertically in a list.

is this possible?  if not, it would be useful to have an option on how display orientation of child nodes, horizontal or vertical.

in my case, i have a fixed # of child nodes with same length text in each.  this feature or work around would help me.  is there something i could change is css?

please let me know,

thanks,

avh

6 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 09 Oct 2008, 07:47 AM
Hello AVH,

You can try the following:

        <style type="text/css">
        .rtUL .rtUL .rtLI
        {
            float:left;
        }
        
        .rtUL .rtUL .rtLI .rtLI
        {
            float:none;
        }
        </style>
        <telerik:RadTreeView ID="RadTreeView1" Height="300" Width="300" runat="server" CheckBoxes="True"
            TabIndex="1" ShowLineImages="false">
            <Nodes>
                <telerik:RadTreeNode Text="Node1" Expanded="true">
                    <Nodes>
                        <telerik:RadTreeNode Text="Node1">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Node2">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Node3">
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Node2" Expanded="true">
                    <Nodes>
                        <telerik:RadTreeNode Text="Node1">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Node2">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Node3">
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
            </Nodes>
        </telerik:RadTreeView>

It will make the second level nodes horizontal.

Regards,
Albert
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
AVH
Top achievements
Rank 1
answered on 09 Oct 2008, 05:35 PM

Albert,

Now I would like the 2nd level nodes to appear in a circle.  Just kidding.

Thanks for the help.  I am using the following

<style type="text/css">
.rtUL .rtUL .rtUL .rtLI
{
float:left;
}

.rtUL .rtUL .rtUL .rtLI .rtLI
{
float:none;

}</style>


for the 3rd level nodes.  Your suggestion worked great.

Thanks again for the quick response.

avh

0
rajaganapathi
Top achievements
Rank 1
answered on 22 Jun 2011, 10:11 AM
Hi 
    I am using an RadTreeview Control in my page. It works fine. My requirement is to to show a breadcrumb with the values selected in radtreeview. I searched for it, but it was avaliable only with Radmenu and breadcrumb which i couldn't properly reciprocate with radtreeview. Could you please provide solution. Its urgent.
0
Veronica
Telerik team
answered on 22 Jun 2011, 10:18 AM
Hello rajaganapathi,

Please take a look at this forum post for a solution.

Kind regards,
Veronica Milcheva
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

0
Christian
Top achievements
Rank 1
answered on 02 Oct 2013, 09:40 AM
Is there any way to have the first level (or all levels as I only have one) of nodes in horisontal mode using the css?

Aim is having a treeview as a checkbox list wich aligns horisontally.
0
Magdalena
Telerik team
answered on 03 Oct 2013, 08:35 AM
Hello Christian,

You can use the solution that Albert adviced. For case to make also items of the first level horizontal, please, try the following
.RadTreeView .rtLI {
    float: left;
}
.RadTreeView .rtUL {
    zoom: 1;
}
.RadTreeView .rtUL:after {
    content: "";
    display: block;
    clear: both;
}
html .RadTreeView .rtUL .rtLI .rtUL {
    padding-left: 0;
}

Regards,
Magdalena
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Tags
TreeView
Asked by
AVH
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
AVH
Top achievements
Rank 1
rajaganapathi
Top achievements
Rank 1
Veronica
Telerik team
Christian
Top achievements
Rank 1
Magdalena
Telerik team
Share this question
or