New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Expand On Hover

RadNavigation exposes two client events - OnClientNodeMouseEnter and OnClientNodeMouseLeave that allow expanding the nodes on hover by using the Client API of the control.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
<%@ Page Title="" Language="C#"  AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Navigation_Functionality_Server_side_Templates_Item_Templates_DefaultCS" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <script type="text/javascript" src="scripts.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container no-bg">
        <telerik:RadClientDataSource runat="server" ID="RadClientDataSource1">
        </telerik:RadClientDataSource>
        <div class="demo-container size-narrow">
            <telerik:RadNavigation ID="RadNavigation1" runat="server"
                OnClientNodeMouseEnter="OnClientNodeMouseEnter"
                OnClientNodeMouseLeave="OnClientNodeMouseLeave"
                ClientDataSourceID="RadClientDataSource1" DataTextField="Name" DataFieldID="ID"
                DataFieldParentID="ParentID">
            </telerik:RadNavigation>
        </div>
        <script type="text/javascript">
            Sys.Application.add_load(function() {
                var clientDataSource = $find('<%=RadClientDataSource1.ClientID%>');

                setData(clientDataSource);
            });
        </script>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance