Telerik Forums / UI for ASP.NET AJAX Forum / ListBox /

lisbox and treeview height 100% with proper scrollbars

Telerik UI for ASP.NET AJAX
Resources Buy Try

14 posts, 0 answers

Albert Shenker

586 posts

Member since:
Mar 2004
Posted 14 Feb 2011 Link to this post

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>

layout.jpg
Kate
Admin

1898 posts
Posted 15 Feb 2011 Link to this post

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.

Layout.zip
Albert Shenker

586 posts

Member since:
Mar 2004

Posted 15 Feb 2011 Link to this post

The example doesn't match my layout. The listbox and treeview are in a container with height/width=100%. The Listbox width is fixed and can be set to a discrete value, but the listbox height and treeview width/height must be 100%.
Kate
Admin

1898 posts

Posted 16 Feb 2011 Link to this post

Hello Albert Shenker,

Can you change the sample project that I created so it matches your layout and let me know of the changes so that I can apply them on my side in order to help you out with a solution?

Best wishes,
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.
Albert Shenker

586 posts

Member since:
Mar 2004

Posted 17 Feb 2011 Link to this post

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>
Kate
Admin

1898 posts

Posted 22 Feb 2011 Link to this post

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
Albert Shenker

586 posts

Member since:
Mar 2004

Posted 22 Feb 2011 Link to this post

So you are saying that neither RadList nor RadTreeview will work properly in fluid designs? I find this hard to believe as it would be a tremendous limitation to both controls in real-world software scenarios.
Kate
Admin

1898 posts

Posted 22 Feb 2011 Link to this post

Hello Albert Shenker,

Can you please provide an example (or a project) of what you mean by "fluid designs" or a simple scenario where this can be applied?

Best wishes,
Kate
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!
Albert Shenker

586 posts

Member since:
Mar 2004

Posted 22 Feb 2011 Link to this post

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.
Kamen Bundev
Admin

1532 posts
Posted 28 Feb 2011 Link to this post

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!

FluidLayout.zip
Albert Shenker

586 posts

Member since:
Mar 2004

Posted 03 Mar 2011 Link to this post

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?
Kamen Bundev
Admin

1532 posts
Posted 09 Mar 2011 Link to this post

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

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!

FluidTable.zip
Albert Shenker

586 posts

Member since:
Mar 2004

Posted 09 Mar 2011 Link to this post

I'm not gong to be able to ignore firefox. Are you saying there is no solution for your controls that will work in Firefox?
Kamen Bundev
Admin

1532 posts
Posted 19 Mar 2011 Link to this post

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!

FluidTable.zip

lisbox and treeview height 100% with proper scrollbars

Albert Shenker

Kate

Albert Shenker

Kate

Albert Shenker

Kate

Albert Shenker

Kate

Albert Shenker

Kamen Bundev

Albert Shenker

Kamen Bundev

Albert Shenker

Kamen Bundev