unselect selected tab on click

5 posts, 1 answers
  1. Steve
    Steve avatar
    17 posts
    Member since:
    Jul 2012

    Posted 01 Sep 2009 Link to this post

    is there a built in way to unselect the selected tab when selected tab is clicked again? client side...
  2. Mr. Plinko
    Mr. Plinko avatar
    56 posts
    Member since:
    Jul 2009

    Posted 01 Sep 2009 Link to this post

    What kind of functionality are you looking for?

    i.e. are you looking to no longer display a multipage?
  3. Steve
    Steve avatar
    17 posts
    Member since:
    Jul 2012

    Posted 01 Sep 2009 Link to this post

    sort of... I'm not using a multipage, I wanted to animate the display of tab related content, and I didn't want it (the tab related content) to take up space in the page, so I'm using divs instead of a multipage so this is more like a toolbar, or something like that anyway.

    I want to show tab content when tab is clicked first time, but if same tab is re-clicked after selected, I want to hide the content again.

    So, I'm using the tab selected, and unselected events to show and hide appropriate related div, but don't have a good idea on how to hide related tab content when tab is clicked again, after it is selected.

    so, if you have a suggestion on a better control to use to open and close content on click, I would certainly be open to that, but I tried to use rad splitter and sliding panels, didn't like that due to extra bar showing up under tabs, and the docking didn't work like I expected. Tried radtoolbar, but wasn't able to get my content to display properly in place of a contained button using a template.

    but, if I hook up a click handler to the tab, the tab closes, and then re-opens or re-selects itself, I want to have it select on first click, and unselect on another click if the tab clicked is already selected...

     

    function rcbRadTabStrip1_OnClientTabSelected(sender, args) {   
        var tab = args.get_tab();   
        var pageId = tab.get_text();   
        $("div[id$=" + pageId + "PageView]:first").slideDown();   
        return false;   
    }  
     
    function rcbRadTabStrip1_OnClientTabUnSelected(sender, args) {   
        var tab = args.get_tab();   
        var pageId = tab.get_text();   
        $("div[id$=" + pageId + "PageView]:first").slideUp("fast");   
        return false;   
    }  
     
    <div id="rcb">   
     <telerik:RadTabStrip ID="RadTabStrip1" AutoPostBack="false" OnClientTabSelected="rcbRadTabStrip1_OnClientTabSelected" OnClientTabUnSelected="rcbRadTabStrip1_OnClientTabUnSelected" Skin="Black" runat="server">   
      <Tabs>   
       <telerik:RadTab ID="MeasureTab" Text="Measures" runat="server"></telerik:RadTab>   
       <telerik:RadTab ID="SlicerTab" Text="Slicers" runat="server"></telerik:RadTab>   
       <telerik:RadTab ID="SortTab" Text="Sort" runat="server"></telerik:RadTab>   
       <telerik:RadTab ID="FilterTab" Text="Filter" runat="server"></telerik:RadTab>   
      </Tabs>   
    </telerik:RadTabStrip>   
    <div class="pageViewWrapper">   
     <div id="MeasuresPageView" class="pageView" style="display: none;" runat="server">  
      Measures content...   
     </div>   
     <div ID="SlicersPageView" class="pageView" style="display: none;" runat="server">  
      Slicers content...  
     </div>   
     <div ID="SortPageView" class="pageView" style="display: none;" runat="server">  
      Sort content...   
     </div>   
     <div ID="FilterPageView" class="pageView" style="display: none;" runat="server">  
      Filter content...  
     </div>   
    </div>   
    </div> 
  4. Answer
    Paul
    Admin
    Paul avatar
    4281 posts

    Posted 02 Sep 2009 Link to this post

    Hi Steve,

    Here's a sample code snippet that shows the needed approach.

    <form id="form1" runat="server"
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"
        </telerik:RadScriptManager> 
     
        <script type="text/javascript"
            function OnClientTabSelecting(sender, eventArgs) { 
                var tab = eventArgs.get_tab(); 
                if (tab.get_selected() == true) { 
                    tab.set_selected(false); 
                    eventArgs.set_cancel(true); 
                } 
            } 
        </script> 
     
        <telerik:RadTabStrip ID="RadTabStrip1" runat="server" OnClientTabSelecting="OnClientTabSelecting" 
            ClickSelectedTab="true"
            <Tabs> 
                <telerik:RadTab runat="server" Text="Root RadTab1"
                </telerik:RadTab> 
                <telerik:RadTab runat="server" Text="Root RadTab2"
                </telerik:RadTab> 
                <telerik:RadTab runat="server" Text="Root RadTab3"
                </telerik:RadTab> 
            </Tabs> 
        </telerik:RadTabStrip> 
        </form> 


    Regards,
    Paul
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  5. Steve
    Steve avatar
    17 posts
    Member since:
    Jul 2012

    Posted 03 Sep 2009 Link to this post

    works perfectly, thank you.
Back to Top