A kendo tree list in a kendo grid custom command popup window doesn't work more than once

[Varun]

I have a kendo tree in a dialog box (https://demos.telerik.com/kendo-ui/dialog/treeview-integration) in my kendo grid custom command window (https://demos.telerik.com/kendo-ui/grid/custom-command)

 

For the first time when the user clicks on the custom command button (View Details) of any kendo grid row, the kendo tree works fine. But, when he makes a second click on custom command button on the same/different kendo grid row, the kendo tree loads forever. Also, I am newing up the kendo treeview object on every custom command button click. The dojo link is below

 

https://dojo.telerik.com/@[e-mail]/IDOQIqaP

 

Please let me know if this can be fixed.

Thanks.

[Ivan Danchev]

Hello,

The issue with the TreeView is caused by re-initializing the TreeView while the previous TreeView instance still exists. In short what happens is the following:

1. showDetails function is called on clicking View Details
2. the TreeView is initialized
3. on clicking pick employees the Dialog appears and shows the TreeView
4. on closing the Dialog the TreeView instance still exists (it is not destroyed)
5. the next time showDetails function is called the TreeView is reinitialized event though a previous instance exists

To fix this you can destroy the TreeView on closing the Dialog. But that means you will have to initialize it when it is opened, because showDetails is called only when editing a row. If you just close the Dialog and do not close the Customer Details Window showDetails will not be called and the TreeView will not be initialized. That's why if the TreeView is destroyed on Dialog close it must be initialized on Dialog open.

Additionally the Dialog itself must be destroyed on closing the Customer Details Window and when it is open its content must be set again because when the TreeView is destroyed its div element is removed from the DOM.

Here's the modified dojo example with the respective changes highlighted below:

$(document).ready(function () {
                    var grid = $("#grid").kendoGrid({
                        dataSource: {
                           pageSize: 20,
                           data: createRandomData(50)
                        },
                        pageable: true,
                        height: 550,
                        columns: [
                            { field: "FirstName", title: "First Name", width: "140px" },
                            { field: "LastName", title: "Last Name", width: "140px" },
                            { field: "Title" },
                            { command: { text: "View Details", click: showDetails }, title: " ", width: "180px" }]
                    }).data("kendoGrid");

                    wnd = $("#details")
                        .kendoWindow({
                            title: "Customer Details",
                            modal: true,
                            visible: false,
                            resizable: false,
                         close: function() {
                              var dialog = $("#dialog").data("kendoDialog");
                              dialog.destroy();
                            },
                            width: 300
                        }).data("kendoWindow");

                    detailsTemplate = kendo.template($("#template").html());
                });

                function treeViewDataBound(e) {
                  e.sender.expand(e.node);
                }

                function showDetails(e) {
                    e.preventDefault();

                    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
                    wnd.content(detailsTemplate(dataItem));

                    $("#products").kendoDropDownList({
                        dataTextField: "ProductName",
                        dataValueField: "Producfunction tID",
                        dataSource: {
                            transport: {
                                read: {
                                    dataType: "jsonp",
                                    url: "https://demos.telerik.com/kendo-ui/service/Products",
                                }
                            }
                        }
                    });


                    var dialog = $("#dialog").kendoDialog({
                      width: "400px",
                      visible: false,
                      title: "Employees",
                      closable: true,
                      modal: false,
                      content: "<div class='k-textbox k-space-right search-wrapper'><input id='employees-search' type='text'  placeholder='Search employees'/><span class='k-icon k-i-search'></span></div>" +
                          "<div class='select-all-wrapper'><input data-role='checkbox' onchange='selectAll(this)' type='checkbox' class='k-checkbox' id='_selectAllEmployees'/><label class='k-checkbox-label' for='_selectAllEmployees'>Select all employees</label><span class='selected-count'></span></div>" +
                          "<div id='treeview'></div>",
                      actions: [
                          { text: 'Cancel'},
                          { text: 'OK', primary: true, action: actionOK }
                      ],
                      initOpen: initOpen,
                      open: dialogOpen,
                      close: dialogClose
                  });

                  $("#pickEmployeesButton").kendoButton({
                      click: openDialog
                  });

                  var serviceRoot = "https://demos.telerik.com/kendo-ui/service";
                  var homogeneous = new kendo.data.HierarchicalDataSource({
                      transport: {
                          read: {
                              url: serviceRoot + "/Employees",
                              dataType: "jsonp"
                          }
                      },
                      schema: {
                          model: {
                              id: "EmployeeId",
                              hasChildren: "HasEmployees"
                          }
                      }
                  });


                  function initOpen(e) {

                    $("#employees-search").on("input", function () {
                      var query = this.value.toLowerCase();
                      var dataSource = $("#treeview").data("kendoTreeView").dataSource;
                      filter(dataSource, query);
                      matchColors(query);
                    });
                  }

    function dialogClose(e) {
      var treeView = $("#treeview").data("kendoTreeView");
      treeView.destroy();
    }

    function dialogOpen(e) {
      $("#treeview").kendoTreeView({
            dataSource: homogeneous,
            dataTextField: "FullName",
            checkboxes: true,
            loadOnDemand: false,
            expandAll: true,
            dataBound: treeViewDataBound,
            check: treeViewCheck
        });

        var treeView = $("#treeview").data("kendoTreeView");
        tempSelectList = getCheckedItems(treeView);

        setTimeout(function () {
            $("#employees-search").focus().select();
        })
    }

    function openDialog(e) {
            $("#dialog").data("kendoDialog").setOptions({
        content: "<div class='k-textbox k-space-right search-wrapper'><input id='employees-search' type='text'  placeholder='Search employees'/><span class='k-icon k-i-search'></span></div>" +
        "<div class='select-all-wrapper'><input data-role='checkbox' onchange='selectAll(this)' type='checkbox' class='k-checkbox' id='_selectAllEmployees'/><label class='k-checkbox-label' for='_selectAllEmployees'>Select all employees</label><span class='selected-count'></span></div>" +
        "<div id='treeview'></div>"
      });

      $("#dialog").data("kendoDialog").open();
    }

Regards,
Ivan Danchev
Progress Telerik

[Varun]

Thanks Ivan.

You made my day.