Event Reference (igTree)

Topic Overview

Purpose

The topic that introduces the user to the igTree™ control’s events.

In this topic

This topic contains the following sections:

Event Reference

The following table summarizes the purpose and functionality of the igTree control’s featured events:

Event	Description	Cancelable
dataBinding	Event is raised before databinding is performed.	False
dataBound	Event is raised after databinding is finished.	False
drag	Event is raised on node drag.	True
dragStart	Event is raised on node drag start.	True
dragStop	Event is raised after a drag operation has completed.	False
nodeCheckstateChanged	Event is raised after the checkstate of a node is changed.	False
nodeCheckstateChanging	Event is raised before the checkbox state of a node is changed.	True
nodeClick	Event is raised on node click.	False
nodeCollapsed	Event is raised after a node is collapsed.	False
nodeCollapsing	Event is raised before a node is collapsed.	True
nodeDoubleClick	Event is raised on node double click.	False
nodeDropped	Event is raised after a node is dropped.	False
nodeDropping	Event is raised before a node is dropped.	True
nodeExpanded	Event is raised after a node is expanded.	False
nodeExpanding	Event is raised before a node is expanded.	True
nodePopulated	Event is raised after the children of a node are populated in the case of load on demand.	False
nodePopulating	Event is raised before the children of a node are populated in the case of load on demand.	True
rendered	Event is raised after rendering of the tree has finished.	False
rendering	Event is raised before rendering of the tree begins.	False
selectionChanged	Event is raised after a new node is selected.	False
selectionChanging	Event is raised before a new node is selected.	True

Attaching Event Handlers in jQuery and MVC

Attaching Event Handlers in jQuery

To attach to an event, just define a handler for it in the same way you define a property. Now if the event is triggered, the handler will be called.

In JavaScript:

$("#igTree1").igTree({
      selectionChanging: function (e, args) {
           // Handle event  
      }
});

The following example shows how this is done and it also demonstrates the use of the jQuery's on method to attach an event handler to a selected element:

https://github.com/IgniteUI/help-samples/tree/master/22.2/EN/tree-control/api-and-events

Attaching Event Handlers in MVC

When you attach a handler in MVC, use the jQuery User Interface (UI) pattern for attaching handlers to widget events. This means you should use jQuery’s on, bind or live functions and pass the event’s name to them. The event name should be a lowercase string that is a concatenation of the name of the control and the event. You can do the same with the jQuery widget as well, but this would not be necessary because you can attach the event handlers directly when initializing the control. For more information, see the jQuery widget factory. The code bellow demonstrates how to attach handlers to igTree events when implementing a MVC solution.