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

1. Access the dataItem of the selected node.
2. Pass the data from the dataItem to the content 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/service/v2/core/Employees"
				}
			},
			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>