How to prevent kendo ui from displaying more that one grid if a close the popup and open it? - jquery-ui

Question

I've a jquery dialog that contains a Kendo UI Grid.
$("#" + popupElementName).dialog({
modal: true,
open: function () {
//Kendo grid here ...
},
close: function (event, ui) {
$(this).dialog("destroy").remove();
}
});
If I click the X sign to close the dialog then open the popup again, I get 2 Kendo grids. I get as many grid as the number of times I closed and opened the jquery dialog.
After doing some researches, I've found out that I can initialize the dialog by using the command destroy. Unfortunately, it seems not to work. I'm still getting multiple grid.
Some posts have suggested to add remove. However, the problem with using remove is that the dialog doesn't work anymore because there is no more the div that's converted in dialog.

Answer 1

You should not initialize the grids on every open event.
var grid= $("#grid").data("kendoGrid");
if (!grid) {
//initalize if not already initialized
}
If not u should destroy kendo grids and clear the window on close and re-initialize the grids on every open
open: function () {
//Kendo grid here ...
},
close: function (event, ui) {
$("#grid").data("kendoGrid").destroy();
$(this).empty();
}