kendo-vue/knowledge-base/treeview-show-parent-nodes-path.md

title	description	type	page_title	slug	tags	res_type	category
Show the list of the parent nodes of a selected TreeView node.	A sample project that shows how to list the parent nodes of a selected TreeView node.	how-to	Learn how to display the parent nodes(path) of a selected TreeView node.	treeview-show-parent-nodes-path	treeview, path, parent, nodes, selected, kendovue, native	kb	knowledge-base

Environment

Product Version	3.6.3
Product	Progress® Kendo UI for Vue Native

Description

This Knowledge base(KB) article shows how you can display the list of the parent nodes above the selected TreeView node. With the demonstrated approach you can get the 'path' from the root of the TreeView to the selected node.

KB sections

• Solution description
• Runnable example

Solution description

To get the path from the root element to the select node we are using the following method which is called every time a TreeView node is selected.

getParents(indexArray, index, tree) {
  if (tree[indexArray[index]]) {
    if (index + 1 !== indexArray.length) {
      this.currentPath += tree[indexArray[index]].text + ' > ';
    } else {
      this.currentPath += tree[indexArray[index]].text;
    }
  }

  if (index < indexArray.length && tree[indexArray[index]].items) {
    this.getParents(indexArray, index + 1, tree[indexArray[index]].items);
  }
},

Runnable example

{% meta id:index height:620 %} {% embed_file treeview-show-parent-nodes-path/main.vue preview %} {% embed_file treeview-show-parent-nodes-path/main.js %} {% endmeta %}