Home / Community & Support / Developer Productivity Tools Forums / ASP.NET > Splitter > Hide tabs if slider pane Docked.

• Bill

  Posted on Jan 2, 2007 (permalink)

  I have a tab on the left side of my web form that slides out (sliding pane). If you pin this pane (dock), then the tab (bar) still displays and takes up 22px of space on the left side. I was wondering if there was a way that you could pin the sliding pane, and somehow hide the tab and fill the whole space with the pinned frame? And then, when you "un-pinned" the frame the tab showed up again?
  Thanks,
  ~bg 

• Valentin.Stoychev Valentin.Stoychev

  Posted on Jan 3, 2007 (permalink)

  Hi Bill,
  
  Currently there is no such an option out of the box.
  
  You can hide a particular tab using the client-side API, but you can not hide the tab container (the element that takes those 22px).
  
  We have in our TODO list a feature to hide the tab container when there are no tabs displayed which will be implemented for Q1'2007 release (or most probably earlier - for some of the Q4 Service Packs).
  
  I hope you can wait until when the feature is included in the control itself. Let us know if you need it earlier - we can give you some guidance - but any solution at the moment will be too complex with a lot of JS code.
  
  Sincerely yours,
  Valentin.Stoychev
  the telerik team

  
  www.telerik.com | dnn.telerik.com | www.sharepointcontrols.com | www.sitefinity.com | www.mcmscontrols.com

• Tatyana

  Posted on Oct 2, 2007 (permalink)

  Hi Bill,
  
  I was wondering if you ever came up with an alternative solution to your problem. I'm trying to get the same functionality and nothing seems to work. So I decided to browse through the forum and I saw your post.
  
  Best Regards,
  Tatyana
  

• Bill

  Posted on Oct 2, 2007 (permalink)

  No, I still have the same problem, but just learned to work around it.
  Sorry,
  ~bg

• Tatyana

  Posted on Oct 3, 2007 (permalink)

  Thank you for responding back.
  
  Tatyana
  

• Brian

  Posted on Sep 12, 2008 (permalink)

  Is there now an API for hiding the tab? I'm using the AJAX 2008 version and I'm really in need of this feature if it's available.

• Svetlina Anati Svetlina Anati

  Posted on Sep 15, 2008 (permalink)

  Hello Brian,
  
  You can use the RadSlidingZone's  HideTab method - you should simply pass the ID of the tab you want to hide. As to the tabs container, you can reference it by using the GetTabsContainer/GetTabContainer methods and then change its display to none.
  
  Here is a  sample snippet of the mentioned approach:  
  
  

  var zone = <%= RadSlidingZone1.ClientID %>;

  zone.HideTab('<%=RadSlidingPane1.ClientID %>');

  var container = zone.GetTabContainer();

  container.style.display = 'none';

  
  
  Sincerely yours,
  Svetlina
  the Telerik team

  
  Check out Telerik Trainer, the state of the art learning tool for Telerik products.

• Albert Shenker Master

  Posted on Oct 31, 2008 (permalink)

  I have a splitter with two vertical panes. Theleft most mane has height/width set to 100% and the rightnost includes a sliding zone. I am using the following two function to hide the sliding zone tabs and container if there is only one tab and the pane is docked. This works fine if the sliding zone is aligned on the left and expands to the right. However, it does not work if the sliding zone is aligned on the right and expands to the left. The tab is hidden, however, the tab container "space" remains, even though the style.display is set to "none".
  
  

  function OnClientPaneDocked_QT(sender, eventArgs)

  {

  var slidingZone = $find("<%= szCR.ClientID %>");

  var container = slidingZone.getTabsContainer();

  var dockedPane = slidingZone.getPaneById(slidingZone.get_dockedPaneId());

  if (dockedPane)  {

  dockedPane.hideTab();

  container.style.display = 'none';

  }

  }

  function OnClientBeforePaneUndocked_QT(sender, eventArgs)

  {

  var slidingZone = $find("<%= szCR.ClientID %>");

  var container = slidingZone.getTabsContainer();

  var undockedPane = slidingZone.getPaneById(slidingZone.get_dockedPaneId());

  if (undockedPane)  {

  undockedPane.showTab();

  container.style.display = 'block';

  }

  }

• Svetlina Anati Svetlina Anati

  Posted on Nov 3, 2008 (permalink)

  Hi Albert,
  
  I tested the setup both when the RadSlidingZone is aligned to the left and the slide direction is to the right and vice versa - the zone is aligned to the right and the slide direction is to the left. In both cases the project works in the same manner - the sliding container disappears.
  
  For your convenience I attached my test project - the sliding zone is aligned to the right and the sliding pane expands to the right - the container has red background to make the testing easier. In case this does not help, please modify the demo project in order to reproduce the problem, open a new support ticket and send it to me along with detailed reproduction instructions along with some screenshots of the desired and the actual behavior.
  
  Best wishes,
  Svetlina
  the Telerik team

  
  Check out Telerik Trainer, the state of the art learning tool for Telerik products.

  Attached files

  • RadSplitterTest.zip

• Albert Shenker Master

  Posted on Nov 3, 2008 (permalink)

  Your test project does not behave propoerly either. The only thing you do differently than me is align the pane contents to the right. This does not change the fact that the original space is still shown. The container does apparently disapper (ie the red goes away), but the space remains. In your example, you can see this as the space between the left of the splitter pane and the title of the sliding pane. If I could provide a screen capture in this thead, you could easily see what I mean. If you comment out the text-align:right portion of your align style, you will see that the red container disappers, but the space remains when the sliding pane is docked.

• Svetlina Anati Svetlina Anati

  Posted on Nov 5, 2008 (permalink)

  Hi Albert,
  
  I am afraid I did not completely understand what you expect to achieve - when you set the display to none, the element is hidden, that is the expected behavior and that is exactly what happens in the project. In order to emphasize this, I set red background to the element and the behavior could be easily tested. I aligned the sliding zone to the right because in your previous post you said: However, it does not work if the sliding zone is aligned on the right and expands to the left. - did you mean anything else?
  
  I think that the best way to proceed is to open a new support ticket and attach some screenshots of the desired and the actual behavior along with detailed explanation there. Once I have a better understanding on your scenario, I will do my best to help.
  
  Kind regards,
  Svetlina
  the Telerik team

  
  Check out Telerik Trainer, the state of the art learning tool for Telerik products.

• WombatEd

  Posted on May 26, 2010 (permalink)

  Svetlina,
  
  Did this get resolved?  I have a similar issue.

• Svetlina Anati Svetlina Anati

  Posted on May 31, 2010 (permalink)

  Hi WombatEd,
  
  Would you please provide more detailed explanations about the exact problem you experience?  It will be best if you can also provide some code or screenshots and the version of RadControls you are using. Once we have a better understanding on the exact problem and configuration we will do our bets to help.
  
  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.

• Chris Mitchell

  Posted on Jan 11, 2011 (permalink)

  Hi,
  
  Was the issue raised by Albert ever resolved? I have the exact same problem as shown in the attached file (please excuse how crude the file is; I'm not a graphics person)..
  
  I've tried various CSS properties but I can't seem to find anything that will do the trick.. Any help would be GREATLY appreciated!
  
  EDIT: Note, it collapses down just fine when undocked.. No extra space there..
  
  I'm using the same JS Albert is/was, as shown here:
  
  

  function OnClientPaneDocked_QT(sender, eventArgs)    <br>

        {    <br>

          var slidingZone = $find("<%= rszIndex.ClientID%>");    <br>

          var container = slidingZone.getTabsContainer();     <br>

          var dockedPane = slidingZone.getPaneById(slidingZone.get_dockedPaneId());  <br>

          if (dockedPane)  {<br>

            dockedPane.hideTab();<br>

            container.style.display = 'none';<br>

          }  <br>

        }  <br>

          <br>

        function OnClientBeforePaneUndocked_QT(sender, eventArgs)    <br>

        {    <br>

          var slidingZone = $find("<%= rszIndex.ClientID%>");    <br>

          var container = slidingZone.getTabsContainer();     <br>

          var undockedPane = slidingZone.getPaneById(slidingZone.get_dockedPaneId());  <br>

          if (undockedPane)  {<br>

            undockedPane.showTab();<br>

            container.style.display = 'block';<br>

          }  <br>

        }

  Attached files

  • SplitterProblem.jpg

• Svetlina Anati Svetlina Anati

  Posted on Jan 13, 2011 (permalink)

  Hello Bill,

  I suggest to rest the width when docked as shown below:
  
  

  <%@ Page Language="C#" %>

    

  <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head runat="server">

      <title></title>

      <style type="text/css">

          html, body, form

          {

              height: 100%;

              margin: 0;

              padding: 0;

              overflow: hidden;

          }

      </style>

  </head>

  <body>

      <form id="form1" runat="server">

      <asp:ScriptManager ID="ScriptManager1" runat="server">

      </asp:ScriptManager>

      <telerik:RadSplitter ID="splitter1" runat="server" Width="100%" Height="100%" VisibleDuringInit="false">

          <telerik:RadPane ID="pane1" runat="server" Width="22">

              <telerik:RadSlidingZone ID="rszIndex" runat="server">

                  <telerik:RadSlidingPane ID="sl1" runat="server" OnClientDocked="OnClientPaneDocked_QT"

                      OnClientBeforeUndock="OnClientBeforePaneUndocked_QT" Title="first">

                  </telerik:RadSlidingPane>

                  <telerik:RadSlidingPane ID="sl2" runat="server" OnClientDocked="OnClientPaneDocked_QT"

                      OnClientBeforeUndock="OnClientBeforePaneUndocked_QT" Title="second">

                  </telerik:RadSlidingPane>

              </telerik:RadSlidingZone>

          </telerik:RadPane>

          <telerik:RadPane ID="RadPane1" runat="server">

          </telerik:RadPane>

      </telerik:RadSplitter>

      <script type="text/javascript">

          function OnClientPaneDocked_QT(sender, eventArgs)

          {

              var slidingZone = $find("<%= rszIndex.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("<%= rszIndex.ClientID%>");

              var container = slidingZone.getTabsContainer();

              var undockedPane = slidingZone.getPaneById(slidingZone.get_dockedPaneId());

              if (undockedPane)

              {

                  undockedPane.showTab();

              }

          }

    

      </script>

      </form>

  </body>

  </html>

  
  Please, test this solution and let us know how it goes.
  
  Regards,
  Svetlina
  the Telerik team

  
  Check out Telerik Trainer, the state of the art learning tool for Telerik products.

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET > Splitter > Hide tabs if slider pane Docked.