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/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>