mouseOver

[dhlennon]

Is there a way to use tabstrip and multipage to change page on mouseOver rather than OnClick to achieve an effect similar to that on the current Microsoft home page?

[Paul]

Hi dhlennon,

Please find below a sample code snippet taht shows how to achieve your goal using RadTabStrip for ASP.NET AJAX. Please have in mind that you will have to update to the latest internal build (also attached to this thread).

ASPX:

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />

    <script type="text/javascript" language="javascript">
    function SelectMyTab(sender, args)
    {
        var multiPageID = sender.get_multiPageID();
        sender.set_multiPageID(null);
        args.get_tab().select();
        sender.set_multiPageID(multiPageID);
    }

    function UnSelectMyTab(e)
    {
        var tabStrip = $find('<%= RadTabStrip1.ClientID%>');
        //Find the element which the mouse is over
        var destElement = e.relatedTarget || e.toElement;
        if ($telerik.isDescendant(tabStrip.get_element(), destElement))
            return;
        var initialTab = tabStrip.findTabByText("<%= MyTab %>");
        //initialTab.unselect();
        initialTab.selectParents();
    }
    </script>

    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" UnSelectChildren="true" OnClientMouseOver="SelectMyTab" ClickSelectedTab="True" AutoPostBack="True" onmouseout="UnSelectMyTab(event)" SelectedIndex="0" Skin="Outlook" MultiPageID="RadMultiPage1">
        <Tabs>
            <telerik:RadTab ID="Tab1" runat="server" Text="Root Tab 1">
                <Tabs>
                    <telerik:RadTab ID="Tab2" runat="server" Text="Child Tab 1.1" PageViewID="PageView1">
                    </telerik:RadTab>
                    <telerik:RadTab ID="Tab3" runat="server" Text="Child Tab 1.2" PageViewID="PageView2">
                    </telerik:RadTab>
                </Tabs>
            </telerik:RadTab>
            <telerik:RadTab ID="Tab4" runat="server" Text="Root Tab 2">
                <Tabs>
                    <telerik:RadTab ID="Tab5" runat="server" Text="Child Tab 2.1" PageViewID="PageView3">
                    </telerik:RadTab>
                    <telerik:RadTab ID="Tab6" runat="server" Text="Child Tab 2.2" PageViewID="PageView4">
                    </telerik:RadTab>
                    <telerik:RadTab ID="Tab7" runat="server" Text="Child Tab 2.3" PageViewID="PageView5">
                    </telerik:RadTab>
                </Tabs>
            </telerik:RadTab>
            <telerik:RadTab ID="Tab8" runat="server" Text="Root Tab 3">
                <Tabs>
                    <telerik:RadTab ID="Tab9" runat="server" Text="Child Tab 3.1" PageViewID="PageView6">
                    </telerik:RadTab>
                </Tabs>
            </telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>
    <telerik:RadMultiPage ID="RadMultiPage1" runat="server" Height="454px" Width="737px">
        <telerik:RadPageView ID="PageView1" runat="server">
            Child Tab 1.1</telerik:RadPageView>
        <telerik:RadPageView ID="PageView2" runat="server" Width="100%">
            Child Tab 1.2</telerik:RadPageView>
        <telerik:RadPageView ID="PageView3" runat="server" Width="100%">
            Child Tab 2.1</telerik:RadPageView>
        <telerik:RadPageView ID="PageView4" runat="server" Width="100%">
            Child Tab 2.2</telerik:RadPageView>
        <telerik:RadPageView ID="PageView5" runat="server" Width="100%">
            Child Tab 2.3</telerik:RadPageView>
        <telerik:RadPageView ID="PageView6" runat="server" Width="100%">
            Child Tab 3.1</telerik:RadPageView>
    </telerik:RadMultiPage>
</form>

Code-behind:

using System;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Telerik.Web.UI;

public partial class _Default : System.Web.UI.Page
{
    protected string MyTab;

    protected void Page_Load(object sender, EventArgs e)
    {
        MyTab = RadTabStrip1.InnermostSelectedTab.Text;
    }
    protected void Button1_Click(object sender, EventArgs e)
    {

    }
}

All the best,
Paul
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[dhlennon]

Thanks, but can you advise how to make this work in a child page (within a Master).. using 2008.1 619

[Paul]

Hi dhlennon,

Please find attached a sample web application that shows the needed approach.

Sincerely yours,
Paul
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center