I'm trying to add multiple buttons inside Kendo treeview node. I have used template to add multiple buttons but failed to achieve their features as the whole node is working a link. Please find below the HTML and JS
HTML
<div kendo-tree-view="tree" k-data-source="treeData" class="hasMenu" k-on-change="selectedItem = dataItem">
<span k-template>
{{dataItem.text}}
<i class="fa fa-plus" aria-hidden="true"></i>
<i class="fa fa-trash" aria-hidden="true"></i>
</span>
</div>
JS
$scope.treeData = new kendo.data.HierarchicalDataSource(
{
data: [
{
text: "My Product",
items: [
{
text: "Building Materials",
items: [
{ text: "Lumber & Composites" },
{ text: "Molding" },
{ text: "Drywall" },
{ text: "Doors" }
]
},
{ text: "Decor" },
{ text: "Chemicals" },
{ text: "Hardware" },
{ text: "Lighting & Fixtures" },
{ text: "Paint" },
{ text: "Storage & Organization" },
{ text: "Window Coverings" },
]
},
{
text: "Service",
items: [
{ text: "Labor" },
{ text: "Installation" },
{ text: "Removal Service" },
{ text: "Travel" },
{ text: "Ladder" },
{ text: "Service Call" },
]
},
{ text: "Discount" }
]
});
Screen shot for reference:
I have tested a similar scenario at my side and it worked correctly in my case. Here is my test dojo. Would you please review it and let me know if your scenario is different or if it still doesn't works correctly.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With