Question

Does a RadTabStrip work in a MasterPage? The tabs do not appear selected when clicked.

Steps:

1. Create a new Web Application Project. By default it contains Home and About tabs inside a Master Page (Site.Master). The tabs are asp:MenuItem controls.

2. Comment out the asp:Menu control and drag a RadTabStrip in its place. Add two RadTabs. When you run the application each tab works as expected — it appears to be selected when clicked.

3. Now add NavigateUrls to each RadTab pointing to the “~Default.aspx” and “~About.aspx” pages. When the application runs the tabs don’t appear to be selected when clicked (although the correct page displays).

   What’s going on? How can I make this work?

Update: Here’s how I altered the default code in Site.Master…

<div>
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
</div>

        <%--<div class="clear hideSkiplink">
            <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
                <Items>
                    <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
                    <asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
                </Items>
            </asp:Menu>
        </div>--%>

    <div>
        <telerik:RadTabStrip ID="RadTabStrip1" runat="server">
            <Tabs>
                <telerik:RadTab runat="server" Text="Root RadTab1" NavigateUrl="~/Default.aspx">
                </telerik:RadTab>
                <telerik:RadTab runat="server" Text="Root RadTab2" NavigateUrl="~/About.aspx" >
                </telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>
    </div>

The answer…

Bojan Skrchevski’s answer led me to this. I added this code to the Master Page’s Page_Load event and it works:

using Telerik.Web.UI;

namespace WebApplication1
{
    public partial class SiteMaster : System.Web.UI.MasterPage
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            RadTab currentTab = RadTabStrip1.FindTabByUrl(Request.Url.PathAndQuery);
            if (currentTab != null) currentTab.Selected = true;
        }
    }
}

Answer 1

I think that you also need to add runat="server" to the RadTab element if you want to use it like that. For example:

<telerik:RadTab Text="Home" NavigateUrl="Default.aspx" runat="server">
</telerik:RadTab>

You can also use ContentUrl in the corresponding telerik:RadPageView to navigate on the client side. Example:

<telerik:RadPageView ID="RadPageView1" runat="server" ContentUrl="Default.aspx">

UPDATE(on your update):
When you add runat="server" to the RadTab then it causes a postback. On postback the control is unable to determine which tab is selected even though it navigates to the specified page. Here’s how it is solved in the Telerik example:

        protected void Page_Load(object sender, System.EventArgs e)
        {
            string urlWithSessionID = Response.ApplyAppPathModifier(Request.Url.PathAndQuery);
            RadTab tab = RadTabStrip1.FindTabByUrl(urlWithSessionID);
            if (tab != null)
            {
                tab.SelectParents();
                tab.PageView.Selected = true;
            }
        }