Calendar markup remnants

[Brett]

I have a Kendo UI Window which is dynamically added to the DOM and its content contains a Kendo UI Calendar control. Now, I do call the destroy() method of the Window when it is closed, so, I expect all dependent events and markup to be removed from the document. However, when viewing the HTML elements within the Chrome developer tools, I see this markup being added each time the Window is dynamically added.

<div class="k-calendar-container k-popup k-group k-reset" data-role="popup" style="display: none; position: absolute;"></div>

Then, when I close the Window (and destroy() being subsequently called), this markup is not being removed from the DOM as I would expect. Is this behavior a bug or working as intended?

[Georgi Krustev]

Hello Brett,

 
The Window's destroy method will remove the its HTML elements from the DOM. The Calendar's destroy method on the other hand will not. Here is a jsBin demo, which show that the window widget correctly removes its elements from the document.body.

Kind regards,
Georgi Krustev
the Telerik team

[Brett]

What if the calendar is added via a template, and this template is set as the content of the Window?

var details = $('<div id="details"></div>')

      .appendTo(document.body)

      .kendoWindow({

        title: 'Standard Form Details',

        modal: true,

        resizable: false,

        width: 840,

        visible: false,

        content: {

          template:

            kendo.template($('#standardFormDetailTemplate').html())

        },

        close: function () {

          details.destroy();

        }

      });

<script id="standardFormDetailTemplate" type="text/x-kendo-template">

<div id="member">

  <table class="hn-table">

    <tr>

      <th>PAO Unit</th>

      <th>PAO Post/Base</th>

      <th>Event</th>

      <th>Event Date</th>

    </tr>

    <tr>

      <td><input name="PaoUnit" class="k-textbox" data-bind="value: PaoUnit" /></td>

      <td><input name="PaoPost" class="k-textbox" data-bind="value: PaoPost" /></td>

      <td><input name="Event" class="k-textbox" data-bind="value: Event" /></td>

      <td><input name="EventDate" data-bind="value: EventDate" data-role="datepicker" /></td>

    </tr>

    <tr>

      <th colspan="4">Comments</th>

    </tr>

    <tr>

      <td colspan="4">
          <textarea name="Comments" class="k-textbox" data-bind="value: Comments" rows="2"></textarea>
        </td>

    </tr>

  </table>

</script>

[Georgi Krustev]

Hello Brett,

 
If the end user nevers open a datepicker, then the calendar will not be removed. We addressed this issue in the latest internal build. I will suggest you check it and give it a try. I updated your Telerik points because the find.

Regards,
Georgi Krustev
the Telerik team