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

lisbox and treeview height 100% with proper scrollbars

13 Answers 379 Views

ListBox

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

Albert Shenker asked on 14 Feb 2011, 07:19 PM

layout.jpg

I am trying to implement the layout that is depicted in the attachment. The blue container has height/width 100% to fill available space. There are two columns. The left column has a fixed width and the right column is fluid. The left column contains a listbox and the right column contains a treview. I achieve the layout with a table. I am having difficulty getting the listbox and treeview to properly display their scrollbars when necessary.

Both the treeview and listbox contain items that should force a vertical scrollbar. The treeview should also force a horizontal scrollbar. Is there some style declaration I need to make in order for the scrollbars in these controls to appear?

Listbox Declaration:

<telerik:RadListBox ID="rlbBusinessCategories"

runat="server"

Skin="Office2007"

CheckBoxes="true"

Width="100%"

Height="100%"

></telerik:RadListBox>

Treeview Declaration:

<telerik:RadTreeView id="rtServices"

runat="server"

Skin="Office2007"

Width="100%"

Height="100%"

AllowNodeEditing="False"

EnableDragAndDrop="False"

MultipleSelect="True"

>

</telerik:RadTreeView>

13 Answers, 1 is accepted

answered on 15 Feb 2011, 07:08 PM

Layout.zip

Hello Albert ,

I have prepared a sample page that demonstrates the rendering of horizontal and vertical scroll bars of RadListBox and RadTreeView where the height and the width of the two controls are explicitly set. Let me know how it goes.

Kind regards,
Kate
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

answered on 17 Feb 2011, 05:28 PM

Here you go.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Layout.aspx.cs" Inherits="Layout" %>

<!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" style="height: 100%; min-height: 100%;">

<head runat="server">

<title></title><telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />

<style type="text/css">

</style>

</head>

<body style="height:100%; width:100%;">

<form id="form1" runat="server" style="height:100%;"><telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

<%--Needed for JavaScript IntelliSense in VS2010--%>

<%--For VS2008 replace RadScriptManager with ScriptManager--%>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<table style="height:100%; width:100%;">

<tr>

<td style="width: 275px; vertical-align:top;">

<div style="height:30px; width:100%;">spacer</div>

<telerik:RadListBox ID="RadListBox1" runat="server" Skin="Office2007"

CheckBoxes="True" Height="100%" Width="100%">

<Items>

<telerik:RadListBoxItem runat="server"

Text="RadListBoxItem1RadListBoxItem1RadListBoxItem1" />

<telerik:RadListBoxItem runat="server" Text="RadListBoxItem2" />

<telerik:RadListBoxItem runat="server" Text="RadListBoxItem3" />

<telerik:RadListBoxItem runat="server" Text="RadListBoxItem4" />

<telerik:RadListBoxItem runat="server" Text="RadListBoxItem5" />

<telerik:RadListBoxItem runat="server" Text="RadListBoxItem6" />

<telerik:RadListBoxItem runat="server" Text="RadListBoxItem7" />

<telerik:RadListBoxItem runat="server" Text="RadListBoxItem8" />

</Items>

</telerik:RadListBox>

</td>

<td style="width: auto; vertical-align:top;">

<telerik:RadTreeView ID="RadTreeView1" runat="server" Skin="Office2007"

Width="100%" Height="100%"

MultipleSelect="True">

<Nodes>

<telerik:RadTreeNode runat="server" Text="Root RadTreeNode1">

<Nodes>

<telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1">

</telerik:RadTreeNode>

<telerik:RadTreeNode runat="server" Text="Child RadTreeNode 2">

</telerik:RadTreeNode>

<telerik:RadTreeNode runat="server" Text="Child RadTreeNode 3">

<Nodes>

<telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1">

</telerik:RadTreeNode>

<telerik:RadTreeNode runat="server" Text="Child RadTreeNode 2">

</telerik:RadTreeNode>

<telerik:RadTreeNode runat="server" Text="Child RadTreeNode 3">

<Nodes>

<telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1">

<Nodes>

<telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1">

</telerik:RadTreeNode>

<telerik:RadTreeNode runat="server" Text="Child RadTreeNode 2">

</telerik:RadTreeNode>

<telerik:RadTreeNode runat="server" Text="Child RadTreeNode 3">

</telerik:RadTreeNode>

</Nodes>

</telerik:RadTreeNode>

<telerik:RadTreeNode runat="server" Text="Child RadTreeNode 2">

</telerik:RadTreeNode>

<telerik:RadTreeNode runat="server" Text="Child RadTreeNode 3">

</telerik:RadTreeNode>

<telerik:RadTreeNode runat="server" Text="Child RadTreeNode 4">

</telerik:RadTreeNode>

</Nodes>

</telerik:RadTreeNode>

<telerik:RadTreeNode runat="server" Text="Child RadTreeNode 4">

</telerik:RadTreeNode>

</Nodes>

</telerik:RadTreeNode>

<telerik:RadTreeNode runat="server" Text="Child RadTreeNode 4">

</telerik:RadTreeNode>

</Nodes>

</telerik:RadTreeNode>

<telerik:RadTreeNode runat="server" Text="Root RadTreeNode2">

</telerik:RadTreeNode>

<telerik:RadTreeNode runat="server" Text="Root RadTreeNode3">

</telerik:RadTreeNode>

<telerik:RadTreeNode runat="server" Text="Root RadTreeNode4">

</telerik:RadTreeNode>

<telerik:RadTreeNode runat="server" Text="Root RadTreeNode5">

</telerik:RadTreeNode>

<telerik:RadTreeNode runat="server" Text="Root RadTreeNode6">

</telerik:RadTreeNode>

<telerik:RadTreeNode runat="server" Text="Root RadTreeNode7">

</telerik:RadTreeNode>

<telerik:RadTreeNode runat="server" Text="Root RadTreeNode8">

</telerik:RadTreeNode>

<telerik:RadTreeNode runat="server" Text="Root RadTreeNode9">

</telerik:RadTreeNode>

<telerik:RadTreeNode runat="server" Text="Root RadTreeNode10">

</telerik:RadTreeNode>

<telerik:RadTreeNode runat="server" Text="Root RadTreeNode11">

</telerik:RadTreeNode>

</Nodes>

</telerik:RadTreeView>

</td>

</tr>

</table>

</form>

</body>

</html>

answered on 22 Feb 2011, 10:28 AM

Hello Albert Shenker,

Since you have set the Height and the Width properties to 100% to both RadListBox and RadTreeView the container that holds them will be expanding and no scrollbars will appear. To have the vertical and/or horizontal scrollbars you will need to explicitly set the Height and the Width of the two RadControls. For example, if you use the code that you have sent you will need to change only the following elements:

<telerik:RadListBox ID="RadListBox1" runat="server" Skin="Office2007" CheckBoxes="True" Height="170px" Width="220px">

for the ListBox and for the TreeView:

<telerik:RadTreeView ID="RadTreeView1" runat="server" Skin="Office2007" Width="200px" Height="200px" MultipleSelect="True">

All the best,
Kate
the Telerik team

Vote for Telerik products at the Great Indian Developer Awards

answered on 22 Feb 2011, 07:11 PM

By fluid I mean the available space is unknown and the controls should fill the avaialble space and display scrollbars if there isn't enough space. If a user is using the application on a screen with available width of 1400px and available height of 800px, it doesn't seem logical that I should show them a tree and listbox of fixed height of only 300px just because some other user may be looking at it on a smaller screen. Your grid allows people to set height/width to 100% and it functions perfectly in fluid designs with height/width unknown. The same goes for your splitter. If your llistbox and treeview controls don't allow developers to set their height/width to 100%, depending on the application, what good are they as far as creating desktop-like applications on the web?

In my particular scenario, I have a listbox (single mode.. not transfer) and treview basically side by side. The listbox has a small amount of content above it. The listbox has a fixed width but its height needs to be 100% so that larger screens will show more list items. The treeview should have height and width set to 100% so scrolbars only become necessary if there isn't enough room to display the content in the treeview. For instance, if a user expands some nodes, the height will likely eclipse what is visible on screen. This is when the scrollbars should appear.

Please look at the layout I attached in my original post. The blue area is a 100% height/width container which scales with the parent, be it the browser widnow, or some other scalable container, like a splitter with height/width = 100%, or a rad window which is re-sizeable.

answered on 28 Feb 2011, 11:58 PM

FluidLayout.zip

Hi Albert,

I'm attaching a sample how you can do the fluid design you described. Let me know if this was what you were after.

All the best,
Kamen Bundev
the Telerik team

Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!

answered on 03 Mar 2011, 05:48 PM

i'm not able to get scrollbars to display in either the listbox or treeview in your example. This page loads in a radWindow that has a splitter pane with scrolling set to none, but I don't believe this should have any effect as it is not the splitter scrollbars I am looking for.

Also, In my actual page, I can't use the lisbox headertemplate as you have. Please look at the markup I sent on 2/17/2011 11:28:18 AM. I don't have to use a table but it was the easiest way to get the two columns. If you want to recommend a different approach that would work, that is fine.

anyhow, can you get your example to work using my markup and whatever tweaks are necessary?

answered on 09 Mar 2011, 06:50 PM

FluidTable.zip

Hello Albert,

I'm attaching a sample of the same fluid layout, but done with a table. It will work in all browsers except Firefox, since table heights work a little differently there.

Kind regards,
Kamen Bundev
the Telerik team

answered on 19 Mar 2011, 02:12 PM

FluidTable.zip

Hi Albert,

There is a way - if you use absolute positioning, you can force RadTreeView in place while the page is resized. I'm attaching the modified example.

All the best,
Kamen Bundev
the Telerik team

Vote for the 7 Telerik products at the 2011 Great Indian Developer Awards!