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

Change tabs on mouseover and on mouseout

1 Answer 111 Views

TabStrip

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

tamil asked on 26 Jul 2011, 09:27 AM

Hi,
   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).
But,
   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">

<title></title>

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

<script type="text/javascript" language="javascript">

function SelectMyTab(sender, args) {

try {

var multiPageID = sender.get_multiPageID();

sender.set_multiPageID(null);

args.get_tab().select();

sender.set_multiPageID(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))

return;

initialTab = tabStrip.findTabByText("<%= MyTab %>");

//initialTab.unselect();

initialTab.selectParents();

}

</script>

</telerik:RadScriptBlock>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<div>

<telerik:RadTabStrip OnClientMouseOver="SelectMyTab" OnClientMouseOut="UnSelectMyTab1"

ID="RadTabStrip1" UnSelectChildren="true" Skin="Windows7" MultiPageID="RadMultiPage1"

runat="server">

<Tabs>

<telerik:RadTab Selected="true" Font-Bold="true" Text="Home">

</telerik:RadTab>

<telerik:RadTab Text="Products" Font-Bold="true">

<Tabs>

<telerik:RadTab Font-Bold="true" Text="Product1">

</telerik:RadTab>

<telerik:RadTab Font-Bold="true" Text="Product2">

</telerik:RadTab>

<telerik:RadTab Font-Bold="true" Text="Product3">

</telerik:RadTab>

<telerik:RadTab Font-Bold="true" Text="Product4">

</telerik:RadTab>

<telerik:RadTab Font-Bold="true" Text="Product5">

</telerik:RadTab>

<telerik:RadTab Font-Bold="true" Text="Product6">

</telerik:RadTab>

</Tabs>

</telerik:RadTab>

<telerik:RadTab Font-Bold="true" Text="Policy">

</telerik:RadTab>

<telerik:RadTab Font-Bold="true" Text="HelpDesk">

</telerik:RadTab>

<telerik:RadTab Font-Bold="true" Text="Reports">

</telerik:RadTab>

<telerik:RadTab Font-Bold="true" Text="License">

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage ID="RadMultiPage1" runat="server">

<telerik:RadPageView ID="RadPageView1" Selected="true" runat="server">

<h1>

RadPageView</h1>

</telerik:RadPageView>

</telerik:RadMultiPage>

</div>

</form>

</body>

Please suggest me in a right way.

Thanks,
Tamil.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Change tabs on mouseover and on mouseout

1 Answer, 1 is accepted