This is a migrated thread and some comments may be shown as answers.

Expanding/collapsing panes programmatically?

9 Answers 799 Views

Splitter

This is a migrated thread and some comments may be shown as answers.

9 Answers, 1 is accepted

answered on 18 Aug 2009, 01:28 PM

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.

answered on 11 Sep 2009, 08:48 AM

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);

    
                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

answered on 16 Sep 2009, 08:36 AM

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.

answered on 16 Sep 2009, 09:10 AM

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

answered on 21 Sep 2009, 06:59 AM

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>

answered on 22 Sep 2009, 09:23 AM

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

answered on 22 Sep 2009, 01:33 PM

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.