RadTabStrip appears to have no RadTab selected - Why? - asp.net

Question

Does a RadTabStrip work in a MasterPage? The tabs do not appear selected when clicked.
Steps:
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.
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.
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;
}
}

Answer 2

The only difference I can see in your code compared to my master page is SelectedIndex="0" on the RadTabStrip and Selected="true" on one of the Rad Tabs:
<telerik:RadTabStrip ID="RadTabStrip1" runat="server" SelectedIndex="0">
<Tabs>
<telerik:RadTab runat="server" Text="Root RadTab1" NavigateUrl="~/Default.aspx" Selected="true">
</telerik:RadTab>
<telerik:RadTab runat="server" Text="Root RadTab2" NavigateUrl="~/About.aspx" >
</telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>