Kendo Grid - PopUp windows not being removed from the DOM

Question

I have a kendo grid with a custom popup:

columns.Command(commands => 
  {
      commands.Edit();
  }


.Editable(editing => editing.Mode(Kendo.Mvc.UI.GridEditMode.PopUp))

Each time I click the edit button the window pops up but when I close it the window is not removed from the DOM.

I saw this post: http://www.telerik.com/forums/popup-windows-do-not-get-removed-from-dom and Telerik says the issue has been fixed.

What are some things that would cause this behavior?

UPDATED

This grid is nested in a Kendo TabStrip if that helps. Other than that I don't see anything out of the ordinary. The popup is entirely managed by the grid.

UPDATED 2 So I got the un-minimized code for the grid (kendo.grid.min.js, version 2013.3.1119, starting at line 1172), slopped it into my project and modified just the following with the two log statements to verify that destroy is being bound and called:

_destroyEditable: function () {
    var that = this;

    var destroy = function () {
    if (that.editable) {
    //  My edit
        console.log("...destroy() called");
        that._detachModelChange();
        that.editable.destroy();
        that.editable = null;
        that._editContainer = null;
    }
};

if (that.editable) {                
    if (that._editMode() === "popup") {
        //  My edit
        console.log("Binding destroy() to 'deactivate'...");
            that._editContainer.data("kendoWindow").bind("deactivate", destroy).close();
        } else {
            destroy();
        }
    }
},

Each time I click edit and then close the window I see the expected two messages yet the window is not removed. Here is a screenshot of the debugger:

Debugger window

The outlined windows are the dom elements generated.

Closing a window does not remove the DOM, that's the expected behavior for a question of efficiency not having to create it multiple times. The issues is if it gets created multiple times. If you want to remove it (do you really need it?) you should invoke destroy method (but I don't think that you really need it) — OnaBai
I am not creating the window. The grid is creating it when you click the 'Edit' button that gets added next to each row in the grid. Each time I click 'Edit' the window (in reality a new window) pops up. After closing it I can check the debugging tools and see that there is a new window in the DOM. It is not removing the window when it is closed and it is not re-using it on subsequent openings. — Mike Cheel
If so, it would be a bug. But take a look into the following code jsfiddle.net/OnaBai/TgDYx/1 and you will see that the counter of existing windows is either 0 or 1 but never more than that. So it is likely something in your code, something that you are not showing. — OnaBai
That's why I am asking what sort of things could cause this. — Mike Cheel
I would need to see more code. Do you have any preventDefault that would prevent KendoUI from disposing the window? What type of events are you managing? are you getting any error in the browser console? — OnaBai

Mike Cheel Mike Cheel · Accepted Answer · 2014-06-06T19:06:37

After much trial and error and deep diving it turns out this problem has to do with our scripts in our site's layout. At some point whomever setup the kendo scripts put in not only the 'kendo.all.min.js' but right after it 'kendo.web.min.js', 'kendo.aspnetmvc.min.js' and then about 10 individual kendo.*.js including the grid.

After viewing this link:

http://docs.telerik.com/kendo-ui/getting-started/javascript-dependencies

I realized that the site is creating these objects multiple times. Removing the script references in accordance to the link above resolves the issue.

Kendo Grid - PopUp windows not being removed from the DOM

1 Answers