How to prevent nested splitters from pulling each other around?

[Sean]

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!

[Dobromir]

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

[Sean]

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.

[Dobromir]

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