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

Node Click-Move-Click

As of Telerik UI for ASP.NET Core UI R2 SP1 2023, users can reorder the TreeView's nodes by using the click-move-click functionality. To enable the feature use the .DragAndDrop(dd=>dd.ClickMoveClick(true)) configuration option. To start moving the node, users can click on it, and then click again to place the node in its new position.

    @(Html.Kendo().TreeView()
        .Name("treeview")
        .DragAndDrop(dd=>dd.ClickMoveClick(true))
        .DataTextField("Name")
        .DataSource(dataSource => dataSource
            .Read(read => read
                .Action("Employees", "TreeView")
            )
        )
    )
    <kendo-treeview auto-bind="true" datatextfield="Name" load-on-demand="true" name="treeview">
        <drag-and-drop click-move-click="true"/>
        <hierarchical-datasource>
            <schema>
                <hierarchical-model id="id"></hierarchical-model>
            </schema>
            <transport>
                <read url="@Url.Action("Employees", "TreeView")"/>
            </transport>
        </hierarchical-datasource>
    </kendo-treeview>

Drag and Drop

When the drag-and-drop feature is enabled, the nodes of the TreeView can be dragged and dropped across all levels.

The functionality also features tooltips that help users indicate where the node will be dropped.

The following example demonstrates how to enable the drag-and-drop functionality for the TreeView nodes.

    @(Html.Kendo().TreeView()
        .Name("treeview")
        .DragAndDrop(true)
        .DataTextField("Name")
        .DataSource(dataSource => dataSource
            .Read(read => read
                .Action("Employees", "TreeView")
            )
        )
    )
    <kendo-treeview auto-bind="true" drag-and-drop="true" datatextfield="Name" load-on-demand="true" name="treeview">
        <hierarchical-datasource>
            <schema>
                <hierarchical-model id="id"></hierarchical-model>
            </schema>
            <transport>
                <read url="@Url.Action("Employees", "TreeView")"/>
            </transport>
        </hierarchical-datasource>
    </kendo-treeview>

See Also

In this article