Resizing on Expanding and Colapsing

[SSirica]

I have a very simple example setup like this:

<telerik:RadSplitter ID="splitterContent" runat="server" Width="100%" Height="100%" Orientation="Vertical">
    <telerik:RadPane ID="rpLeft" runat="server" Width="100%" Height="50%" OnClientExpanded="filterPane_Expanded" OnClientCollapsed="filterPane_Collapsed" BackColor="Blue" ForeColor="White">
        Left Side
    </telerik:RadPane>
    <telerik:RadSplitBar runat="server" ID="RadSplitbar1" CollapseMode="Forward">
    </telerik:RadSplitBar>
    <telerik:RadPane ID="rpRight" runat="server" Width="0%" Height="50%" BackColor="Red" ForeColor="White">
        Right Side
    </telerik:RadPane>
</telerik:RadSplitter>

 

with the following javascript code:

<script type="text/javascript">
    var $ = $telerik.$;

    function filterPane_Collapsed() {
        //resize resultsPane
        debugger;
        var winWidth = $(window).width();
        $("#rpRight").resize(winWidth / 2);
        $("#rpLeft").resize(winWidth / 2);
    }

    function filterPane_Expanded() {
        //resize resultsPane
        debugger;
        var winWidth = $(window).width();
        $("#rpLeft").resize(winWidth);
        $("#rpRight").resize(0);
    }
</script>

 

Now let me explain what I'm trying to do.  When the form loads I would like the left pane to be displayed at 100% and the right pane to be 0% essentially having the right pane not visible.  When a user presses the arrow on the SplitterBar to expand the right side I would like the proportions to go to 50% for each side.  At this point the Splitter bar would have an arrow pointing to the right.  No mater where is has been move when pressed I would like the proportions to go back to 100% for the left and 0% for the right.  I've tried .resize I've tried .set_width nothing seems to be setting the width....at all.  

[Vessy]

Hi Steve,

The desired behavior can be achieved only by configuring the Splitter, without any additional JavaScript logic needed. What you should do is:
 - Set the Width of both RadPanes to 50%;
 - Set the CollapseMode of the Splitbar to "Backward" (so only the second pane can be collapsed)
 - Set the Collapsed property of the second pane to True, so it will be initially hidden

You can try the following configuratiion:

<telerik:RadSplitter ID="splitterContent" runat="server" Width="100%" Height="100%" Orientation="Vertical">
    <telerik:RadPane ID="rpLeft" runat="server" Width="50%" BackColor="Blue" ForeColor="White">
        Left Side
    </telerik:RadPane>
    <telerik:RadSplitBar runat="server" ID="RadSplitbar1" CollapseMode="Backward">
    </telerik:RadSplitBar>
    <telerik:RadPane ID="rpRight" runat="server" Width="50%" BackColor="Red" ForeColor="White" Collapsed="true">
        Right Side
    </telerik:RadPane>
</telerik:RadSplitter>

Regards,
Vessy
Telerik by Progress

[SSirica]

Outstanding!  Thank you Vessy.  That's exactly the behavior I was looking for.  

[Vessy]

Hi,

I am really glad I managed to help, Steve. Have a merry Christmas! :)

Regards,
Vessy
Telerik by Progress