Kendo UI react tree view add action buttons to each node

1
votes

I want to add actions button in an art of dropdown to each node in the kendo ui tree view for react. https://www.telerik.com/kendo-react-ui/wrappers/treeview/

For example:

enter image description here

But instead of a delete icon we want to show "..." and when a user clicks on these three dots, a dropdown (I don't want a context menu) with multiple actions (create, update, delete) should appear.

In Kendo UI for jQuery it is solved using templates (https://demos.telerik.com/kendo-ui/treeview/templates). I have no idea how to achieve this with react. Any help is highly appreciated.

thanks!

1
reactjskendo-uikendo-treeview

1 Answers

3
votes

The same template can be used in the React TreeView:

TreeView: 

<TreeView dataSource={this.dataSource} template={kendo.template($("#treeview-template").html())}/>

The Template is an HTML Element and has to be placed in an HTML file like the index.html for example:

    <script id="treeview-template" type="text/kendo-ui-template">
        #: item.text #
        # if (!item.items) { #
            <a class='k-icon k-i-close-outline' href='\#'></a>
        # } #
    </script>