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

Treeview height 100% scrollable with offset

2 Answers 536 Views

TreeView

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

Yeroon asked on 27 Jul 2009, 02:07 PM

Hello,

I have the following situation. A fixed height treeview (fixed number of items) and below a dynamic treeview with height set to 100%. Body with no scrolling, but scrolling on the treeview. It works just fine except that the 100% takes up 100% screenheight + height of top treeview. I know is is by design of the browsers, but was wondering if anyone might know a fix for it other than setting height clientside with javascript. To reproduce you can use the below code. Thanks in advance:

aspx page:

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 
        
            <%@ 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">  
        
                    html, body, form  
        
                    {  
        
                        height: 100%;  
        
                        margin: 0px;  
        
                        padding: 0px;  
        
                        overflow: hidden;  
        
                        font-family: "Segoe UI" , Arial, Sans-serif;  
        
                        font-size: 12px;  
        
                    }  
        
                </style> 
        
            </head> 
        
            <body style="overflow: hidden;">  
        
                <form id="form1" runat="server">  
        
                <asp:ScriptManager ID="ScriptManager1" runat="server">  
        
                </asp:ScriptManager> 
        
                <table cellpadding="0" cellspacing="0" border="0" style="width: 99%; height: 100%;">  
        
                    <tr style="vertical-align: top; height: 100%;">  
        
                        <td style="width: 220px; height: 100%">  
        
                            <telerik:RadTreeView ID="rtvBasis" runat="server" Skin="Default" Height="200" BorderColor="#FFFFFF" 
        
                                BackColor="#FFFFFF" BorderStyle="Solid" BorderWidth="1px">  
        
                                <DataBindings> 
        
                                    <telerik:RadTreeNodeBinding ExpandedField="Expanded" /> 
        
                                </DataBindings> 
        
                            </telerik:RadTreeView> 
        
                            <div style="height: 100%; overflow-y: scroll;">  
        
                                <telerik:RadTreeView ID="rtvProjecten" runat="server" Skin="Default" EnableDragAndDrop="true" 
        
                                    BorderColor="#FFFFFF" BackColor="#FFFFFF" BorderStyle="Solid" BorderWidth="1px" 
        
                                    CausesValidation="false">  
        
                                    <DataBindings> 
        
                                        <telerik:RadTreeNodeBinding ExpandedField="Expanded" /> 
        
                                    </DataBindings> 
        
                                </telerik:RadTreeView> 
        
                            </div> 
        
                        </td> 
        
                    </tr> 
        
                </table> 
        
                </form> 
        
            </body> 
        
            </html>

Codebehind to fill with data:

    
            using System;  
        
            using System.Collections.Generic;  
        
            using System.Linq;  
        
            using System.Web;  
        
            using System.Web.UI;  
        
            using System.Web.UI.WebControls;  
        
            using Telerik.Web.UI;  
        
            public partial class _Default : System.Web.UI.Page   
        
            {  
        
                protected void Page_Load(object sender, EventArgs e)  
        
                {  
        
                    for(int i = 0; i < 5;i++)  
        
                    {  
        
                        RadTreeNode node = new RadTreeNode("item", i.ToString());  
        
                        rtvBasis.Nodes.Add(node);  
        
                    }  
        
                    for (int i = 0; i < 100; i++)  
        
                    {  
        
                        RadTreeNode node = new RadTreeNode("item", i.ToString());  
        
                        rtvProjecten.Nodes.Add(node);  
        
                    }  
        
                }  
        
            }

2 Answers, 1 is accepted

answered on 09 Jun 2010, 08:18 PM

Theres isnt much you can do whether you or they write the Javascript

I use a simliar JS function for centering the RadWindows and has to calculate for scrolling etc.. I modified and tested with a smaple treeview see if this helps

    
            <script type="text/javascript">  
        
                function TreeSizeHeight()   
        
                {  
        
                    // SINCE SCROLLBARS MAY BE PRESENT WE NEED TO ADJUST FOR THEM  
        
                    // IF WE ARE AT THE TOP WE NEED TO GET THE VISIBLE HEIGHT & WIDTH  
        
                    // ELSE THE ENTIRE WINDOW  
        
                    var windowHeight = 0;  
        
                    var windowWidth = 0;  
        
                    if (typeof (window.innerWidth) == 'number') {  
        
                        //Non-IE  
        
                        windowWidth = window.innerWidth;  
        
                        windowHeight = window.innerHeight;  
        
                    }  
        
                    else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {  
        
                        //IE 6+ in 'standards compliant mode'  
        
                        windowWidth = document.documentElement.clientWidth;  
        
                        windowHeight = document.documentElement.clientHeight;  
        
                    }  
        
                    else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {  
        
                        //IE 4 compatible  
        
                        windowWidth = document.body.clientWidth;  
        
                        windowHeight = document.body.clientHeight;  
        
                    }  
        
                    // MINUS OFFSET VALUE  
        
            // GET WHERE THE TREE VIEW STARTS AND THEN CALCUATE A HEIGHT WITH BUFFER  
        
                    var treeDiv = document.getElementById("oTreeView");  
        
                    var buffer = 15; // BUFFERING  
        
                    treeDiv.style.height = windowHeight - treeDiv.offsetTop - buffer;  
        
                }  
        
            </script>