Cannot find page within splitter

3 posts, 0 answers
  1. Jonathan
    Jonathan avatar
    92 posts
    Member since:
    Feb 2007

    Posted 27 Feb 2008 Link to this post

    Hi,

    This is probably a very simple problem but I just cannot find the answer.  I have a series of splitters and panes defined as follows:

    <telerik:RadSplitter ID="BannerSplitter" runat="server" BorderWidth="0" Height="100%" Orientation="Horizontal" Width="100%">  
        <telerik:RadPane ID="BannerPane" runat="server" BorderWidth="0" Height="30px" Scrolling="None" Width="100px">  
            Banner Pane  
        </telerik:RadPane> 
        <telerik:RadPane ID="OuterContentPane" runat="server" Scrolling="None" BorderWidth="0">  
            <telerik:RadSplitter ID="EntityPaneSplitter" runat="server" Orientation="Vertical" BorderWidth="0">  
                <telerik:RadPane ID="EntityPane" runat="server" Height="100%" 
                    Width="280px" MinWidth="280" Scrolling="None">  
                    Left Pane  
                </telerik:RadPane> 
                <telerik:RadSplitBar ID="MainPaneSplitBar" runat="server" CollapseMode="Both" /> 
                <telerik:RadPane ID="MainPane" runat="server" Scrolling="None">  
                    <telerik:RadSplitter ID="MainPaneSplitter" runat="server" Orientation="Horizontal" BorderWidth="0">  
                        <telerik:RadPane ID="SelectorPane" runat="server" Height="30px" Width="100%" Scrolling="None" BorderWidth="0" /> 
                        <telerik:RadPane ID="ContentPane" runat="server"/>  
                        <telerik:RadPane ID="BottomPane" runat="server" Height="22" Scrolling="None" /> 
                    </telerik:RadSplitter> 
                </telerik:RadPane> 
            </telerik:RadSplitter> 
        </telerik:RadPane> 
    </telerik:RadSplitter> 

    In a JavaScript function which is executed from within the page which the above markup resides, I am attempting to find the pane "ContentPane" so that I can load a page into it depending upon the user selection.

    Try as I might to find it using the recommended syntax of $find("ContentPane"), I just cannot find this or any other panes on the page - I always get null back.

    How can I access the pane from within the page in which it is defined?

    Thanks in advance.
  2. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 27 Feb 2008 Link to this post

    Hello Jonathan,
    The $find function takes the ClientID of the control as an argument. Therefore, in case the RadSplitter is in an INamingContainer, your code might return null. I have prepared a test page, that demonstrates an approach that should work in all cases:
    <body>  
        <script type="text/javascript">  
        function Test()  
        {  
            var splitter = $find('<%= MainPaneSplitter.ClientID %>');  
            var pane = splitter.getPaneById('<%= ContentPane.ClientID %>');  
            alert(pane);  
        }  
        </script>  
        <form id="form1" runat="server">  
            <asp:ScriptManager ID="ScriptManager1" runat="server" />  
            <telerik:RadSplitter ID="BannerSplitter" runat="server" BorderWidth="0" Height="100%" 
                Orientation="Horizontal" Width="100%">  
                <telerik:RadPane ID="BannerPane" runat="server" BorderWidth="0" Height="30px" Scrolling="None" 
                    Width="100px">  
                    Banner Pane  
                </telerik:RadPane>  
                <telerik:RadPane ID="OuterContentPane" runat="server" Scrolling="None" BorderWidth="0">  
                    <telerik:RadSplitter ID="EntityPaneSplitter" runat="server" Orientation="Vertical" 
                        BorderWidth="0">  
                        <telerik:RadPane ID="EntityPane" runat="server" Height="100%" Width="280px" MinWidth="280" 
                            Scrolling="None">  
                            Left Pane  
                        </telerik:RadPane>  
                        <telerik:RadSplitBar ID="MainPaneSplitBar" runat="server" CollapseMode="Both" />  
                        <telerik:RadPane ID="MainPane" runat="server" Scrolling="None">  
                            <telerik:RadSplitter ID="MainPaneSplitter" runat="server" Orientation="Horizontal" 
                                BorderWidth="0">  
                                <telerik:RadPane ID="SelectorPane" runat="server" Height="30px" Width="100%" Scrolling="None" 
                                    BorderWidth="0" />  
                                <telerik:RadPane ID="ContentPane" runat="server" />  
                                <telerik:RadPane ID="BottomPane" runat="server" Height="22" Scrolling="None" />  
                            </telerik:RadSplitter>  
                        </telerik:RadPane>  
                    </telerik:RadSplitter>  
                </telerik:RadPane>  
            </telerik:RadSplitter>  
              
            <button onclick="Test(); return false;">Find RadPane</button>  
        </form>  
    </body> 


    All the best,
    Tsvetie
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. Jonathan
    Jonathan avatar
    92 posts
    Member since:
    Feb 2007

    Posted 28 Feb 2008 Link to this post

    Hi,

    After your solution didnt work, I knew I had a bigger issue.  It was at that point that I realised I was attempting to access the splitter before it was loaded properly so I was never going to be able to locate it.  Now I have changed my code and can access it fine with your suggestion.

    Many thanks.
Back to Top