# How to create dynamic tree view **URL:** \ **Category:** Kibana\ **Tags:** kibana-plugin-development\ **Created:** [October 27, 2020, 6:48am UTC](https://discuss.elastic.co/t/how-to-create-dynamic-tree-view/253392 "2020-10-27T06:48:34Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![praveer](https://avatars.discourse-cdn.com/v4/letter/p/41988e/32.png) [@praveer](https://discuss.elastic.co/u/praveer)\ **Post date:** [October 27, 2020, 6:48am UTC](https://discuss.elastic.co/t/how-to-create-dynamic-tree-view/253392/1 "2020-10-27T06:48:34Z")
Hi Team, I have created custom plugin in Kibana. In my plugin I have a requirement in which I have to create a dynamic tree view. Which would enable user to add/remove nodes from tree view at runtime. It would also be helpful if we could implement click event on the node and get to know which node is clicked. Regards Praveer. ---
**Author:** ![rudolf](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/rudolf/32/51200_2.png) [@rudolf](https://discuss.elastic.co/u/rudolf)\ **Post date:** [October 30, 2020, 9:50am UTC](https://discuss.elastic.co/t/how-to-create-dynamic-tree-view/253392/2 "2020-10-30T09:50:05Z")
Hi Praveer, The "public" / browser-side of a Kibana plugin can render anything to the DOM so this is really up to you to decide how you'd like to implement such a UI component. We recommend using React since you'll be able to use several helper methods used by other Kibana plugins. You can take a look at EUI's tree view [https://elastic.github.io/eui/#/navigation/tree-view](https://elastic.github.io/eui/#/navigation/tree-view) but there might be other React components better suited to your needs. ---
**Author:** ![praveer](https://avatars.discourse-cdn.com/v4/letter/p/41988e/32.png) [@praveer](https://discuss.elastic.co/u/praveer)\ **Post date:** [October 31, 2020, 1:25pm UTC](https://discuss.elastic.co/t/how-to-create-dynamic-tree-view/253392/3 "2020-10-31T13:25:00Z")
Hi, I have developed dynamic treeview using [https://elastic.github.io/eui/#/navigation/tree-view](https://elastic.github.io/eui/#/navigation/tree-view) as shown in below screen shot. When user clicks on any button 'And', 'Or' and 'Query', it gets added to the tree view. ![dynamic tree view](https://us1.discourse-cdn.com/elastic/original/3X/c/7/c71d1f183e07ef7b57e597efcfbbc9c31e201775.png) But on editing I am not able to access the clicked node either to edit it or move its position or delete that particular node. Can you help me in how to achieve editing of node in dynamically generated tree view. Regards Praveer. ---
**Author:** ![rudolf](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/rudolf/32/51200_2.png) [@rudolf](https://discuss.elastic.co/u/rudolf)\ **Post date:** [November 4, 2020, 11:14am UTC](https://discuss.elastic.co/t/how-to-create-dynamic-tree-view/253392/4 "2020-11-04T11:14:23Z")
Did you specify a callback function for the `EuiTreeViewNode`s? ---
**Author:** ![praveer](https://avatars.discourse-cdn.com/v4/letter/p/41988e/32.png) [@praveer](https://discuss.elastic.co/u/praveer)\ **Post date:** [November 9, 2020, 12:56pm UTC](https://discuss.elastic.co/t/how-to-create-dynamic-tree-view/253392/5 "2020-11-09T12:56:51Z")
Hi Rudolf, I have tried using EuiTreeViewNodes but getting error on importing. I couldn't find any documentation regarding this so can you please help me out. I am referring to below link [https://elastic.github.io/eui/#/navigation/tree-view](https://elastic.github.io/eui/#/navigation/tree-view) Below is the code i have implemented. ```auto import { EuiTreeView } from '@elastic/eui'; import { EuiTreeViewNode } from '@elastic/eui/src-docs/src/views/tree_view/tree_view_props'; // on button click add node to treeviewItems const onAndClick = () => { let tempItems = [...treeviewItems]; if (treeviewItems.length === 0) { tempItems.push( } iconWhenExpanded={} /> ); } else { updateTreeView(treeviewItems[0], "And"); } setTreeviewItems(tempItems); } // render treeview component ``` Getting below error ```auto ERROR in ./public/components/correlation-rule/new-correlation.tsx │ Module not found: Error: Can't resolve '@elastic/eui/src-docs/src/views/tree_view/tree_view_props' in '/home/praveer/Praveer/kibana_7.9/plugins/correlation_app/public/components/correlation-rule' │ resolve '@elastic/eui/src-docs/src/views/tree_view/tree_view_props' in '/home/praveer/Praveer/kibana_7.9/plugins/correlation_app/public/components/correlation-rule' │ Parsed request is a module │ using description file: /home/praveer/Praveer/kibana_7.9/plugins/correlation_app/package.json (relative path: ./public/components/correlation-rule) │ Field 'browser' doesn't contain a valid alias configuration │ resolve as module │ /home/praveer/Praveer/kibana_7.9/plugins/correlation_app/public/components/correlation-rule/node_modules doesn't exist or is not a directory │ /home/praveer/Praveer/kibana_7.9/plugins/correlation_app/public/components/node_modules doesn't exist or is not a directory │ /home/praveer/Praveer/kibana_7.9/plugins/correlation_app/public/node_modules doesn't exist or is not a directory │ /home/praveer/Praveer/kibana_7.9/plugins/node_modules doesn't exist or is not a directory │ /home/praveer/Praveer/node_modules doesn't exist or is not a directory │ /home/praveer/node_modules doesn't exist or is not a directory │ /home/node_modules doesn't exist or is not a directory │ /node_modules doesn't exist or is not a directory │ looking for modules in /home/praveer/Praveer/kibana_7.9/plugins/correlation_app/node_modules │ using description file: /home/praveer/Praveer/kibana_7.9/plugins/correlation_app/package.json (relative path: ./node_modules) │ Field 'browser' doesn't contain a valid alias configuration │ looking for modules in /home/praveer/Praveer/kibana_7.9/node_modules │ using description file: /home/praveer/Praveer/kibana_7.9/package.json (relative path: ./node_modules) │ Field 'browser' doesn't contain a valid alias configuration │ using description file: /home/praveer/Praveer/kibana_7.9/node_modules/@elastic/eui/package.json (relative path: ./src-docs/src/views/tree_view/tree_view_props) │ no extension │ Field 'browser' doesn't contain a valid alias configuration │ /home/praveer/Praveer/kibana_7.9/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props doesn't exist │ .js │ Field 'browser' doesn't contain a valid alias configuration │ using description file: /home/praveer/Praveer/kibana_7.9/plugins/correlation_app/package.json (relative path: ./node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props) │ no extension │ Field 'browser' doesn't contain a valid alias configuration │ /home/praveer/Praveer/kibana_7.9/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props.js doesn't exist │ .ts │ Field 'browser' doesn't contain a valid alias configuration │ /home/praveer/Praveer/kibana_7.9/plugins/correlation_app/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props doesn't exist │ .js │ Field 'browser' doesn't contain a valid alias configuration │ /home/praveer/Praveer/kibana_7.9/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props.ts doesn't exist │ .tsx │ Field 'browser' doesn't contain a valid alias configuration │ /home/praveer/Praveer/kibana_7.9/plugins/correlation_app/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props.js doesn't exist │ .ts │ Field 'browser' doesn't contain a valid alias configuration │ /home/praveer/Praveer/kibana_7.9/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props.tsx doesn't exist │ json │ Field 'browser' doesn't contain a valid alias configuration │ /home/praveer/Praveer/kibana_7.9/plugins/correlation_app/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props.ts doesn't exist │ .tsx │ Field 'browser' doesn't contain a valid alias configuration │ /home/praveer/Praveer/kibana_7.9/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_propsjson doesn't exist │ /home/praveer/Praveer/kibana_7.9/plugins/correlation_app/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props.tsx doesn't exist │ json │ Field 'browser' doesn't contain a valid alias configuration │ as directory │ /home/praveer/Praveer/kibana_7.9/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props doesn't exist │ /home/praveer/Praveer/kibana_7.9/plugins/correlation_app/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_propsjson doesn't exist │ as directory │ /home/praveer/Praveer/kibana_7.9/plugins/correlation_app/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props doesn't exist │ [/home/praveer/Praveer/kibana_7.9/plugins/correlation_app/public/components/correlation-rule/node_modules] │ [/home/praveer/Praveer/kibana_7.9/plugins/correlation_app/public/components/node_modules] │ [/home/praveer/Praveer/kibana_7.9/plugins/correlation_app/public/node_modules] │ [/home/praveer/Praveer/kibana_7.9/plugins/node_modules] │ [/home/praveer/Praveer/node_modules] │ [/home/praveer/node_modules] │ [/home/node_modules] │ [/node_modules] │ [/home/praveer/Praveer/kibana_7.9/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props] │ [/home/praveer/Praveer/kibana_7.9/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props.js] │ [/home/praveer/Praveer/kibana_7.9/plugins/correlation_app/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props] │ [/home/praveer/Praveer/kibana_7.9/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props.ts] │ [/home/praveer/Praveer/kibana_7.9/plugins/correlation_app/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props.js] │ [/home/praveer/Praveer/kibana_7.9/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props.tsx] │ [/home/praveer/Praveer/kibana_7.9/plugins/correlation_app/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props.ts] │ [/home/praveer/Praveer/kibana_7.9/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_propsjson] │ [/home/praveer/Praveer/kibana_7.9/plugins/correlation_app/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_props.tsx] │ [/home/praveer/Praveer/kibana_7.9/plugins/correlation_app/node_modules/@elastic/eui/src-docs/src/views/tree_view/tree_view_propsjson] │ @ ./public/components/correlation-rule/new-correlation.tsx 5:0-92 707:55-70 │ @ ./public/components/app.tsx │ @ ./public/application.tsx │ @ ./public/plugin.ts ``` If you could provide with some examples or links for documentation it would be helpful. Regards Praveer. ---
**Author:** ![ylasri](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ylasri/32/86120_2.png) [@ylasri](https://discuss.elastic.co/u/ylasri)\ **Post date:** [November 9, 2020, 12:59pm UTC](https://discuss.elastic.co/t/how-to-create-dynamic-tree-view/253392/6 "2020-11-09T12:59:38Z")
Check [here](https://elastic.github.io/eui/#/package/changelog) the version where this compoenent has been released Check package.json of your Kibana dev env to see if kibana is using the minimum release version of eui that contain the desired component ---
**Author:** ![praveer](https://avatars.discourse-cdn.com/v4/letter/p/41988e/32.png) [@praveer](https://discuss.elastic.co/u/praveer)\ **Post date:** [November 9, 2020, 1:29pm UTC](https://discuss.elastic.co/t/how-to-create-dynamic-tree-view/253392/7 "2020-11-09T13:29:49Z")
Hi, In the above link version where EuiTreeView is release is specified but EuiTreeViewNode is not specified. I have also checked package.json of kibana "@elastic/eui": "26.3.3" is specified. I am working on kibana 7.9 Regards Praveer. ---
**Author:** ![rudolf](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/rudolf/32/51200_2.png) [@rudolf](https://discuss.elastic.co/u/rudolf)\ **Post date:** [November 9, 2020, 2:13pm UTC](https://discuss.elastic.co/t/how-to-create-dynamic-tree-view/253392/8 "2020-11-09T14:13:46Z")
You're importing something from deep inside EUI that wasn't meant to be imported. I've adapted the example on the EUI docs to show an alert when you click on Item B -\> I'm a bug > **[epic-banzai-1e7d2 - CodeSandbox](https://codesandbox.io/s/jovial-darwin-5sn25)** > > epic-banzai-1e7d2 using @elastic/datemath, @elastic/eui, moment, react, react-dom, react-scripts ---
**Author:** ![praveer](https://avatars.discourse-cdn.com/v4/letter/p/41988e/32.png) [@praveer](https://discuss.elastic.co/u/praveer)\ **Post date:** [November 12, 2020, 6:20am UTC](https://discuss.elastic.co/t/how-to-create-dynamic-tree-view/253392/9 "2020-11-12T06:20:28Z")
Hi Rudolf, I went through your example. Using call back we can call any method, but mine requirement is to either delete or edit (add children to the clicked node). So for that I would need either the node on which user has clicked or it's id so that either by using getElementById or by getting the whole node I can manipulate the node. In callback how can we pass the clicked node details? Regards Praveer. ---
**Author:** ![thompsongl](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/thompsongl/32/85843_2.png) [@thompsongl](https://discuss.elastic.co/u/thompsongl)\ **Post date:** [November 18, 2020, 4:06pm UTC](https://discuss.elastic.co/t/how-to-create-dynamic-tree-view/253392/10 "2020-11-18T16:06:09Z")
Hey @praveer, Because `callback` is defined on each node independently, you are able to provide the `id` to your on-click method. For instance: ```javascript { label: 'Item A', id: 'item_a', icon: , callback: () => myCallbackMethod('item_a') }, { label: "Item B", id: 'item_b', icon: , callback: () => myCallbackMethod('item_b') }, ``` This would certainly be easier if building the tree from a generated array rather than a static array. Let me know if this works. If not, we can look to update EUI to automatically provide the node id as part of `callback`, but this would not be available in Kibana until the 7.11 release at the earliest. ---
**Author:** ![praveer](https://avatars.discourse-cdn.com/v4/letter/p/41988e/32.png) [@praveer](https://discuss.elastic.co/u/praveer)\ **Post date:** [November 26, 2020, 2:02pm UTC](https://discuss.elastic.co/t/how-to-create-dynamic-tree-view/253392/11 "2020-11-26T14:02:47Z")
Hi @thompsongl Thanks for the help, it worked. I would recommend to update EUI so that callback would return the clicked node. As currently we have to iterate through each node using recursive function to update the node. If we could get the clicked node then it would be a lot more easier as we just need to update the clicked node, and also would be faster. Regards Praveer. ---
**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\ **Post date:** [December 24, 2020, 2:02pm UTC](https://discuss.elastic.co/t/how-to-create-dynamic-tree-view/253392/12 "2020-12-24T14:02:53Z")
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.