mouseOver

4 posts, 0 answers
  1. dhlennon
    dhlennon avatar
    32 posts
    Member since:
    Oct 2006

    Posted 17 May 2008 Link to this post

    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?
  3. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 19 May 2008 Link to this post

    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
  5. dhlennon
    dhlennon avatar
    32 posts
    Member since:
    Oct 2006

    Posted 04 Jul 2008 Link to this post

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

  7. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 07 Jul 2008 Link to this post

    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
  8.
Back to Top