New to Kendo UI for VueStart a free 30-day trial

Updating Expanded Items

The Kendo UI for Vue Native TreeView provides specific approaches for working with its data and updating the expanded field.

The available options are:

Mutating the Items Directly

The following example demonstrates how to directly update the TreeView items.

Change Theme
Theme
Loading ...

Using a Helper Function

The processTreeViewItems helper function updates the items in an immutable way, that is, works with a copy of the data. While using processTreeViewItems is similar to creating a copy of the data before each item update, the data field of the application state does not change. That is why, the helper function approach is useful when other components depend on the data field.

The following example demonstrates how to introduce an additional state field (expand) which holds the IDs of the expanded items and is passed to processTreeViewItems on each re-render.

Change Theme
Theme
Loading ...

Using a Helper Function with Custom Data Items

When working with custom data items in a Helper function scenario, in addition to the default configuration, we have to define values for the textField and childrenField properties

Change Theme
Theme
Loading ...