Hide tab using CSS

3 posts, 0 answers
  1. Helen
    Helen avatar
    42 posts
    Member since:
    Nov 2013

    Posted 01 Apr 2014 Link to this post


    Hi,

    I have a single sliding pane setup horizontally that is used like a quick search window. Is it possible to hide the tab when the user docks the pane using CSS?
    I'm doing something like this in my CSS, please tell me what I'm missing...
    <style type="text/css">
        .paneTabContainerExpandedHorizontal, rspSlidePane
        {
            /*visibility:hidden !important;*/
            display:none !important;
        }
        html, body, form
        {
            height: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
        }
    </style>

    This is my html code:

    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server" ></telerik:RadScriptManager>
             
            <script type="text/javascript">
                function PaneDockedHandler(sender, eventArgs) {
     
                    var slidingZone = $find("<%= SpeedSearchSlidingZone.ClientID %>");
                    var pane = slidingZone.getPaneById(slidingZone.get_dockedPaneId());
                    if (pane) {
                        pane.hideTab();
                    }
     
                }
            </script>
     
            <telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Vertical" width="100%" Height="100%">
                 
                <telerik:RadPane ID="LeftPane" runat="server" Width="22px" Scrolling="None" >
                    <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" Height="100%">
                        <telerik:RadSlidingPane ID="LeadSearchSlidePane" Title="Search Criteria" runat="server" width="150px">
                            <uc1:LeadSearchCriteria runat="server" ID="LeadSearchCriteria" />
                        </telerik:RadSlidingPane>
                        <telerik:RadSlidingPane ID="TreeListSlidePane" Title="Tree View" runat="server">
                            <uc2:LeadSearchTreeView runat="server" ID="LeadSearchTreeView" />
                        </telerik:RadSlidingPane>
                    </telerik:RadSlidingZone>
                </telerik:RadPane>
     
                <telerik:RadSplitBar ID="RadSplitBar1" runat="server" BorderWidth="1px" Width="1px" />
                <telerik:RadPane ID="RightPane" runat="server" >
                    <telerik:RadSplitter ID="RadSplitter3" runat="server" Orientation="Horizontal" Width="100%" Height="100%">
     
                        <telerik:RadPane ID="SpeedSearchPane" runat="server" Scrolling="None" Height="22px">
                            <telerik:RadSlidingZone ID="SpeedSearchSlidingZone" runat="server" Height="22px">
                                <telerik:RadSlidingPane ID="SpeedSearchSlidingPane" Title="Speed Lead" runat="server"
                                       OnClientDocked="PaneDockedHandler" >
                                    speed lead content
                                </telerik:RadSlidingPane>
                            </telerik:RadSlidingZone>
                        </telerik:RadPane>
     
                        <telerik:RadPane ID="LeadResultPane" runat="server" Scrolling="None">
                            content
                        </telerik:RadPane>
                    </telerik:RadSplitter>               
                </telerik:RadPane>
            </telerik:RadSplitter>
        </form>
    </body>
    </html>

    As you can see, I'm also trying to hide the tab using javascript by following this example here:

    it hides the tab but leaves an empty space. If I use OnClientBeforeDock or OnClientDocking, slidingZone.get_dockedPaneId() returns null and wouldn't go to the hideTab statement.  I have attached a screen shot of the tab layouts.

    Please tell me if it's possible to do this using CSS? If not, is there a way to get ride of the empty space besides messing with the width and height as done in the example above?

    Thank you for your help~

    Helen

     




  2. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 03 Apr 2014 Link to this post

    Hi Helen,

    The sender of the ClientDocked and ClientUndocked events is the RadPane which is about to be docked, so you do not need to get a reference to it through the sliding zone. You can access it directly in the following way:
    <telerik:RadSlidingPane ID="SpeedSearchSlidingPane" Title="Speed Lead" runat="server" OnClientDocked="PaneDockedHandler" OnClientUndocked="PaneUndockedHandler">
        speed lead content
    </telerik:RadSlidingPane>
    <script type="text/javascript">
        function PaneDockedHandler(pane, eventArgs) {
            pane.hideTab();
        }
     
        function PaneUndockedHandler(pane, eventArgs) {
            pane.showTab();
        }
    </script>

    On a side note, the funcionality of the hideTab() method is only to hide the current tab, but not its container so if there are other tabs they would remain visible. If you would like to hide/show also the wrapping tabs container, this could be achieved in a similar way:
    <telerik:RadSlidingPane ID="SpeedSearchSlidingPane" Title="Speed Lead" runat="server"
        OnClientDocking="PaneDockedHandler" OnClientUndocking="PaneUndockedHandler">
        speed lead content
    </telerik:RadSlidingPane>
    <script type="text/javascript">
        function PaneDockingHandler(pane, eventArgs) {
            pane.getTabContainer().parentNode.style.display = "none";
        }
        function PaneUndockingHandler(pane, eventArgs) {
            pane.getTabContainer().parentNode.style.display = "block";
        }
    </script>

    I hope this helps.

    Regards,
    Vessy
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Helen
    Helen avatar
    42 posts
    Member since:
    Nov 2013

    Posted 03 Apr 2014 in reply to Vessy Link to this post

    Vessy,

    It's just what I needed! Thank you.
Back to Top