# TreeView Events

This article explains the events available in the Telerik TreeView for Blazor:

* [CheckedItemsChanged](https://www.telerik.com/blazor-ui/documentation/components/treeview/events#checkeditemschanged)
* [ExpandedItemsChanged](https://www.telerik.com/blazor-ui/documentation/components/treeview/events#expandeditemschanged)
* [OnExpand](https://www.telerik.com/blazor-ui/documentation/components/treeview/events#onexpand)
* [OnItemClick](https://www.telerik.com/blazor-ui/documentation/components/treeview/events#onitemclick)
* [OnItemContextMenu](https://www.telerik.com/blazor-ui/documentation/components/treeview/events#onitemcontextmenu)
* [OnItemDoubleClick](https://www.telerik.com/blazor-ui/documentation/components/treeview/events#onitemdoubleclick)
* [OnItemRender](https://www.telerik.com/blazor-ui/documentation/components/treeview/events#onitemrender)
* [SelectedItemsChanged](https://www.telerik.com/blazor-ui/documentation/components/treeview/events#selecteditemschanged)
* [Drag Events](https://www.telerik.com/blazor-ui/documentation/components/treeview/events#drag-events)

## CheckedItemsChanged

The `CheckedItemsChanged` event fires every time the user uses a [checkbox](https://www.telerik.com/blazor-ui/documentation/components/treeview/checkboxes/overview) to select a new item.

## ExpandedItemsChanged

The `ExpandedItemsChanged` event fires every time the user expands or collapses a TreeView item.

## OnExpand

The `OnExpand` event fires when the user expands or collapses a node (either with the mouse, or with the keyboard). You can use it to know that the user performed that action, and/or to implement [load on demand](https://www.telerik.com/blazor-ui/documentation/components/treeview/data-binding/load-on-demand).

If you set the `ShouldRender` field of the event arguments to `true`, the component will re-render after the event (it will call `StateHasChanged()`). This can be useful if you need to change its parameters or state during the event execution and especially if you need to execute `async` logic in the event handler.

> tip The event is an `EventCallback`. It can be synchronous and return `void`, or asynchronous and return `async Task`. Do not use `async void`.

## OnItemClick

The `OnItemClick` event fires when the user clicks, taps or presses `Enter` on a TreeView node (item). For example, use this event to react to user actions and load data on demand for another component.

The `OnItemClick` event handler receives a `TreeViewItemClickEventArgs` argument, which has the following properties.

<style>
    .article table {
        table-layout: auto;
        word-break: normal;
    }
</style>

| Property       | Type        | Description                                                                                                                                                                                                                                                       |
| -------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `EventArgs`    | `EventArgs` | This object maps to `MouseEventArgs` or `KeyboardEventArgs` depending on the user action.                                                                                                                                                                         |
| `Field`        | `string`    | The `Field` parameter of the clicked column.                                                                                                                                                                                                                      |
| `Item`         | `object`    | The data item. Cast the object to your model type to access its members.                                                                                                                                                                                          |
| `ShouldRender` | `bool`      | Sets if the component will re-render after the event via `StateHasChanged()` call. This can be useful if you need to change the component parameters or state during the event execution, and especially if you need to execute async logic in the event handler. |

## OnItemContextMenu

The `OnItemContextMenu` event fires when the user right-clicks on a TreeView node, presses the context menu keyboard button, or taps-and-holds on a touch device.

The event handler receives a `TreeViewItemContextMenuEventArgs` argument, which has the following properties.

<style>
    .article table {
        table-layout: auto;
        word-break: normal;
    }
</style>

| Property       | Type        | Description                                                                                                                                                                                                                                                       |
| -------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `EventArgs`    | `EventArgs` | This object maps to `MouseEventArgs` or `KeyboardEventArgs` depending on the user action.                                                                                                                                                                         |
| `Field`        | `string`    | The `Field` parameter of the clicked column.                                                                                                                                                                                                                      |
| `Item`         | `object`    | The data item. Cast the object to your model type to access its members.                                                                                                                                                                                          |
| `ShouldRender` | `bool`      | Sets if the component will re-render after the event via `StateHasChanged()` call. This can be useful if you need to change the component parameters or state during the event execution, and especially if you need to execute async logic in the event handler. |

The `OnItemContextMenu` is used to [integrate the Context menu](https://www.telerik.com/blazor-ui/documentation/components/contextmenu/integration#context-menu-for-a-treeview-node) to the TreeView node.

## OnItemDoubleClick

The `OnItemDoubleClick` event fires when the user double-clicks or double-taps a TreeView node.

The event handler receives a `TreeViewItemDoubleClickEventArgs` argument, which has the following properties.

<style>
    .article table {
        table-layout: auto;
        word-break: normal;
    }
</style>

| Property       | Type        | Description                                                                                                                                                                                                                                                       |
| -------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `EventArgs`    | `EventArgs` | This object maps to `MouseEventArgs` or `KeyboardEventArgs` depending on the user action.                                                                                                                                                                         |
| `Field`        | `string`    | The `Field` parameter of the clicked column.                                                                                                                                                                                                                      |
| `Item`         | `object`    | The data item. Cast the object to your model type to access its members.                                                                                                                                                                                          |
| `ShouldRender` | `bool`      | Sets if the component will re-render after the event via `StateHasChanged()` call. This can be useful if you need to change the component parameters or state during the event execution, and especially if you need to execute async logic in the event handler. |

## OnItemRender

The `OnItemRender` event fires when each node in the TreeView renders.

The event handler receives as an argument an `TreeViewItemRenderEventArgs` object that contains:

| Property | Description                                                                                                        |
| -------- | ------------------------------------------------------------------------------------------------------------------ |
| `Item`   | The current item that renders in the TreeView.                                                                     |
| `Class`  | The custom CSS class that will be added to the item. Renders on the `<div>` element that wraps the current `Item`. |

## SelectedItemsChanged

The `SelectedItemsChanged` event fires when the [selection](https://www.telerik.com/blazor-ui/documentation/components/treeview/selection/overview) is enabled and the user clicks on a new item.

## Drag Events

The TreeView implements the Drag and Drop functionality through the following drag events:

* The `OnDragStart` event fires when the user starts dragging a node.
* The `OnDrag` event fires continuously while a node is being dragged by the user.
* The `OnDrop` event fires when the user drops a node into a new location. The event fires only if the new location is a Telerik component.
* The `OnDragEnd` event fires when a drag operation ends. Unlike the `OnDrop` event, `OnDragEnd` will fire even if the new location is not a Telerik component.

For more details and examples, see the [Treeview Drag and Drop](https://www.telerik.com/blazor-ui/documentation/components/treeview/drag-drop) article.

## Example

> caption Handle Blazor TreeView Events

<demo metaUrl="client/treeview/events/example-1/" height="420"></demo>

## See Also

* [TreeView Overview](https://www.telerik.com/blazor-ui/documentation/components/treeview/overview)
* [TreeView Selection](https://www.telerik.com/blazor-ui/documentation/components/treeview/selection/overview)
* [TreeView CheckBoxes](https://www.telerik.com/blazor-ui/documentation/components/treeview/checkboxes/overview)