Calendar markup remnants

4 posts, 1 answers
  1. Brett
    Brett avatar
    25 posts
    Member since:
    Sep 2012

    Posted 19 Nov 2012 Link to this post

    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?
  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 21 Nov 2012 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Brett
    Brett avatar
    25 posts
    Member since:
    Sep 2012

    Posted 03 Dec 2012 Link to this post

    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>
  5. Answer
    Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 04 Dec 2012 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready