Edit this page


The following article demonstrates how to use and subscribe to the OnClientNodeCollapsing client-side event of the RadNavigation control.

The client-side OnClientNodeCollapsing event of the RadNavigation is raised when some expanded Node is about be collapsed. The collapse of some node could appear when the mouse is moved out from the node. In scenario when the ClickToOpen property of the RadNavigation is set to true, the collapse will be fired when the expandednode is clicked or when you click on the document.

To handle this event, simply write a JavaScript function that can be called when the event occurs. Then assign the name of this function as the value ofthe OnClientNodeCollapsing property. This event could be canceled and the technique for achieving this is demonstrated in Example 1.

The client-side OnClientNodeCollapsing event handler receives two arguments:

  • Sender — the RadNavigation object that fired the event.

  • Event arguments — an event arguments object that exposes the following methods:

ButtonClicking Event Arguments Object

Name Parameters Return Type Description
get_cancel() bool Gets a value that indicates whether the event is canceled.
set_cancel(value) bool Sets whether the event will be canceled (if true is passed).
get_node() Telerik.Web.UI.NavigationNode Returns an instance of NavigationNode that is about to be collapsed.

Example 1: Handle the RadNavigation's client-side OnClientNodeCollapsing event.

<script type="text/javascript">
    function OnClientNodeCollapsing(sender, eventArgs) {

<telerik:RadNavigation runat="server" ID="RadNavigation1" OnClientNodeCollapsing="OnClientNodeCollapsing">
        <telerik:NavigationNode Text="Node1">
                <telerik:NavigationNode Text="ChildNode1"></telerik:NavigationNode>
                <telerik:NavigationNode Text="ChildNode2"></telerik:NavigationNode>
                <telerik:NavigationNode Text="ChildNode3"></telerik:NavigationNode>
                <telerik:NavigationNode Text="ChildNode4"></telerik:NavigationNode>

        <telerik:NavigationNode Text="Node2"></telerik:NavigationNode>
        <telerik:NavigationNode Text="Node3"></telerik:NavigationNode>
Is this article helpful? No Yes
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article