Expand and collapse delay on hover in RadNavigation

Thread is closed for posting
1 posts, 0 answers
  1. Peter
    Peter avatar
    13 posts
    Member since:
    May 2016

    Posted 03 Apr 2018 Link to this post

    Requirements

    Telerik Product and Version

    UI for ASP.NET AJAX 2018 R1

    Supported Browsers and Platforms

    all browsers supported by Telerik UI for ASP.NET AJAX suite

    Components/Widgets used (JS frameworks, etc.)

    RadScheduler, .NET 4.0/4.5 C#

    PROJECT DESCRIPTION

    This project implements the ExpandDelay and CollapseDelay functionality based on the Navigation - Expand On Hover demo and behaves similarly to the RadMenu. 

    <telerik:RadNavigation ID="RadNavigation1" runat="server"
        OnClientNodeMouseEnter="OnClientNodeMouseEnter"
        OnClientNodeMouseLeave="OnClientNodeMouseLeave"
        ... >
    </telerik:RadNavigation>
    <script>
        var collapseTimeOut;
        var expandTimeOut;
        var isMouseOverNode = false;
        var collapseDelay = 300;
        var expandDelay = 500;
     
        window.OnClientNodeMouseEnter = function (sender, args) {
            var node = args.get_node(),
                        expandedSubling = node.get_parent().get_expandedNode();
     
            if (node.get_hidden()) {
                return;
            }
     
            clearTimeout(collapseTimeOut);
     
            if (node.get_expandedNode()) {
                node.get_expandedNode().collapse();
                return;
            }
     
            if (expandedSubling && expandedSubling !== node) {
                expandedSubling.collapse(true);
            }
     
            expandTimeOut = setTimeout(function () {
                if (!node.get_expanded()) {
                    node.expand();
                }
            }, expandDelay);
     
            isMouseOverNode = true;
        };
     
        window.OnClientNodeMouseLeave = function (sender, args) {
            var $ = $telerik.$,
                        node = args.get_node(),
                        event = args.get_domEvent();
     
            if (node.get_hidden()) {
                return;
            }
     
            clearTimeout(expandTimeOut);
     
            isMouseOverNode = false;
     
            if ($(event.relatedTarget).closest(node.get_animationContainer()).length > 0) {
                return;
            }
     
            collapseTimeOut = setTimeout(function () {
                if (!isMouseOverNode) {
                    if (sender.get_expandedNode()) {
                        sender.get_expandedNode().collapse();
                    }
                }
            }, collapseDelay);
        };
    </script>


Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.