Expanding/collapsing panes programmatically?

10 posts, 0 answers
  1. Chris
    Chris avatar
    12 posts
    Member since:
    Jun 2009

    Posted 14 Aug 2009 Link to this post

    I've tried implementing the client-side example at http://demos.telerik.com/aspnet-ajax/splitter/examples/clientsideapi/defaultcs.aspx without success.  On my page, when ToggleCollapsePane runs I just get the error 'splitter is null'.  I read somewhere or other while going through documentation on this site that getting the client-side object only works if the script is nested in a <body> tag, which this isn't; the page hasn't got a <body> tag, everything's nested in a content panel.  Is this a major problem?

    Is there any way to expand/collapse a pane in the code behind, rather than trying to use the client-side API?
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 18 Aug 2009 Link to this post

    Hi Chris,

    In the example you have linked the script is put in the body because the ClientID (by using code blocks - <%%>) should be evaluated and you cannot do this in the head. This is general ASP.NET knowledge when you want to evaluate the actual client id and it is not specifically related to RadControls. What I can suggest is that you get the actual client id and hard code it (which is a common solution but not that good one) or to wrap the script in RadCodeBlock. In case you need further assistance, please provide some sample code which reproduces the issue and I will help you resolve it.

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Rajasekar Nammalvar
    Rajasekar Nammalvar avatar
    16 posts
    Member since:
    Aug 2009

    Posted 11 Sep 2009 Link to this post

    Hi,
    I am trying to collape the pane using the client side script. But it's not happening. Intially in the Radpane control, I have set the Collaped property as "true".
    <telerik:RadSplitter id="radSplitterMain" runat="server"   
     
    style="left: 0px; top: 0px;" Width="965" Height="450" ResizeMode="EndPane">  
     
    <telerik:RadPane id="leftPane" runat="server" Width="203px" MinWidth="203" MaxWidth="203" Scrolling="None" > 
     
    </telerik:RadPane> 
    ...  
    ...  
     
    <telerik:RadSplitBar id="radSplitbarHorizontal" runat="server" CollapseMode="Backward" /> 
     
    <telerik:RadPane id="bottomPane" runat="server" height="45%" MaxHeight="300" Collapsed="true" scrolling="None">  
     
    </telerik:RadPane> 
     
    </telerik:RadSplitter> 

     

     

     

     

     

    I have set the following code in the Script,
        var pane = $find(getUserControlElement("bottomPane").id);  
        pane.set_collapsed(false); 
           OR
        var splitter = $find(getUserControlElement("radSplitterMain").id);  
        var pane = splitter.getPaneById("WebMappingControl1_bottomPane");  
        pane.set_collapsed(false);  
        //pane.Collapse();  
        //pane.Expand(pane); 

    I have seen that Pane value as False in the debug mode. But collaped not happened. Use the "Pane.Expand", we can able to expand the splitter with some fixed size but can't able to move the splitter manually.

    Please mention the issue in my code.

    Regards,
    Rajasekar N 
  5. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 16 Sep 2009 Link to this post

    Hello Rajasekar,

    I am afraid I could not completely understand your layout. Do you by any chance have nested splitters? I noticed that you have set MinWidth and MaxWidth for the first pane and in case both the panes are in the same splitter (no matter one is called left and one - bottom) the second pane will not be initially collapsed if you do not remove the MaxWidth of the other pane in case you are using teh latest version.

    In order to be able to help, I will need to examine a fully runnable sample page and also I should have more details about the exact version of RadControls you are using. Once I receive this information, I will do my best to help.


    All the best,
    Svetlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  6. Rajasekar Nammalvar
    Rajasekar Nammalvar avatar
    16 posts
    Member since:
    Aug 2009

    Posted 16 Sep 2009 Link to this post

    Hi Svetlina:

    Thank you for your reply and also I should appreciate the Telerik controls good looks and it contains more functionality.

    I can't able to attach the page but I will explain you the scenario. I have one splitter control, inside that I have put the 3 rad panes (Left, Top and bottom). The left & top pane has stable mode (no need of collapse or expand). By default the bottom pane Collaped property as "true".  Now in the top pane I have the map control. While selecting some region in that map control the bottom pane should be expand and I have to show the result in the bottom pane grid. So that while selecting the map region I am calling the script and inside the script I have set the bottom pane Collaped property as "false". But collaped has not happened (bottom pane has not moved).

    Version: RadControls_for_ASP.NET_AJAX_2009_1_311_dev

    Splitter Code:

    <telerik:RadSplitter id="radSplitterMain" runat="server" style="left: 0px; top: 0px;" Width="965" Height="450" ResizeMode="EndPane">  
        <telerik:RadPane id="leftPane" runat="server" Width="203px" MinWidth="203" MaxWidth="203" Scrolling="None" > 
            <telerik:RadSplitter id="radLeftPaneSplitter" runat="server" Orientation="Horizontal" Height="430px" Width="100%" > 
                <telerik:RadPane id="radLeftPaneTop" runat="server" Height="430px" Width="100%">  
                    <telerik:RadMultiPage ID="radMPMap" Height="96%" runat="server" Width="100%" SelectedIndex="0">    
                        <telerik:RadPageView ID="pvTOC" runat="server" Selected="true">  
                            <asp:Panel ID="pnlHeaderLayer" runat="server" Height="30px" HorizontalAlign="Center" Width="202px" CssClass="Toolbar">  
                                <asp:Label ID="lblLayerHeader" runat="server" ForeColor="White" Height="18px" Text="Layers" value="Layers" Width="72px" CssClass="TabHeader" /> 
                            </asp:Panel> 
                            <esri:Toc ID="Toc1" runat="server" BorderColor="#2C4182" BorderStyle="Solid" BorderWidth="1px" 
                                BuddyControl="Map1" Width="200px" CssClass="SearchBG" OnNodeClicked="Toc1_NodeClicked" 
                                TocType="SwatchList" OnNodeChecked="Toc1_NodeChecked" ExpandDepth="1" Height="400px" /> 
                        </telerik:RadPageView> 
                        <telerik:RadPageView ID="pvSearchControl" runat="server">  
                            <asp:Panel ID="pnlHeaderSearch" runat="server" Height="30px" HorizontalAlign="Center" Width="202px" CssClass="Toolbar">   
                                <asp:Label ID="lblSearchHeader" runat="server" ForeColor="White" Height="18px" Text="Search" value="Search" Width="72px" CssClass="TabHeader" /> 
                            </asp:Panel> 
                            <uc4:Search ID="SearchControl1" runat="server"></uc4:Search> 
                        </telerik:RadPageView> 
                    </telerik:RadMultiPage> 
                </telerik:RadPane> 
                <telerik:RadPane id="radLeftPaneBottom" runat="server" MaxHeight="20" MinHeight="20" Height="20px">  
                    <telerik:RadTabStrip ID="tabMapControl" runat="server" MultiPageID="radMPMap" SelectedIndex="0" Skin="Web20"  Width="200px">  
                        <Tabs> 
                            <telerik:RadTab Text="Layers" PageViewID="pvTOC" Width="80px" Selected="True"></telerik:RadTab> 
                            <telerik:RadTab Text="Search" PageViewID="pvSearchControl" Width="80px"></telerik:RadTab> 
                        </Tabs> 
                    </telerik:RadTabStrip> 
                </telerik:RadPane> 
            </telerik:RadSplitter> 
        </telerik:RadPane> 
        <telerik:RadSplitBar id="radSplitbarVertical" runat="server" CollapseMode="Forward" BorderStyle="Double" Width="20" /> 
        <telerik:RadPane id="rightPane" runat="server" scrolling="none">   
            <telerik:RadSplitter id="radSplitterRight" runat="server" liveresize="true" orientation="Horizontal">  
                <telerik:RadPane id="topPane" runat="server" Height="55%" Width="100%" scrolling="None" > 
                    <asp:Panel   
                        ID="pnlToolbarSplt" runat="server" CssClass="Toolbar" Height="30px" Style="z-index: 102; top: 0px" Width="100%">   
                        <esri:Toolbar ID="Toolbar1" runat="server"></esri:Toolbar> 
                    </asp:Panel> 
                    <%-- Map Display --%> 
                    <div id="divMap" style="width: 965px; height: 450px; top: 0px; left: 0px; z-index: 105; overflow: hidden; background-color:   
                        White; border-right: #2C4182 1px solid; border-top: #2C4182 1px solid; border-left: #2C4182 1px solid; border-bottom: #2C4182 1px solid;">   
                        <esri:Map ID="Map1" runat="server" MapResourceManager="MapResourceManager1" Height="100%" 
                            Width="100%" BackColor="#FFFFDC" OnExtentChanged="Map1_ExtentChanged1"></esri:Map>        
                    </div> 
                </telerik:RadPane> 
            <telerik:RadSplitBar id="radSplitbarHorizontal" runat="server" CollapseMode="Backward" /> 
                <telerik:RadPane id="bottomPane" runat="server" height="45%" MaxHeight="300" Collapsed="true" scrolling="None">  
                    <uc5:ResultsControl ID="ResultsControl1" runat="server" /> 
            </telerik:RadPane> 
            </telerik:RadSplitter> 
        </telerik:RadPane> 
    </telerik:RadSplitter> 

     

    Regards,

    Rajasekar N

  7. Jim
    Jim avatar
    31 posts
    Member since:
    Jun 2009

    Posted 21 Sep 2009 Link to this post

    How exactly do you expand the collapsed RadPane?

    To expand a collapsed RadPane on the client you should use the radPane.expand() method.
    To collapse an expanded RadPane on the client you should use the radPane.collapse() method.
     
    The following JavaScript will collapse an expanded pane and expand a collapsed one:

    <script type="text/javascript"
        function CollapseExpand() 
        { 
            var radPane = $find("bottomPane"); 
     
            if (radPane.get_collapsed()) 
            { 
                radPane.expand(); 
            } 
            else 
            { 
                radPane.collapse(); 
            } 
        }        
    </script> 

  8. Rajasekar Nammalvar
    Rajasekar Nammalvar avatar
    16 posts
    Member since:
    Aug 2009

    Posted 22 Sep 2009 Link to this post

    Issue resolved and problem due I was using the telerik earlier version "RadControls_for_ASP.NET_AJAX_2009_1_311_dev". Currently I have installed the "RadControls_for_ASP.NET_AJAX_2009_2_826_dev". It's working fine.
    Also I have use the client script like the following,

        var splitter = $find(getUserControlElement("radSplitterRight").id);  
        var pane = splitter.getPaneById("bottomPane");  
        if (pane.get_collapsed())   
        {  
            pane.expand();  
        } 

    FYI: If we have the splitter control inside the Web User Control then we have to use the user control name as prefix (WebUserControl1_bottomPane) for the pane ID.

        var splitter = $find(getUserControlElement("radSplitterRight").id);  
        var pane = splitter.getPaneById("WebUserControl1_bottomPane");  
        if (pane.get_collapsed())   
        {  
            pane.expand();  
        } 

    Thanks JIM.

    Regards,
    RAJASEKAR N
  9. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 22 Sep 2009 Link to this post

    Hi Rajasekar,

    I am glad that you were able to solve the problem. As to your remark about the User Control, the UserControl inherits from TemplateControl which implements the INamingContainer interface. This means that it changes the IDs of the controls it contains no matter they are standard controls or RadControls and this is not directly related to our controls but to general ASP.NET concepts.

    You can find more information about INaming Containers below:

    http://msdn.microsoft.com/en-us/library/system.web.ui.inamingcontainer.aspx

    There are also other techniques that can be used except for hard coding and you can find different solutions on the web and choose the one which best meets your requirements.



    Greetings,
    Svetlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  10. Yano
    Yano avatar
    5 posts
    Member since:
    Sep 2009

    Posted 17 Aug in reply to Jim Link to this post

    Hello, is there any way how to set pane expandedsize in javascript?

    thanks

  11. Vessy
    Admin
    Vessy avatar
    1389 posts

    Posted 22 Aug Link to this post

    Hi Yano,

    When a RadPane is expanded it is resized to its actual size (the width and height set in the markup). If you want to change the expanded size of the pane you can use its resize() method.

    Regards,
    Vessy
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017