How to prevent nested splitters from pulling each other around?

4 posts, 0 answers
  1. Sean
    Sean avatar
    200 posts
    Member since:
    Nov 2010

    Posted 08 Feb 2011 Link to this post

    Hi All,

    I am experiencing this problem: My page has a RadSplitter with horizontal orientation. Inside of this RadSplitter are two RadPanes separated by a horizontal RadSplitterBar. I then nest another RadSplitter with horizontal orientation inside of one of the RadPanes. When the user drags one of the RadBars, depending on the direction it moves, it pulls the other RadSplitterBar along by a fraction of the amount moved (based on how many RadSplitterBars it is pulling). 

    I tried setting the splitter's ResizeWithParentPane to false, but this did not yield the intended effect (at least not immediately). This may be the way to go, but perhaps I need to be toggling this on/off. I am unsure. I also tried setting the splitter's ResizeMode to the various non-default options, but I didn't see any change in functionality which would have an affect on my issue.

    Attached are before/after photos. In the after photo I have only grabbed the lower RadSplitterBar and pulled it downward. In my eyes, that RadSplitterBar should only be controlling the lower and middle pane's height. Yet, when I drag it down, the lower pane is resized and the two other panes' heights are each increased by 50% of the height removed from the lower pane.

    Thanks for your time.

    EDIT: On a completely unrelated note (trying not to completely spam the forums..): How do I apply CSS to just one RadSlidingPane? 

    I would like to add a small amount of padding to the top of the first icon. 

    .RadSplitter .rspPaneTabContainer .rspPaneTabIcon { padding-top: 5px;}

    This applies it to all of my panes. I tried various combinations attempting to get it to apply to just the first pane, but to no avail. Thanks!
  2. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 14 Feb 2011 Link to this post

    Hi Sean,

    You can experience the mentioned behavior in case where both panes are configured as a "free size" panes (without specified size). When both panes do not have configured size the splitter is equally separated by these panes and when the splitter resize both panes resize as well.

    I am not quite sure why setting ResizeWithParentPane to false did not work for your scenario. Could you please provide the exact splitters' configurations so we can reproduce the problem locally and investigate it further?

    Regarding your second question, at present, it is not possible to apply the required modification using CSS only. To achieve the required decoration you can use the following JavaScript:
    <script type="text/javascript">
        function OnClientSlidingZoneLoaded(slidingZone, args)
        {
            var firstSlidingPane = slidingZone.getPaneById("<% =RadSlidingPane1.ClientID %>"); // get reference to the first sliding pane
            var firstTab = firstSlidingPane.getTabContainer();
     
            Sys.UI.DomElement.addCssClass(firstTab, "paddingClassName"); // add CssClass containing the required docarations
        }
    </script>


    Regards,
    Dobromir
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Sean
    Sean avatar
    200 posts
    Member since:
    Nov 2010

    Posted 14 Feb 2011 Link to this post

    Hi Dobromir,

    Thanks for the javascript. That will work for my second question.

    Regarding using ResizeWithParentPane: Its not that setting ResizeWithParentPane to false doesn't work (it does!), its that the functionality it provides is not what I am looking for. 

    If you will look at the attached image you will see that the vertical bar does not extend all the way to the bottom of the white pane. This is because ResizeWithParentPane is set to false. If I create the bar, let it expand, and then set this property to false it immediately snaps back to the incorrect size the second the page reinitializes again, since it is a dynamic control. Additionally, if I have a horizontal bar with a vertical bar beneath it, then move the horizontal bar up, the vertical bar would not resize to keep the content looking correct. 

    I only want the panes which are being indirectly affected by this RadSplitBar movement to not be affected and only if they're the same orientation. A horizontal splitbar moving up should allow for vertical bars to resize still, as well as all the panes directly touching it, but other panes should not be allowed to resize. 

    I was looking into writing something like this, but I am not exactly sure where to start. I was thinking about the OnClientResizing event for all the RadPanes. I'm not sure how to set the server-side property, though, since I am only able to capture the event client-side. In addition, I'm not sure how to tell which panes are being indirectly affected -- since they will all be firing the same event for the same reason, but some of them are directly touching a RadSplitBar.
  5. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 18 Feb 2011 Link to this post

    Hi Sean,

    If I understand your scenario correctly, in case where the a horizontal splitter is nested inside another horizontal splitter, you want, if the splitbar of the parent splitter is dragged only the last(first) pane to be resized. To achieve this, you need to:
    1. Set the most inner splitter's ResizeWithParentPane property to false.
    2. Set the most inner splitter's Width and Height to 100%.
    3. Assign a handler to the RadSplitter's ClientBeforeResize client-side event and resize only the required pane with the new delta.
    Here is a sample implementing the above mentioned approach. Please note that it might require to be extended to match the exact scenario:
    <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="100%">
        <telerik:RadPane ID="RadPane1" runat="server" Width="22px">
            <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server">
                <telerik:RadSlidingPane ID="RadSlidingPane1" runat="server" Title="Pane1"></telerik:RadSlidingPane>
            </telerik:RadSlidingZone>
        </telerik:RadPane>
        <telerik:RadPane ID="RadPane2" runat="server">
            <telerik:RadSplitter ID="RadSplitter2" runat="server" Orientation="Horizontal">
                <telerik:RadPane ID="RadPane2_1" runat="server">
                    <telerik:RadSplitter ID="RadSplitter3" runat="server" Orientation="Horizontal"
                        OnClientBeforeResize="OnClientBeforeResize" OnClientResized="OnClientResized"
                        ResizeWithParentPane="false" Width="100%" Height="100%"
                        >
                        <telerik:RadPane ID="RadPane3_1" runat="server"></telerik:RadPane>
                        <telerik:RadSplitBar ID="RadSplitBar3_1" runat="server"></telerik:RadSplitBar>
                        <telerik:RadPane ID="RadPane3_2" runat="server"></telerik:RadPane>
                        <telerik:RadSplitBar ID="RadSplitBar3_2" runat="server"></telerik:RadSplitBar>
                        <telerik:RadPane ID="RadPane3_3" runat="server"></telerik:RadPane>
                    </telerik:RadSplitter>
                </telerik:RadPane>
                <telerik:RadSplitBar ID="RadSplitBar2_1" runat="server"></telerik:RadSplitBar>
                <telerik:RadPane ID="RadPane2_2" runat="server"></telerik:RadPane>
            </telerik:RadSplitter>
        </telerik:RadPane>
    </telerik:RadSplitter>
     
    <script type="text/javascript">
        var isCanceled = false;
        var isInitialResize = true;
        function OnClientBeforeResize(splitter, args)
        {
            if (!splitter.isVertical())
            {
                if (!isCanceled && !isInitialResize)
                {
                    args.set_cancel(true);
                    isCanceled = true;
     
                    var oldHeight = splitter.get_height();
                    var newHeight = args.get_newHeight();
                    var delta = newHeight - oldHeight;
     
                    var lastPane = splitter.getPaneById("RadPane3_3");
     
                    lastPane.set_height(lastPane.get_height() + delta);
                }
     
                isInitialResize = false;
            }
        }
     
        function OnClientResized(splitter, args)
        {
            isCanceled = false;
        }
    </script>

    I hope this helps.
    Best wishes,
    Dobromir
    the Telerik team
Back to Top