children of node positioned horizontal instead of vertical

7 posts, 0 answers
  1. AVH
    AVH avatar
    21 posts
    Member since:
    Mar 2005

    Posted 08 Oct 2008 Link to this post

    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
  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 09 Oct 2008 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. AVH
    AVH avatar
    21 posts
    Member since:
    Mar 2005

    Posted 09 Oct 2008 Link to this post

    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

  5. rajaganapathi
    rajaganapathi avatar
    3 posts
    Member since:
    Jun 2011

    Posted 22 Jun 2011 Link to this post

    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.
  6. Veronica
    Admin
    Veronica avatar
    1213 posts

    Posted 22 Jun 2011 Link to this post

    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.

  7. Christian
    Christian avatar
    64 posts
    Member since:
    Apr 2008

    Posted 02 Oct 2013 Link to this post

    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.
  8. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 03 Oct 2013 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017