NavigateUrl value lost for databound TabTemplate

[Dmitry]

Hi

I am trying to set the following scenario:
Set RadTabStrip with TabTemplate defined, tabs are generated by supplying DataSource. the property NavigateUrlField is set either on RadTabStrip tag or on RadDataBinding node.
At run time on Page_Init, or Page_Load - I supply DataSource and call DataBind(). After this call, on CodeBehind side (in debug mode), I can see tabs generated with NavigateUrl property correctly filled. However, when control is rendered on the page and I click on Tab, nothing happens. Also - nothing in NavigateUrl found, when setting OnClientSelecting method and checking value of NavigateUrl by calling 

var tab = eventArgs.get_tab();
var url = tab.get_navigateUrl();

here variable url gets value "null"

I also tried setting NavigateUrl on TabDataBind event, same story....


Interestingly - if I remove TabTemplate block and set DataTextField, I get tabs created and NavigateUrl is not lost and works right. However, Tab consists of multiple items and it is needed to have TabTemplate there.

Also it is strange that setting explicitly NavigateUrl on client side, on event OnClientSelecting,  from passed Attributes, does not help:

var tab = eventArgs.get_tab();
var attr = tab.get_attributes();

var url = attr.getAttribute("url");

tab.set_navigateUrl(url);

I managed to get required behaviour only as following, on event OnClientSelecting

var tab = args.get_tab();
var attr = tab.get_attributes();
var url = tab.get_navigateUrl();
if (url == null)
{
    url = attr.getAttribute("url");
    document.URL = url;
}

I found on this forum a thread as of 2008
http://www.telerik.com/community/forums/aspnet-ajax/tabstrip/radtabstrip-templates-and-loading-in-iframe.aspx 
where person tried to do something similar and Tech Support person also had to use some similar hack by calling

window.open(url, target)

So I am curios, if over 2 years there was any fix for this behaiviour, or if am I doing something wrong?

Dmitry

[Yana]

Hi Dmitry,

Actually this is expected behavior, because when you use template, the tab is rendered as <div> element, not as <a> element.  I suggest you modify your template like this:

<TabTemplate>
    <a href='<%# DataBinder.Eval(Container, "NavigateUrl") %>'>
        your content
    </a>
</TabTemplate>

Hope this helps.

Regards,
Yana
the Telerik team

[Dmitry]

Hi Yana,

this is not correct and it does not function same way as when dont have tab template.

i assembled here a sample:

<telerik:RadTabStrip ID="rtsTest2" runat="server" Skin="Vista" DataFieldID="TID">
<TabTemplate>
<a style="text-decoration:none;color:black" href='<%# Eval("TURL") %>' target="p1">
    <img src="<%# Eval("TImg1Url") %>" alt=""/> <span><%# Eval("TName") %></span> <img src="<%# Eval("TImg2Url") %>" alt=""/>
</a>
</TabTemplate>
</telerik:RadTabStrip>

<asp:Panel ID="p1" runat="server"></asp:Panel>

1st - it does not navigate on click.
2nd - not the whole tab gets rendered as link but only a portion of it, thus behavior is not mirrored again
3rd - it is not consistent with Tabs behavior.

also .... if i need to make tab contents multiline, i.e.:

<telerik:RadTabStrip ID="rtsTest2" runat="server" Skin="Vista" DataFieldID="TID">
<TabTemplate>
    <span><%# Eval("TName") %></span> <img src="<%# Eval("TImg1Url") %>" alt="exclude this"/>
    <br/>
     <img src="<%# Eval("TImg2Url") %>" alt="status-icon"/>
     <br/>
     <span><%# Eval("Extra Info") %></span>
</TabTemplate>
</telerik:RadTabStrip>

then tabs look & act weird 

[Yana]

Hi Dmitry,

I'm sorry for my late reply.

Using templates really changes the behavior and it's expected, because the rendering of the tab is changed.

Please add the following styles in order to remove the padding of the tab:

div.RadTabStrip .rtsLink,
div.RadTabStrip .rtsOut { padding: 0; }

and modify your template like this:

<a style="text-decoration: none; color: black; display: block" href='<%# Eval("TURL") %>' target="p1">
      <img src="<%# Eval("TImg1Url") %>" alt="" />
       <span><%# Eval("TName") %></span>
       <img src="<%# Eval("TImg2Url") %> alt="" />
 </a>

in order to make the link occupy the whole space.
Regarding the navigation, you should still subscribe to OnClientTabSelected event and manually navigate the page.

Hope this helps.

Greetings,
Yana
the Telerik team