Resizing on Expanding and Colapsing

4 posts, 1 answers
  1. SSirica
    SSirica avatar
    60 posts
    Member since:
    Jan 2007

    Posted 21 Dec 2016 Link to this post

    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.  

  2. Answer
    Vessy
    Admin
    Vessy avatar
    1569 posts

    Posted 23 Dec 2016 Link to this post

    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.
  3. SSirica
    SSirica avatar
    60 posts
    Member since:
    Jan 2007

    Posted 23 Dec 2016 Link to this post

    Outstanding!  Thank you Vessy.  That's exactly the behavior I was looking for.  
  4. Vessy
    Admin
    Vessy avatar
    1569 posts

    Posted 23 Dec 2016 Link to this post

    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.
Back to Top