Dock for RadSlidingPane not working

2 posts, 0 answers
  1. Sanket
    Sanket avatar
    3 posts
    Member since:
    May 2009

    Posted 02 Jun 2009 Link to this post

    Hi,

    I am creating a user control ascx with the following. Facing the following 2 issues:

    - When the mouse moves over the SlidingPane, it expands but doesn't render properly until the "Dock" button is clicked. After that, it renders properly.

    - More importantly, when the "Dock" button is clicked, it doesn't dock. Instead closes down.

    Can you please help. Thanks.

    <

     

    telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="0px"

     

     

    Skin="Web20">

     

     

    <telerik:RadPane ID="BottomPane" runat="server" Width="100%" Scrolling="None">

     

     

    <telerik:RadSlidingZone ID="SlidingZone1" runat="server" Width="100%" SlideDirection="Top">

     

     

    <telerik:RadSlidingPane ID="RadSlidingPane1" Title="Parameters" runat="server" Width="100%">

     

     

    <telerik:RadGrid ID="ParameterRadGrid" runat="server" Skin="Web20" AutoGenerateColumns="false">

     

     

    <MasterTableView CellSpacing="0" CellPadding="0" TableLayout="Fixed" Width="100%" ShowHeader="false">

     

     

    <Columns>

     

     

    <telerik:GridTemplateColumn ReadOnly="true" Reorderable="true" Resizable="true">

     

     

    <ItemStyle HorizontalAlign="Left" Width="20%" />

     

     

    <ItemTemplate>

     

     

    <span><%# Eval("Name")%></span>

     

     

    </ItemTemplate>

     

     

    </telerik:GridTemplateColumn>

     

     

    <telerik:GridTemplateColumn ReadOnly="true" Reorderable="true" Resizable="true" >

     

     

    <ItemStyle HorizontalAlign="Left" Width="80%" />

     

     

    <ItemTemplate>

     

     

    <span><%# Eval("Value")%></span>

     

     

    </ItemTemplate>

     

     

    </telerik:GridTemplateColumn>

     

     

    </Columns>

     

     

    </MasterTableView>

     

     

    </telerik:RadGrid>

     

     

    </telerik:RadSlidingPane>

     

     

    </telerik:RadSlidingZone>

     

     

    </telerik:RadPane>

     

    </

     

    telerik:RadSplitter>

     

  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 03 Jun 2009 Link to this post

    Hi Sanket,

    First of all, let me explain how the dock functionality of the RadSlidingPane works. The RadSlidingPane is a child of a RadSlidingZone, which in turn is a child of a RadPane. When the RadSlidingPane slides out, it should show over any content of an adjacent RadPane. Because of this, it does not act as a child of its parent RadPane. However, when you try to dock a RadSlidingPane, you force it into its parent RadPane. At this point, in order for the RadSlidingPane to show all its content (without its parent RadPane to show scrollbars because of its Height=22px), the RadSlidingPane tries to resize its parent RadPane and in case it fails, it collapses. However, in order to be able to resize a RadPane, you have to define at least two RadPanes in the RadSplitter. That way, when you resize the top pane to a larger height, the bottom pane will resize to a smaller height, leading to the RadSplitter keeping its correct Height.

    Having said that, in order to use the dock functionality of the RadSplidingPane, you have to define at least two RadPanes in your RadSplitter.

    For example:

    <head runat="server">    
        <title>Untitled Page</title>    
        <style type="text/css">    
        html, body, form    
        {    
            height:100%;    
            margin:0px;    
            padding:0px;    
        }    
        </style>    
    </head>    
    <body>    
        <form id="form1" runat="server">    
            <asp:ScriptManager ID="ScriptManager1" runat="server" />    
            <telerik:RadSplitter Skin="Sunset" ID="RadSplitterTop" Orientation="Horizontal" Width="100%"    
                Height="100%" runat="server">    
                <telerik:RadPane ID="MainPane1" runat="server" Locked="true" Scrolling="None" Width="100%"    
                    Height="22">    
                    <telerik:RadSlidingZone ID="Radslidingzone2" runat="server" Height="22" SlideDirection="Bottom">    
                        <telerik:RadSlidingPane EnableDock="true" Title="Pane" ID="Radslidingpane4" runat="server"    
                            Width="150">    
                        </telerik:RadSlidingPane>    
                    </telerik:RadSlidingZone>    
                </telerik:RadPane>    
                <telerik:RadSplitBar ID="Radsplitbar3" runat="server"></telerik:RadSplitBar>    
                <telerik:RadPane ID="ContentPane" runat="server"></telerik:RadPane>    
            </telerik:RadSplitter>    
        </form>    
    </body>   



    Sincerely yours,

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top