New to Kendo UI for jQuery? Download free 30-day trial

Show Dialog on TreeView Node Selection


Product Progress® Kendo UI® TreeView for jQuery Progress® Kendo UI® Dialog for jQuery
Operating System All
Browser All
Preferred Language JavaScript


How can I display TreeView node data in a Kendo UI Dialog on node selection?


  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>               

        var data = new{
            transport: {
                read: {
                    url: "",
                    dataType: "jsonp"
            schema: {
                model: {
                    id: "EmployeeId",
                    hasChildren: "HasEmployees"

            dataSource: data,
            dataTextField: "FullName",
            select: onSelect

            title: "Customer Details",              
            visible: false,
                    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");
In this article