This is a migrated thread and some comments may be shown as answers.

mouseOver

3 Answers 148 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
dhlennon
Top achievements
Rank 1
dhlennon asked on 17 May 2008, 04:48 PM
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 Answers, 1 is accepted

Sort by
0
Paul
Telerik team
answered on 19 May 2008, 01:33 PM
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
0
dhlennon
Top achievements
Rank 1
answered on 04 Jul 2008, 08:02 PM
Thanks, but can you advise how to make this work in a child page (within a Master).. using 2008.1 619

0
Paul
Telerik team
answered on 07 Jul 2008, 01:56 PM
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
Tags
TabStrip
Asked by
dhlennon
Top achievements
Rank 1
Answers by
Paul
Telerik team
dhlennon
Top achievements
Rank 1
Share this question
or