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

Treeview height 100% scrollable with offset

2 Answers 420 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Yeroon
Top achievements
Rank 2
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

Sort by
0
Loren Dorez
Top achievements
Rank 1
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>  
0
Yeroon
Top achievements
Rank 2
answered on 10 Jun 2010, 08:31 AM
Hi,

Thanks it works :)

/Yeroon
Tags
TreeView
Asked by
Yeroon
Top achievements
Rank 2
Answers by
Loren Dorez
Top achievements
Rank 1
Yeroon
Top achievements
Rank 2
Share this question
or