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

How do I minimize the space between tree view nodes?

5 Answers 1234 Views

TreeView

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

chrisjoelcowan asked on 28 Jan 2010, 10:57 PM

node-spacing-example.PNG

I have a tree view control on a page, but I have a limited amount of space to display it in. I want to minimize the spacing between nodes as much as possible. I've followed the instructions here, but even when I set the relevant margin and padding values to 0px I still get a rather large gap between nodes. After mucking around in the tree view CSS I found that if I added this

    
            .RadTreeView .rtMid, 
        
            .RadTreeView .rtTop, 
        
            .RadTreeView .rtBot 
        
            { 
        
              height: 16px; 
        
            }

that it got the node spacing to a more acceptable level, but only in IE 7 and 8. In IE 6 the same large gap still exists. I've attached a screen shot to demonstrate. What am I doing wrong? Is there any way to get smaller spacing across all IE versions? It's important that any solution work in IE 6.

Here is the code used to generate the screen shot:

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="RadTreeViewExample.Index" %> 
        
            <!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>RadTreeView Example</title> 
        
              <style type="text/css"> 
        
                .RadTreeView, 
        
                .RadTreeView a.rtIn, 
        
                .RadTreeView .rtEdit .rtIn input 
        
                { 
        
                   font-size:11px; 
        
                } 
        
               .RadTreeView .rtLI 
        
                { 
        
                   padding-bottom: 0px; 
        
                } 
        
                .RadTreeView .rtUL .rtUL 
        
                { 
        
                   margin-top: 0px; 
        
                } 
        
                .RadTreeView .rtLast 
        
                { 
        
                   padding-bottom: 0; 
        
                } 
        
                .RadTreeView .rtMid, 
        
                .RadTreeView .rtTop, 
        
                .RadTreeView .rtBot 
        
                { 
        
                  height: 16px; 
        
                }   
        
              </style> 
        
            </head> 
        
            <body> 
        
              <form id="form1" runat="server"> 
        
                <asp:ScriptManager ID="scriptManager" runat="server" /> 
        
                <telerik:RadTreeView ID="treeView" runat="server" ShowLineImages="false"> 
        
                  <Nodes> 
        
                    <telerik:RadTreeNode Text="One"> 
        
                      <Nodes> 
        
                        <telerik:RadTreeNode Text="Child One" /> 
        
                      </Nodes> 
        
                    </telerik:RadTreeNode> 
        
                    <telerik:RadTreeNode Text="Two"> 
        
                      <Nodes> 
        
                        <telerik:RadTreeNode Text="Child Two" /> 
        
                      </Nodes> 
        
                    </telerik:RadTreeNode> 
        
                    <telerik:RadTreeNode Text="Three"> 
        
                      <Nodes> 
        
                        <telerik:RadTreeNode Text="Child Three" /> 
        
                      </Nodes> 
        
                    </telerik:RadTreeNode> 
        
                    <telerik:RadTreeNode Text="Four"> 
        
                      <Nodes> 
        
                        <telerik:RadTreeNode Text="Child Four" /> 
        
                      </Nodes> 
        
                    </telerik:RadTreeNode> 
        
                    <telerik:RadTreeNode Text="Five"> 
        
                      <Nodes> 
        
                        <telerik:RadTreeNode Text="Child Five" /> 
        
                      </Nodes> 
        
                    </telerik:RadTreeNode> 
        
                  </Nodes> 
        
                </telerik:RadTreeView> 
        
              </form> 
        
            </body> 
        
            </html>

There was no extra code in the code behind file.

I'm using Visual Studio 2008 with .NET 3.5 SP1 and Telerik.Web.UI.dll version of 2009.3.1314.35.

Thanks for your help.

5 Answers, 1 is accepted

answered on 04 Mar 2010, 08:12 PM

tlrktv.jpg

I have followed the instructions on this forum post to reduce the space between nodes by adding the required CSS. I am unsuccessful in my attempt to reproduce what was working with your 2008 Q3 controls. Using the 2009 Q3 controls adds spacing after the first node, and the grid lines are not displayed accurately. Please view the image I have attached. On the right you will see 2008 Q3 and on the left you will see 2009 Q3.

Any help is appreciated. Thank you.

*EDIT
I was able to fix the node lines, but is there any way to reduce the space between the nodes even further?