visual-studiovisual-studio-2012tabstelerikrad-controls

Embedded tabs in RadTabStrip


I'm using Telerik's RadTabStrip and RadMultiPage to create some tabs for a website using Visual Studio 2012. I have a row of three tabs and one of the tabs has two child tabs.

The primary tabs are Notes, Minutes and Admin. Then Notes has two child tabs Us and Them. When the user clicks on Notes, I want it to default to Us with the option of selecting Them.

I would like to do this all on the aspx page and not the code behind. I found some examples that do it in code but it doesn't seem like it should be necessary. However, after hours of searching and fiddling with the control I've come up empty or worse, results that make no sense to me. I found a lot of examples on how to create a RadTabStrip with child tabs...a lot of examples...but none of them explain how to map those tabs and child tabs to a RadPageView. Is it so simple they don't feel the need to write an example of this step? Is it impossible on the aspx side and that's why some of the examples jump into the codebehind? I don't get it.

Here's what I have. I know it doesn't work but at this point I've tried so many different things I don't know which end is up.

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1">
    <Tabs>
        <telerik:RadTab runat="server" Text="Notes" Selected="true">
            <Tabs>
                <telerik:RadTab runat="server" Text="Us" Selected="true" />
                <telerik:RadTab runat="server" Text="Them" />
            </Tabs>
        </telerik:RadTab>
        <telerik:RadTab runat="server" Text="Minutes" />
        <telerik:RadTab runat="server" Text="Admin" />
    </Tabs>
</telerik:RadTabStrip>

<telerik:RadMultiPage ID="RadMultiPage1" runat="server">
    <%--UserControl 1 Tab--%>
    <telerik:RadPageView ID="RadPageView1" runat="server" CssClass="tabstyle" Selected="true" />

    <%--Child 1 Tab--%>
    <telerik:RadPageView ID="RadPageView2" runat="server" CssClass="tabstyle">
        <uc:ucNote ID="ucNote1" runat="server" />
    </telerik:RadPageView>

    <%--Child 2 Tab--%>
    <telerik:RadPageView ID="RadPageView3" runat="server" CssClass="tabstyle">
        <uc:ucNote ID="ucNote2" runat="server" />
    </telerik:RadPageView>

    <%--UserControl 2 Tab--%>
    <telerik:RadPageView ID="RadPageView4" runat="server" CssClass="tabstyle">
        <uc:ucMinute ID="ucMinute1" runat="server" />
    </telerik:RadPageView>

    <%--UserControl 3--%>
    <telerik:RadPageView ID="RadPageView5" runat="server" CssClass="tabstyle">
        <uc:ucAdmin ID="ucAdmin1" runat="server" />
    </telerik:RadPageView>
</telerik:RadMultiPage>

Solution

  • Ok, I think I figured out what was wrong and it turned out to be very minor. I just didn't set all the Selected="true". Once I made sure the Note node and the Us node in the RadTabStrip were selected and the Note node and Us node in the RadMultiPage were selected it started working the way I expected. I'm skeptical that I was that close and the solution was that easy after all the time I put into it but so far it's looking right.