Show All Tabs - How to start with All showing

[Steve Y]

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

[Paul]

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.

[Steve Y]

That works great - thanks.

I assume that the javascript function pageLoad gets executed on page load. I didn't know that...

[Paul]

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.