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'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:
Share Improve this question edited Jun 1, 2018 at 15:52 DobleL 3,9281 gold badge16 silver badges20 bronze badges asked Jun 1, 2018 at 15:36 GoSmashGoSmash 1,1081 gold badge11 silver badges38 bronze badges2 Answers
Reset to default 7 +50I 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.
I checked out the documentation for kendo UI treeview, please check it out here also there is a working example of buttons implemented in the same link above.
I tried implementing the example with the code you provided and it seems to work fine, please let me know if this is what you are looking for!
angular.module("KendoDemos", ["kendo.directives"])
.controller("MyCtrl", function($scope) {
$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"
}
]
});
$scope.click = function(dataItem) {
alert(dataItem.text);
};
function makeItem() {
var txt = kendo.toString(new Date(), "HH:mm:ss");
return {
text: txt
};
};
$scope.addAfter = function(item) {
var array = item.parent();
var index = array.indexOf(item);
var newItem = makeItem();
array.splice(index + 1, 0, newItem);
};
$scope.addBelow = function($event) {
$event.stopPropagation();
// can't get this to work by just modifying the data source
// therefore we're using tree.append instead.
var newItem = makeItem();
$scope.tree.append(newItem, $scope.tree.select());
};
$scope.remove = function(item, $event) {
// $event.stopPropagation();
var array = item.parent();
var index = array.indexOf(item);
array.splice(index, 1);
$scope.selectedItem = undefined;
};
}).k-treeview .k-in {
padding: 5px;
}<link href="https://cdnjs.cloudflare./ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik./kendo-ui/treeview/angular">
<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik./2018.2.516/styles/kendo.mon-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik./2018.2.516/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik./2018.2.516/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik./2018.2.516/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik./2018.2.516/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik./2018.2.516/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div class="demo-section k-content" ng-controller="MyCtrl">
<div class="box-col">
<h4>TreeView</h4>
<div kendo-tree-view="tree" k-data-source="treeData" k-on-change="selectedItem = dataItem">
<span k-template>
{{dataItem.text}}
<i class="fa fa-plus" aria-hidden="true" ng-click="addBelow($event)"></i>
<i class="fa fa-trash" aria-hidden="true" ng-click="selectedItem=dataItem;remove(selectedItem, $event)"></i>
</span>
</div>
</div>
<div class="box-col" ng-show="selectedItem">
<h4>Selected: {{selectedItem.text}}</h4>
<button class="k-button" ng-click="addAfter(selectedItem)">Add item below</button>
<button class="k-button" ng-click="addBelow(selectedItem)">Add child item</button>
<button class="k-button" ng-click="remove(selectedItem)">Delete</button>
</div>
</div>
</div>
</body>
</html>