Change tabs on mouseover and on mouseout

2 posts, 0 answers
  1. tamil
    tamil avatar
    7 posts
    Member since:
    Aug 2010

    Posted 26 Jul 2011 Link to this post

         I am having a RadTabstrip control with tabs and sub tabs. My need is, when mouse overing the tab, I want to display the sub tabs the following code works fine. During the mouseout event, if the focus is out of tabstrip control I need to select the tab which is selected at first(from server side).
              var destElement = e.relatedTarget || e.toElement;
              " destElement" always returns undefined even I mouse over the sub tabs.

    I am using the Telerik RadAjaxcontrols version 2011.2.712.35 .

    <head runat="server">
        <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
            <script type="text/javascript" language="javascript">
                function SelectMyTab(sender, args) {
                    try {
                        var multiPageID = sender.get_multiPageID();
                    } catch (e) {
                function UnSelectMyTab1(e) {
                    var tabStrip = $find('<%= RadTabStrip1.ClientID%>');
                    //Find the element which the mouse is over
                    var destElement = e.relatedTarget || e.toElement;
                    var initialTab = null;
                    if (tabStrip != null && destElement != null) {
                        if ($telerik.isDescendant(tabStrip.get_element(), destElement))
                        initialTab = tabStrip.findTabByText("<%= MyTab %>");
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <telerik:RadTabStrip OnClientMouseOver="SelectMyTab" OnClientMouseOut="UnSelectMyTab1"
                ID="RadTabStrip1" UnSelectChildren="true" Skin="Windows7" MultiPageID="RadMultiPage1"
                    <telerik:RadTab Selected="true" Font-Bold="true" Text="Home">
                    <telerik:RadTab Text="Products" Font-Bold="true">
                            <telerik:RadTab Font-Bold="true" Text="Product1">
                            <telerik:RadTab Font-Bold="true" Text="Product2">
                            <telerik:RadTab Font-Bold="true" Text="Product3">
                            <telerik:RadTab Font-Bold="true" Text="Product4">
                            <telerik:RadTab Font-Bold="true" Text="Product5">
                            <telerik:RadTab Font-Bold="true" Text="Product6">
                    <telerik:RadTab Font-Bold="true" Text="Policy">
                    <telerik:RadTab Font-Bold="true" Text="HelpDesk">
                    <telerik:RadTab Font-Bold="true" Text="Reports">
                    <telerik:RadTab Font-Bold="true" Text="License">
            <telerik:RadMultiPage ID="RadMultiPage1" runat="server">
                <telerik:RadPageView ID="RadPageView1" Selected="true" runat="server">

    Please suggest me in a right way.

  2. Dimitar Terziev
    Dimitar Terziev avatar
    1266 posts

    Posted 28 Jul 2011 Link to this post

    Hello Tamil,

    The reason for the experienced behavior is due to the fact that the OnClientMouseOut event receives two input parameters: sender and event arguments. In order to get the dom event you should use the get_domEvent() method of the event arguments.

    Dimitar Terziev
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. DevCraft R3 2016 release webinar banner
Back to Top