PROJECT DESCRIPTION
This project implements the ExpandDelay and CollapseDelay functionality based on the
Navigation - Expand On Hover demo and behaves similarly to the RadMenu.
<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>