splitter with grid

5 posts, 0 answers
  1. Patrick Lane
    Patrick Lane avatar
    17 posts
    Member since:
    May 2005

    Posted 15 Apr 2009 Link to this post

    I am using Q3 2008 controls

    I have aspx page as follows:

    splitter with height set to 100%
    sliding zone containing sliding pane1, which contains a user_control1
    split bar
    pane2 which contains user_control2, scrolling is disabled

    user_control2 contains a radgrid which lots of columns, therefore exceeds the available width

    I get two problems:

    1) the horizontal scrollbar of the grid does not display
    2) the height of both panes (sliding and fixed) is restricted to the height of the grid

    I dont get these problems if the grid has only a few columns and can fit in the width of pane2

    any suggestions ?

    thanks, patrick
  2. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 15 Apr 2009 Link to this post

    Patrick,

    Just a stab in the dark;

    > 1) the horizontal scrollbar of the grid does not display

    Have you set the Grid to allow scrolling?

    <ClientSettings> 
      <Scrolling AllowScroll="true" /> 
    </ClientSettings> 
     
    --
    Stuart
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 16 Apr 2009 Link to this post

    Hello Patrick,

    In case you still experience the problem, please prepare a sample, fully runnable reproduction demo (use Northwind or a fake datasource for the grid), open a new support ticket and send it to us. Please, also include detailed explanations and some screenshots with the actual and the desired behavior marked. Once we have a better understanding on your exact configuration and requirements, we will do our best to help.


    All the best,
    Svetlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  5. Patrick Lane
    Patrick Lane avatar
    17 posts
    Member since:
    May 2005

    Posted 16 Apr 2009 Link to this post

    Hi Svetlina

    To keep it nice and simple I have just created a splitter and added in some Telerik controls. Code is below. Run this and you should see my problem: the splitter sizes itself to the height of the contents, not to the 100% height I have specified.

    Some other problems I have found:

    (1) In VS2005 I cannot specify the height of the pane through the designer properties window. The code-behind contains Height=" ".
    (2) The following statement in the help topic is not true. If no height or width is specified for the splitter or panes then default values of 400px are applied to both dimensions of the splitter.
  6. Free size - When you do not set the Width or Height property, the size of the splitter or pane is calculated automatically. Use this option when you don't need absolute size control or you want a pane to allocate all of the free size when the splitter is resized:
    • When you use free size on a splitter control, the splitter size is calculated automatically from the browser (or container) when the control is rendered.
    • When you use free size on a pane control, the splitter calculates the pane size based on what space is remaining after allocating space to absolutely-sized or percent-sized panes. If all panes are free-sized, then they all start initially the same siz

  7. <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="template.aspx.vb" Inherits="PROSPERO_VS.template" %> 
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml">  
     
    <head runat="server">  
        <title>Untitled Page</title> 
    </head> 
    <script type="text/javascript">  
    </script> 
    <body style="height:100%;margin:0px" bottommargin="0" leftmargin="0" rightmargin="0" topmargin="0">  
        <form id="form1" runat="server" style="height:100%;margin:0px" > 
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
            </telerik:RadScriptManager>          
            <table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 100%">  
                <tr height="100%" > 
                    <td height="100%" valign="top">  
                        <telerik:RadSplitter ID="RadSplitter1" runat="server" Skin="Gray" Height="100%" Width="100%" > 
                            <telerik:RadPane ID="RadPane1" runat="server" Height="100%"  > 
                                <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server">  
                                    <telerik:RadSlidingPane ID="RadSlidingPane1" runat="server" Title="Go to" Width="250px">  
                                        <telerik:RadPanelBar ID="RadPanelBar1" runat="server" Skin="Gray">  
                                            <CollapseAnimation Duration="100" Type="None" /> 
                                            <Items> 
                                                <telerik:RadPanelItem runat="server" Text="Root RadPanelItem1">  
                                                </telerik:RadPanelItem> 
                                                <telerik:RadPanelItem runat="server" Text="Root RadPanelItem2">  
                                                </telerik:RadPanelItem> 
                                                <telerik:RadPanelItem runat="server" Text="Root RadPanelItem3">  
                                                </telerik:RadPanelItem> 
                                                <telerik:RadPanelItem runat="server" Text="Root RadPanelItem4">  
                                                </telerik:RadPanelItem> 
                                                <telerik:RadPanelItem runat="server" Text="Root RadPanelItem5">  
                                                </telerik:RadPanelItem> 
                                                <telerik:RadPanelItem runat="server" Text="Root RadPanelItem6">  
                                                </telerik:RadPanelItem> 
                                                <telerik:RadPanelItem runat="server" Text="Root RadPanelItem7">  
                                                </telerik:RadPanelItem> 
                                                <telerik:RadPanelItem runat="server" Text="Root RadPanelItem8">  
                                                </telerik:RadPanelItem> 
                                            </Items> 
                                            <ExpandAnimation Duration="100" Type="None" /> 
                                        </telerik:RadPanelBar> 
                                    </telerik:RadSlidingPane> 
                                </telerik:RadSlidingZone></telerik:RadPane> 
                            <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Forward" /> 
                            <telerik:RadPane ID="RadPane2" runat="server" Height="100%" > 
                                <telerik:RadTreeView ID="RadTreeView1" runat="server" Skin="Gray">  
                                    <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">  
                                                </telerik:RadTreeNode> 
                                            </Nodes> 
                                        </telerik:RadTreeNode> 
                                        <telerik:RadTreeNode runat="server" Text="Root RadTreeNode2">  
                                            <Nodes> 
                                                <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1">  
                                                </telerik:RadTreeNode> 
                                                <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 2">  
                                                </telerik:RadTreeNode> 
                                            </Nodes> 
                                        </telerik:RadTreeNode> 
                                        <telerik:RadTreeNode runat="server" Text="Root RadTreeNode3">  
                                            <Nodes> 
                                                <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1">  
                                                </telerik:RadTreeNode> 
                                            </Nodes> 
                                        </telerik:RadTreeNode> 
                                        <telerik:RadTreeNode runat="server" Text="Root RadTreeNode4">  
                                        </telerik:RadTreeNode> 
                                        <telerik:RadTreeNode runat="server" Text="Root RadTreeNode5">  
                                        </telerik:RadTreeNode> 
                                    </Nodes> 
                                </telerik:RadTreeView> 
                            </telerik:RadPane> 
                        </telerik:RadSplitter> 
     
                    </td> 
                </tr> 
            </table> 
        </form> 
    </body> 
    </html> 
  • Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 21 Apr 2009 Link to this post

    Hi Patrick,

    When you set the RadSplitter's size in percentages, you should explicitly set all its parent elements height explicitly in order to let it calculate its size. his being said, please include the following style in your page's head:

      <style type="text/css">
        html, body, form
        {
           height: 100%;
           margin: 0;
           padding: 0;
        }
        </style>

    You can also find information about this below:

    http://demos.telerik.com/aspnet-ajax/splitter/examples/resizewithwindow/defaultcs.aspx

    On a side note, you should set Width="22" to the RadPane which holds the RadSlidingZone because otherwise you will get incorrect resizing when docking/undocking the sliding panes.


    Greetings,
    Svetlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  • Back to Top
    UI for ASP.NET Ajax is Ready for VS 2017