Treeview height 100% scrollable with offset

3 posts, 0 answers
  1. Yeroon
    Yeroon avatar
    87 posts
    Member since:
    Oct 2012

    Posted 27 Jul 2009 Link to this post


    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" ""> 
    <html xmlns="">  
    <head runat="server">  
        <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;  
    <body style="overflow: hidden;">  
        <form id="form1" runat="server">  
        <asp:ScriptManager ID="ScriptManager1" runat="server">  
        <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">  
                            <telerik:RadTreeNodeBinding ExpandedField="Expanded" /> 
                    <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" 
                                <telerik:RadTreeNodeBinding ExpandedField="Expanded" /> 

    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());  
            for (int i = 0; i < 100; i++)  
                RadTreeNode node = new RadTreeNode("item", i.ToString());  
  2. Loren Dorez
    Loren Dorez avatar
    3 posts
    Member since:
    Apr 2010

    Posted 09 Jun 2010 Link to this post

    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()   
            // ELSE THE ENTIRE WINDOW  
            var windowHeight = 0;  
            var windowWidth = 0;  
            if (typeof (window.innerWidth) == 'number') {  
                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  
            var treeDiv = document.getElementById("oTreeView");  
            var buffer = 15; // BUFFERING  
   = windowHeight - treeDiv.offsetTop - buffer;  
  3. DevCraft R3 2016 release webinar banner
  4. Yeroon
    Yeroon avatar
    87 posts
    Member since:
    Oct 2012

    Posted 10 Jun 2010 Link to this post


    Thanks it works :)

Back to Top