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

Resizing on Expanding and Colapsing

3 Answers 12 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
SSirica
Top achievements
Rank 2
Veteran
Iron
SSirica asked on 21 Dec 2016, 07:52 PM

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.  

3 Answers, 1 is accepted

Sort by
0
Accepted
Vessy
Telerik team
answered on 23 Dec 2016, 11:08 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
SSirica
Top achievements
Rank 2
Veteran
Iron
answered on 23 Dec 2016, 03:12 PM
Outstanding!  Thank you Vessy.  That's exactly the behavior I was looking for.  
0
Vessy
Telerik team
answered on 23 Dec 2016, 03:32 PM
Hi,

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

Regards,
Vessy
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Splitter
Asked by
SSirica
Top achievements
Rank 2
Veteran
Iron
Answers by
Vessy
Telerik team
SSirica
Top achievements
Rank 2
Veteran
Iron
Share this question
or