Kendo Window not opening again once it is destroyed

Question

I have a situation where I need to destroy kendo window once my job is complete. Kendo window opens up on a button click and destroys when its job is complete.

But now I have a problem that I cannot open the window again on that button click once it is destroyed.

My Kendo Window code is :

        var Snapshotwindow = $('#newWindow');
        Snapshotwindow.kendoWindow({
            width: "500px",
            height: "267px",
            resizable: false,
            sortable: false,
            modal: true,
            draggable: false,
            title: "New Window",
            visible: false,
            appendTo: "#AppBody",
        });
        Snapshotwindow.data("kendoWindow").center().open();

How can I achieve it?

Can I re initialize the window once it is destroyed?

Answer 1

When a kendo Window widget is destroyed, it removes it's HTML elements from the DOM including the root element from which it was created. This is why you are unable to open the window a second time. This leaves you with two basic approaches when using the Window widget:

1. Create the widget first time around, holding a reference to it. Don't destroy on close, and re-open subsequent times using the reference.

   if (Snapshotwindow == null) {
       Snapshotwindow = $('#newWindow').kendoWindow({
           width: "500px",
           height: "267px",
           resizable: false,
           sortable: false,
           modal: true,
           draggable: false,
           title: "New Window",
           visible: false,
           appendTo: "#AppBody",
       }).data("kendoWindow");
   }
   Snapshotwindow.center().open();
   

2. Append a new element to the DOM, turning that into a window widget before showing it. Can be safely destroyed, and the process subsequently repeated as many times as you like.

   <script id="modal-editor-window" type="text/x-kendo-template">
       <!-- your window content here -->
   </script>
   
   <script type="text/javascript">
       var options = {
           title: "Edit",
           modal: true,
           visible: false,
           deactivate: function () {
               this.destroy();
           }
       };
   
       var mew = $.parseHTML($("#modal-editor-window").html().trim());
       $("body").append(mew);
   
       var mw = $(mew).kendoWindow(options).data("kendoWindow");
       mw.center().open();
   </script>
   

Since you say you need to destroy the window, option 2 is the way to go; I would suggest that loading the new DOM element is probably easiest to achieve by using a kendo template (as shown above).