New to Kendo UI for Vue? Start a free 30-day trial

Showing Loading State When Expanding Nodes in Kendo UI for Vue TreeView

Updated on Sep 30, 2025

Environment

Product	Kendo UI for Vue TreeView
Version	Current

Description

I need to show a loading spinner when a node in the Kendo UI for Vue TreeView is expanding and data is being loaded from the server.

This knowledge base article also answers the following questions:

How to add a loading spinner in Vue TreeView when expanding nodes?
How to show a loading indicator for server requests in TreeView?
How to implement a custom loading state in Kendo UI for Vue TreeView?

Solution

To achieve this, track a loading state for each node and dynamically render a <Loader /> component in place of the expand/collapse arrow when the loading flag is active.

Follow these steps:

Create a data structure to store the loading state for each node.
Update the loading state when starting and completing the server request.
Render a <Loader /> component conditionally for nodes that are loading.

Key Details

Use the onExpand event handler to manage the loading state.
Use the itemRender method to customize the rendering of nodes.
Replace the expand/collapse icon with the <Loader /> component when loading is true.

Runnable example

Change Theme

Theme

Loading ...