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

Is there any server-side equivalent of the endpane expand/collapse call?

6 Answers 112 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Boris
Top achievements
Rank 1
Boris asked on 07 Apr 2014, 08:45 PM
I'm in a bind for time and I need a fast answer.  I have a web page that currently uses JavaScript to expand/collapse a Splitter bar in the OnClientSelectedIndexChanged of  a RadComboBox

var splitter = $find("<%=RadSplitterEditor.ClientID%>");
var endPane = splitter.getEndPane();    
 endPane.expand(Telerik.Web.UI.SplitterDirection.Backward);

Is there any simple way to duplicate this behavior on the server side, using the RadAjaxManager?

6 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 08 Apr 2014, 06:47 AM
Hi Boris,

For expanding the sliding pane from code behind  you need to manually set the ExpandedPanelId property of RadSlidingZone. Please have a look into the sample code snippet which works fine at my end.

ASPX:
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadComboBox1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadSplitter1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadComboBox ID="RadComboBox1" runat="server" EmptyMessage="select" AutoPostBack="true"
    OnSelectedIndexChanged="RadComboBox1_SelectedIndexChanged">
    <Items>
        <telerik:RadComboBoxItem Text="Expand/Collapse" />
    </Items>
</telerik:RadComboBox>
<telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" EnableEmbeddedSkins="true">
    <telerik:RadPane ID="LeftPane" runat="server" Width="22" Height="100%">
        <telerik:RadSlidingZone ID="SlidingZone1" runat="server" Width="22" ClickToOpen="true">
            <telerik:RadSlidingPane ID="Pane1" Title="Highlights" runat="server" >
                <table>
                    <tr>
                        <td>
                            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                        </td>
                    </tr>
                </table>
            </telerik:RadSlidingPane>
        </telerik:RadSlidingZone>
    </telerik:RadPane>
    <telerik:RadPane ID="MiddlePane" runat="server">
        <div style="width: 100%; height: 100%;">
            <div id="documentViewer" style="position: relative; width: 100%; height: 100%">
            </div>
        </div>
    </telerik:RadPane>
</telerik:RadSplitter>

C#:
protected void RadComboBox1_SelectedIndexChanged(object sender, Telerik.Web.UI.RadComboBoxSelectedIndexChangedEventArgs e)
{
    RadSlidingZone slidingzone = (RadSlidingZone)RadSplitter1.GetPaneById("LeftPane").FindControl("SlidingZone1");
    slidingzone.ExpandedPaneId = "Pane1";
}

Thanks,
Princy.
0
Boris
Top achievements
Rank 1
answered on 08 Apr 2014, 12:58 PM
Actually I've never heard of this RadSlidingZone before.  Is this something new? 
(My current page is an excessively complex collection of RadPanes and RadSplitBars within a RadSplitter.)
0
Boris
Top achievements
Rank 1
answered on 08 Apr 2014, 03:07 PM
Let me modify my previous answer.  I believe use of sliding panels is not practical at this time.  It would be too big a rework of the page.  

I need to be able to expand and collapse one RadPane in the server side code using Ajax (i.e. without a complete postback).  
Is this possible?  
0
Vessy
Telerik team
answered on 10 Apr 2014, 01:09 PM
Hi Boris,

You can easily collapse/expand a RadPane on the server, by configuring its Collapsed property:
RadPane3.Collapsed = true;
//RadPane3.Collapsed = false;

There is no problem to do it on Ajax request, but the specific thing when ajaxifying RadSplitter is that you cannot ajaxify directly a RadPane. You have to update either the whole Splitter, or the content of a RadPane, so the Splitter will be able to behave properly. Detaile dinformation on the sbject is available in this help article: AJAX updates

I hope this information will be helpful for you.

Regards,
Vessy
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Boris
Top achievements
Rank 1
answered on 11 Apr 2014, 09:03 PM
For the sake of testing, I 'ajaxified' the splitter.

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadButton2">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadSplitter1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

(First of all, is that what you had in mind?)

Once I did this I found I could control the expand/collapse of the pane in question in the button's click event.

This seems to work whether the button is inside or outside the splitter.  
Since most of the controls that determine whether the pane should be expanded are inside the splitter, I have to ask if this is a good practice.

Second, is there any reason why merely 'ajaxifying' the splitter should affect its height?  The splitter's height is set to 100%.  Just adding the Ajax declaration as shown above caused the page to come up with the splitter at only about half the page.  There are no height settings in the code behind that I am aware of. 








0
Boris
Top achievements
Rank 1
answered on 14 Apr 2014, 05:49 PM
I'm going to start a new ticket.  It looks like I've run into a splitter resize problem of the sort mentioned here:  http://demos.telerik.com/aspnet-ajax/splitter/examples/resizewithwindow/defaultcs.aspx
Tags
Splitter
Asked by
Boris
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Boris
Top achievements
Rank 1
Vessy
Telerik team
Share this question
or