initial state of sliding pane on content page

2 posts, 0 answers
  1. Mike Ullerup
    Mike Ullerup avatar
    3 posts
    Member since:
    Jan 2010

    Posted 03 Feb 2010 Link to this post

    Hi.  I'm having some trouble setting the initial state of a sliding pane to be docked.  I've tried the code that was used in the demo and it only seems to work if I'm not using the slider on a content page (which is a problem because I am using a master page in my project).

    The code in the first block works, while the code in the second does not.  The only difference is that the second block uses a master page.  Otherwise, the markup for the telerik controls is copied verbatim from the online demo. The only markup on the master page is a the default markup that VS2008 generates and a script manager.  I have no code to either of these pages.

    Thank you for your help.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="splitter.aspx.cs" Inherits="RadControlsWebApplication1.splitter" %> 
     
    <!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" > 
    <head runat="server"
        <title></title
    </head> 
    <body> 
        <form id="form1" runat="server"
          <asp:ScriptManager id="ScriptManager" runat="server" /> 
       <div> 
        <telerik:RadSplitter id="RadSplitter1" runat="server" height="400" width="700"
                    <telerik:RadPane id="LeftPane" runat="server" width="22" Scrolling="None"
                        <telerik:RadSlidingZone id="SlidingZone1" runat="server" width="22" 
                        DockedPaneId="Pane1" 
                        ExpandedPaneId="Pane2" 
                        > 
                            <telerik:RadSlidingPane id="Pane1" title="Pane1" runat="server" width="300">This pane is set to be initially docked when the page is loaded. <br/><br/>Use the <b>DockedPaneId</b> property of the <b>RadSlidingZone</b> to control this behavior. 
    </telerik:RadSlidingPane> 
                            <telerik:RadSlidingPane id="Pane2" title="Pane2" runat="server" width="150" >This pane is set to be initially expanded when the page is loaded. <br/><br/>Use the <b>ExpandedPaneId</b> property of the <b>RadSlidingZone</b> to control this behavior.</telerik:RadSlidingPane> 
                            <telerik:RadSlidingPane id="Pane3" title="Pane3" runat="server" width="150">This pane has the default behavior and is hidden on page load. 
    </telerik:RadSlidingPane> 
                        </telerik:RadSlidingZone> 
                    </telerik:RadPane> 
                    <telerik:RadSplitBar id="RadSplitbar1" runat="server"></telerik:RadSplitBar> 
                    <telerik:RadPane id="MainPane" runat="server">Main Pane</telerik:RadPane> 
                </telerik:RadSplitter><br/> 
        </div> 
        </form> 
    </body> 
    </html> 
     


    <%@ Page Title="" Language="C#" MasterPageFile="~/MyMaster.master" AutoEventWireup="true" CodeBehind="splitterwithmaster.aspx.cs" Inherits="RadControlsWebApplication1.splitterwithmaster" %> 
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"
    </asp:Content> 
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"
     <telerik:RadSplitter id="RadSplitter1" runat="server" height="400" width="700"
                    <telerik:RadPane id="LeftPane" runat="server" width="22" Scrolling="None"
                        <telerik:RadSlidingZone id="SlidingZone1" runat="server" width="22" 
                        DockedPaneId="Pane1" 
                        ExpandedPaneId="Pane2" 
                        > 
                            <telerik:RadSlidingPane id="Pane1" title="Pane1" runat="server" width="300">This pane is set to be initially docked when the page is loaded. <br/><br/>Use the <b>DockedPaneId</b> property of the <b>RadSlidingZone</b> to control this behavior. 
    </telerik:RadSlidingPane> 
                            <telerik:RadSlidingPane id="Pane2" title="Pane2" runat="server" width="150" >This pane is set to be initially expanded when the page is loaded. <br/><br/>Use the <b>ExpandedPaneId</b> property of the <b>RadSlidingZone</b> to control this behavior.</telerik:RadSlidingPane> 
                            <telerik:RadSlidingPane id="Pane3" title="Pane3" runat="server" width="150">This pane has the default behavior and is hidden on page load. 
    </telerik:RadSlidingPane> 
                        </telerik:RadSlidingZone> 
                    </telerik:RadPane> 
                    <telerik:RadSplitBar id="RadSplitbar1" runat="server"></telerik:RadSplitBar> 
                    <telerik:RadPane id="MainPane" runat="server">Main Pane</telerik:RadPane> 
                </telerik:RadSplitter><br/> 
                </asp:Content> 

  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 05 Feb 2010 Link to this post

    Hi Mike Ullerup,

    The problem when you are using a MasterPage is that it is an INamingContainer and the ClientID of the RadSlidingPane is different from its ID. The DockedPaneId property of the RadSlidingZone actually takes the ClientID of a SlidingPane. That is why, in this case, you could set the DockedPaneId on the server:

     

    protected void Page_Load(object sender, EventArgs e)   
    {   
        SlidingZone1.DockedPaneId = Pane1.ClientID;   
    }   

    On a side note, if you upgrade to Q3 2009 SP1 or later the markup you have used should work out of the box without the need of server code. 

    All the best,

    Svetlina
    the Telerik team

     


    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
    Follow the status of features or bugs in PITS and vote for them to affect their priority.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top