lisbox and treeview height 100% with proper scrollbars

14 posts, 0 answers
  1. Albert Shenker
    Albert Shenker avatar
    550 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>
  2. Kate
    Admin
    Kate avatar
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Albert Shenker
    Albert Shenker avatar
    550 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%.
  5. Kate
    Admin
    Kate avatar
    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.
  6. Albert Shenker
    Albert Shenker avatar
    550 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>
  7. Kate
    Admin
    Kate avatar
    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
  8. Albert Shenker
    Albert Shenker avatar
    550 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.
  9. Kate
    Admin
    Kate avatar
    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!
  10. Albert Shenker
    Albert Shenker avatar
    550 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.
  11. Kamen Bundev
    Admin
    Kamen Bundev avatar
    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!
  12. Albert Shenker
    Albert Shenker avatar
    550 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?
  13. Kamen Bundev
    Admin
    Kamen Bundev avatar
    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!
  14. Albert Shenker
    Albert Shenker avatar
    550 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?
  15. Kamen Bundev
    Admin
    Kamen Bundev avatar
    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017