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

    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. 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()   
        {  
            // 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>  
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Yeroon
    Yeroon avatar
    87 posts
    Member since:
    Oct 2012

    Posted 10 Jun 2010 Link to this post

    Hi,

    Thanks it works :)

    /Yeroon
Back to Top