New to Telerik UI for ASP.NET Core? Download free 30-day trial

Events

The Telerik UI TreeView for ASP.NET Core exposes multiple events that allow you to control and customize the behavior of the UI component.

For a complete example on basic TreeView events, refer to the demo on using the events of the TreeView.

Handling by Handler Name

The following example demonstrates how to subscribe to events by a handler name.

    @(Html.Kendo().TreeView()
            .Name("treeview")
            .Checkboxes(true)
            .DragAndDrop(true)
            .LoadOnDemand(false)
            .Events(events => events
                .Change("onChange")
                .Select("onSelect")
                .Check("onCheck")
                .Collapse("onCollapse")
                .Expand("onExpand")
                .DragStart("onDragStart")
                .Drag("onDrag")
                .Drop("onDrop")
                .DragEnd("onDragEnd")
                .Navigate("onNavigate")
                .LoadCompleted("onLoadCompleted")
            )
            .DataTextField("Name")
            .DataSource(dataSource => dataSource
                .Read(read => read
                    .Action("Employees", "treeview")
                )
            )
        )

    <script type="text/javascript">
            function onChange(e) {
            console.log('Selected node changed to:', e.sender.select());
        }

        function onSelect(e) {
            console.log('Selected node:', e.node);
        }

        function onCheck(e) {
            console.log('Checked node:', e.node);
        }

        function onCollapse(e) {
            console.log('Collapsed node:', e.node);
        }

        function onExpand(e) {
            console.log('Expanded node:', e.node);
        }

        function onDragStart(e) {
            console.log('Started dragging:', e.sourceNode);
        }

        function onDrag(e) {
            console.log("Dragging:", e.sourceNode);
        }

        function onDragEnd(e) {
            console.log("Finished dragging:", e.sourceNode);
        }

        function onDrop(e) {
            console.log("Dropped:", e.sourceNode);
        }

        function onLoadCompleted(e) {
            console.log("Load Completed: ", Array.prototype.map.call(e.nodes, function (item) { return item.Name; }).join(", "));
        }
    </script>
    <kendo-treeview auto-bind="true" drag-and-drop="true" load-on-demand="false" datatextfield="Name" name="treeview" on-change="onChange" on-select="onSelect" on-check="onCheck" on-collapse="onCollapse" on-expand="onExpand" on-dragstart="onDragStart" on-drag="onDrag" on-drop="onDrop" on-dragend="onDragEnd" on-navigate="onNavigate" on-load-completed="onLoadCompleted">
        <hierarchical-datasource>
            <schema>
                <hierarchical-model id="id"></hierarchical-model>
            </schema>
            <transport>
                <read url="@Url.Action("Employees", "treeview")" cache="true" />
            </transport>
        </hierarchical-datasource>
        <checkboxes enabled="true" />
    </kendo-treeview>

    <script type="text/javascript">
        function onChange(e) {
            console.log('Selected node changed to:', e.sender.select());
        }

        function onSelect(e) {
            console.log('Selected node:', e.node);
        }

        function onCheck(e) {
            console.log('Checked node:', e.node);
        }

        function onCollapse(e) {
            console.log('Collapsed node:', e.node);
        }

        function onExpand(e) {
            console.log('Expanded node:', e.node);
        }

        function onDragStart(e) {
            console.log('Started dragging:', e.sourceNode);
        }

        function onDrag(e) {
            console.log("Dragging:", e.sourceNode);
        }

        function onDragEnd(e) {
            console.log("Finished dragging:", e.sourceNode);
        }

        function onDrop(e) {
            console.log("Dropped:", e.sourceNode);
        }

        function onLoadCompleted(e) {
            console.log("Load Completed: ", Array.prototype.map.call(e.nodes, function (item) { return item.Name; }).join(", "));
        }
    </script>

Next Steps

See Also

In this article