This is a migrated thread and some comments may be shown as answers.

Calendar markup remnants

3 Answers 114 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Brett
Top achievements
Rank 2
Brett asked on 19 Nov 2012, 06:52 PM
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?

3 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 21 Nov 2012, 01:23 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Brett
Top achievements
Rank 2
answered on 03 Dec 2012, 05:04 PM
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>
0
Accepted
Georgi Krustev
Telerik team
answered on 04 Dec 2012, 03:44 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Calendar
Asked by
Brett
Top achievements
Rank 2
Answers by
Georgi Krustev
Telerik team
Brett
Top achievements
Rank 2
Share this question
or