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:
Codebehind to fill with data:
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); |
} |
} |
} |