This example shows the client-side events supported by Telerik TreeView for ASP.NET MVC.

The treeview has the following events:

• OnLoad - raised when the component is initialized
• OnSelect (cancellable) - raised when a node gets selected
• OnExpand (cancellable) - raised when the child group of a node gets expanded
• OnCollapse (cancellable) - raised when the child group of a node gets collapsed
• OnDataBinding (cancellable) - raised a request for data has been made (load on demand)
• OnDataBound - raised a request for data has finished

In addition, the following events are raised when the drag&drop mode is enabled:

• OnNodeDragStart (cancellable) - raised when an attempt to drag a node has been made. Used to deny dragging of nodes.
• OnNodeDragging - raised while the user drags a node. Used for providing clues whether the drag will be successful, thus enhancing user experience. This event is not logged in the current example, because it gets fired too many times.
• OnNodeDrop (cancellable) - raised when a node is dropped. Used for processing of the drop result.
• OnNodeDropped - raised when a node has been dropped on the treeview. Used when saving the treeview state.
• OnNodeDragCancelled - raised when the user cancels a drag by hitting the Esc key. Used for cleaning up any artifacts from the dragging.

You can subscribe to each of the events in the following ways:

• With a pre-defined javascript function

  <%= Html.Telerik().TreeView()
          .Name("TreeView")
          .ClientEvents(events => events
              .OnSelect("onSelect")
          )
  %>
  
  <script type="text/javascript">
      function onSelect(e) {
          // your code
      }
  </script>
  

• With an inline function, serialized from the server

  <% Html.Telerik().TreeView()
         .Name("TreeView")
         .ClientEvents(events => events
         .OnLoad(() => 
         {%>
              function(e) {
                  // your code
              }
         <%})
         .Render();
  %>
  

• Purely client-side event registration

  <%= Html.Telerik().TreeView().Name("TreeView") %>
  
  <script type="text/javascript">
      $(document).ready(function() {
          $('#TreeView').bind('select', function(e) {
              // your code
          });
      });
  </script>