This is a migrated thread and some comments may be shown as answers.

Show All Tabs - How to start with All showing

3 Answers 68 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Steve Y
Top achievements
Rank 2
Steve Y asked on 30 Sep 2008, 05:22 PM
I have a tabstrip and a multipage and want to be able to have individual tabs clicked which show their individual relevant pages along with an All tab which, when clicked, shows all multipages. Then, if you click on a single page tab, it shows only that one page, etc etc.

I have it all working fine, with six tabs with six corresponding pages and an 'All' tab as the seventh tab - here's the relevant javascript.
function ShowOneTabOrAll(sender, args) { 
    var multiPage = $find("<%=RadMultiPage1.ClientID %>"); 
    var i; 
    if (args.get_tab().get_text() == "All") { 
        for (i = 0; i < multiPage.get_pageViews().get_count(); i++) { 
            multiPage.get_pageViews().getPageView(i).show(); 
        } 
    } else { 
        for (i = 0; i < multiPage.get_pageViews().get_count(); i++) { 
            multiPage.get_pageViews().getPageView(i).hide(); 
        } 
        var tabIndex = args.get_tab().get_index(); 
        multiPage.get_pageViews().getPageView(tabIndex).show(); 
    } 

Currently, I have tab #0 and page #0 as the selected tab/page. When I click the All tab, all pages are shown.

However, the functionality I want is to start with All pages being shown and have the All tab being the selected tab and then have the user show each individual tab by clicking whatever tab they want.

I cannot work out what event to connect to. I've tried onClientLoad for the tabstrip but I could not find a way of indexing through each page in the multipage and calling show() for each of them - I'm not even sure the multipage was loaded/available...

Can someone help me with the event to hook into and code to get this done.

Thanks in advance, Steve

3 Answers, 1 is accepted

Sort by
0
Accepted
Paul
Telerik team
answered on 01 Oct 2008, 02:44 PM
Hello Steven,

Please find below a sample code snippet that shows the needed approach.

<form id="form1" runat="server">  
    <div> 
        <asp:ScriptManager ID="ScriptManager1" runat="server">  
        </asp:ScriptManager> 
    </div> 
 
    <script type="text/javascript">          
    function pageLoad(sender, args)  
    {    
        var tabstrip = $find("<%=RadTabStrip1.ClientID %>");    
        var multiPage = $find("<%=RadMultiPage1.ClientID %>");    
        var i;    
        if (tabstrip.get_selectedTab().get_text() == "All") {    
            for (i = 0; i < multiPage.get_pageViews().get_count(); i++) {    
                multiPage.get_pageViews().getPageView(i).show();    
            }    
        } else {    
            for (i = 0; i < multiPage.get_pageViews().get_count(); i++) {    
                multiPage.get_pageViews().getPageView(i).hide();    
            }    
            var tabIndex = args.get_tab().get_index();    
            multiPage.get_pageViews().getPageView(tabIndex).show();    
        }    
    }   
    </script> 
 
    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" OnClientTabSelected="pageLoad" SelectedIndex="2">  
        <Tabs> 
            <telerik:RadTab runat="server" Text="Root RadTab1" PageViewID="RadPageView1">  
            </telerik:RadTab> 
            <telerik:RadTab runat="server" Text="Root RadTab2" PageViewID="RadPageView2">  
            </telerik:RadTab> 
            <telerik:RadTab runat="server" Text="All" Selected="True">  
            </telerik:RadTab> 
        </Tabs> 
    </telerik:RadTabStrip> 
    <telerik:RadMultiPage ID="RadMultiPage1" runat="server">  
        <telerik:RadPageView ID="RadPageView1" runat="server">  
            RadPageView1</telerik:RadPageView> 
        <telerik:RadPageView ID="RadPageView2" runat="server">  
            RadPageView2</telerik:RadPageView> 
    </telerik:RadMultiPage> 
</form> 


Best wishes,
Paul
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Steve Y
Top achievements
Rank 2
answered on 01 Oct 2008, 03:30 PM
That works great - thanks.

I assume that the javascript function pageLoad gets executed on page load. I didn't know that...
0
Paul
Telerik team
answered on 01 Oct 2008, 03:37 PM
Hello Steven,

pageLoad is a shortcut for the Sys.Application.load event. For details on the matter please refer to the following ASP.NET article.

Kind regards,
Paul
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Tags
TabStrip
Asked by
Steve Y
Top achievements
Rank 2
Answers by
Paul
Telerik team
Steve Y
Top achievements
Rank 2
Share this question
or