Show Dialog on TreeView Node Selection
Environment
Product | Progress® Kendo UI® TreeView for jQuery | Progress® Kendo UI® Dialog for jQuery |
Operating System | All | |
Browser | All | |
Preferred Language | JavaScript |
Description
How can I display TreeView node data in a Kendo UI Dialog on node selection?
Solution
- Access the
dataItem
of the selected node. - Pass the data from the
dataItem
to thecontent
method of the Dialog.
<div id="treeview"></div>
<div id="dialog"></div>
<script>
var data = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/Employees",
dataType: "jsonp"
}
},
schema: {
model: {
id: "EmployeeId",
hasChildren: "HasEmployees"
}
}
});
$("#treeview").kendoTreeView({
dataSource: data,
dataTextField: "FullName",
select: onSelect
});
$("#dialog").kendoDialog({
title: "Customer Details",
visible: false,
actions:
[{
text: "OK",
action: function(e){
alert('"OK" button was clicked')
},
primary: true
},
{
text: "Cancel"
}]
})
function onSelect(e){
var treeView = $('#treeview').data('kendoTreeView');
var data = treeView.dataItem(e.node);
var content = '<b>FullName: </b>' + data.FullName + '</br><b>EmployeeId: </b>' + data.EmployeeId;
var dialog = $("#dialog").data("kendoDialog");
dialog.content(content);
dialog.open();
}
</script>