menu in a tabTemplate

[Albert Shenker]

I have the following markup. It includes a menu inside of the tabtemplate of a 2nd level tab. When in this structure, the menu's navigateurl does not appear to work. Hovering over the menu item shows the navigateurl in the browser status bar, but clicking on the item does nothing. I have confirmed that the client-side itemclicking event fires. This occurs in IE7 and Firefox as far as I can tell. Anyone know what might be going on?

<telerik:RadTabStrip ID="tsTN"
                    runat="server"
                    Skin="Hay"
                    SelectedIndex="0"
                    >
        <Tabs>
            <telerik:RadTab Text="Default Page" NavigateUrl="~/Home/" runat="server" Selected="True" Value="HH">
                <Tabs>
                    <telerik:RadTab runat="server" Selected="True">
                        <TabTemplate>
                            <div style="margin-left:-30px;">
                                <telerik:RadMenu ID="rmHH"
                                            runat="server"
                                            Flow="Horizontal"
                                            Skin="Hay"
                                >
                                    <Items>
                                        <telerik:RadMenuItem Text="Home" NavigateUrl="~/Home/"></telerik:RadMenuItem>
                                        <telerik:RadMenuItem Text="About" NavigateUrl="~/Home/About/" ></telerik:RadMenuItem>
                                        <telerik:RadMenuItem Text="Contact Us" NavigateUrl="~/Home/Contact.aspx"></telerik:RadMenuItem>
                                    </Items>
                                </telerik:RadMenu>
                            </div>
                        </TabTemplate>
                    </telerik:RadTab>
                </Tabs>
            </telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>

[Paul]

Hello Albert,

Please find below a sample code snippet that shows the needed approach.

<form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>

    <script type="text/javascript">
    function onClientItemClicking(sender, eventArgs)
    {
        eventArgs.get_domEvent().stopPropagation();
    }
    </script>

    <telerik:RadTabStrip ID="tsTN" runat="server" Skin="Hay" SelectedIndex="0">
        <Tabs>
            <telerik:RadTab Text="Default Page" NavigateUrl="~/Home/" runat="server" Selected="True" Value="HH">
                <Tabs>
                    <telerik:RadTab runat="server" Selected="True">
                        <TabTemplate>
                            <div style="margin-left: -30px;">
                                <telerik:RadMenu ID="rmHH" runat="server" Flow="Horizontal" Skin="Hay" OnClientItemClicking="onClientItemClicking">
                                    <Items>
                                        <telerik:RadMenuItem Text="Home" NavigateUrl="~/Home/">
                                        </telerik:RadMenuItem>
                                        <telerik:RadMenuItem Text="About" NavigateUrl="~/Home/About/">
                                        </telerik:RadMenuItem>
                                        <telerik:RadMenuItem Text="Contact Us" NavigateUrl="~/Home/Contact.aspx">
                                        </telerik:RadMenuItem>
                                    </Items>
                                </telerik:RadMenu>
                            </div>
                        </TabTemplate>
                    </telerik:RadTab>
                </Tabs>
            </telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>
</form>

All the best,
Paul
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Albert Shenker]

Thanks! That works beautifully.