Hiding Tab when only one sliding pane and docked

[Albert Shenker]

I have a scenario where only a single sliding pane exists in a sliding zone. When this pane is docked, the tab is unecessary and justs wastes space, so I want to hide it. I have been using the following which has worked untill recently..

 function PaneDockedHandler() {
                var slidingZone=$find("<%= szMyZone.ClientID %>");
               var dockedPane = slidingZone.getPaneById(slidingZone.get_dockedPaneId());

                if (dockedPane) {
                    dockedPane.hideTab();
                }
            }

            function BeforePaneUndockedHandler(slidingZone) {
                var slidingZone=$find("<%= szMyZone.ClientID %>");
               var undockedPane = slidingZone.getPaneById(slidingZone.get_dockedPaneId());
                if (undockedPane) {
                    undockedPane.showTab();
                }
            }

<telerik:RadSplitter ID="rsWB"
                    runat="server"
                    Height="100%"
                    Width="100%"
                    Orientation="Vertical"
                    ResizeWithParentPane="False"
                    ResizeWithBrowserWindow="True"
                    BorderSize="0"
                    VisibleDuringInit="False"
                    Skin="Windows7" >
             <telerik:radpane runat="server" id="lPane" Scrolling="None" Width="22px" Height="100%">
                <telerik:RadSlidingZone id="szMyZone" runat="server" width="22px" Height="100%" SlideDuration="250">
                    <telerik:RadSlidingPane id="spProcess" title="Process Properties" runat="server" width="200px" Height="100%" Scrolling="none" OnClientDocked="PaneDockedHandler" OnClientBeforeUnDock="BeforePaneUndockedHandler">

                My Pane Content
                    </telerik:RadSlidingPane>
                </telerik:RadSlidingZone>


            </telerik:radpane>
<telerik:radpane runat="server" id="rPane" Scrolling="None" Width="100%" Height="100%">
Right Pane Content
</telerik:radpane>
</telerik:RadSplitter >

Since upgrading to more recent controls, now the pane docked/undocked handlers leave a space between the left and right panes equal to the width of the tabs. (see attached area shown in red). How can I get this to work with the latest controls?

BTW.. I think this ought to be the default behavior. When there is only a single sliding pane, the tabs are unecessary and should be hidden,

[Svetlina Anati]

Hello Albert,

Thank you for the provided code, I built up a test demo based on it and I was able to reproduce the problem. It comes from the fact that you hide the tab after the sliding pane is already docked and its parent pane is already resized with the tab taken into account.

In order to get the desired result you should hook up the OnClientBeforeDock event instead as shown below:

<form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>

    <script type="text/javascript">
        function PaneDockedHandler() {
            var slidingZone = $find("<%= szMyZone.ClientID %>");
            var dockedPane = slidingZone.getPaneById(slidingZone.get_dockedPaneId());

            if (dockedPane) {
                dockedPane.hideTab();
            }
        }

        function BeforePaneUndockedHandler(slidingZone) {
            var slidingZone = $find("<%= szMyZone.ClientID %>");
            var undockedPane = slidingZone.getPaneById(slidingZone.get_dockedPaneId());
            if (undockedPane) {
                undockedPane.showTab();
            }
        }
    </script>

    <telerik:RadSplitter ID="rsWB" runat="server" Height="100%" Width="100%" Orientation="Vertical"
        ResizeWithParentPane="False" ResizeWithBrowserWindow="True" aBorderSize="0" VisibleDuringInit="False"
        Skin="Windows7">
        <telerik:RadPane runat="server" ID="lPane" Scrolling="None" Width="22px" Height="100%">
            <telerik:RadSlidingZone ID="szMyZone" runat="server" Width="22px" Height="100%" SlideDuration="250">
                <telerik:RadSlidingPane ID="spProcess" Title="Process Properties" runat="server"
                    Width="200px" Height="100%" Scrolling="none" OnClientBeforeDock="PaneDockedHandler"
                    OnClientBeforeUndock="BeforePaneUndockedHandler">
                    My Pane Content
                </telerik:RadSlidingPane>
            </telerik:RadSlidingZone>
        </telerik:RadPane>
        <telerik:RadPane runat="server" ID="rPane" Scrolling="None" Width="100%" Height="100%">
            Right Pane Content
        </telerik:RadPane>
    </telerik:RadSplitter>
    </form>

Regards,
Svetlina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[venkatesh]

HI ,

  I have followed your link (http://www.telerik.com/community/forums/aspnet/splitter/hide-tabs-if-slider-pane-docked.aspx) and also ur code but the Gap still remains the same between the Sliding panel and the right RadPanes . So could you please help me out in solving the issue.

  Here iam atttaching the screenshot of my screen....  If any one has solved it can you please give the resolution for the same. :) & here my code too ....

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        html, body, form
        {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #test
        {
            border : solid 1px Black;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <telerik:radscriptmanager id="script" runat="server">
        </telerik:radscriptmanager>
        <telerik:RadSplitter ID="MainSpliter" runat="server"  ResizeWithParentPane="true"
            Skin="Windows7" Height="100%" Width="100%">
            <telerik:RadPanes ID="LeftPanel" runat="server" Width="22"    Scrolling="None">
                <telerik:RadSlidingZone ID="SLIDING" CssClass="test"  runat="SERVER" >
                    <telerik:RadSlidingPane ID="PANEL1" OnClientDocked="OnClientPaneDocked_QT" OnClientBeforeUndock="OnClientBeforePaneUndocked_QT"
                        runat="SERVER" Title="QUICK SEARCH" EnableDock="TRUE">
                        This pane has <b>EnableDock</b> property set to false. The default value of the
                        property is <b>true</b>.<br />
                        <br />
                        You can only resize and close this pane.
                    </telerik:RadSlidingPane>
                </telerik:RadSlidingZone>
            </telerik:RadPanes>

            <%-- <telerik:RadSplitBar ID="RadSplitBar1"  runat="server"  CollapseMode="Forward">
            </telerik:RadSplitBar>--%>
   <%--<telerik:RadSplitBar ID="RadSplitbar1" runat="server">
            </telerik:RadSplitBar>--%>
            <telerik:RadPanes ID="MiddlePane" runat="server">
                Main Pane</telerik:RadPanes>
        </telerik:RadSplitter>

        <script type="text/javascript">
            function OnClientPaneDocked_QT(sender, eventArgs) {

                var slidingZone = $find("<%= SLIDING.ClientID%>");
                var container = slidingZone.getTabsContainer();
                var dockedPane = slidingZone.getPaneById(slidingZone.get_dockedPaneId());
                if (dockedPane) {
                    dockedPane.hideTab();
                    dockedPane.get_element().style.width = dockedPane.get_width() + "px"

                }
            }

            function OnClientBeforePaneUndocked_QT(sender, eventArgs) {
                var slidingZone = $find("<%= SLIDING.ClientID%>");
                var container = slidingZone.getTabsContainer();
                var undockedPane = slidingZone.getPaneById(slidingZone.get_dockedPaneId());
                if (undockedPane) {
                    undockedPane.showTab();
                }
            }


        </script>

    </div>
    </form>
</body>
</html>

 

[Dobromir]

Hi Venkatesh,

The extra visible space is actually the space taken by the TabContainer's element. To fill this extra space you need to add the width of the TabContainer 's element to the size of the sliding pane's content element and subtract it when undocking it.

Following is the modified JavaScript code fixing the issue:

function OnClientPaneDocked_QT(sender, eventArgs)
{
    var slidingZone = $find("<%= SLIDING.ClientID%>");
    var container = slidingZone.getTabsContainer();
    var extraWidth = container.clientWidth;

    var dockedPane = slidingZone.getPaneById(slidingZone.get_dockedPaneId());
    if (dockedPane)
    {
        dockedPane.hideTab();
        dockedPane.getContentContainer().style.width = (dockedPane.get_width() + extraWidth) + "px";
    }
}

function OnClientBeforePaneUndocked_QT(sender, eventArgs)
{
    var slidingZone = $find("<%= SLIDING.ClientID%>");
    var container = slidingZone.getTabsContainer();
    var extraWidth = container.clientWidth;

    var undockedPane = slidingZone.getPaneById(slidingZone.get_dockedPaneId());
    if (undockedPane)
    {
        undockedPane.showTab();
        undockedPane.getContentContainer().style.width = (undockedPane.get_width() - extraWidth) + "px";
    }
}

Best wishes,
Dobromir
the Telerik team