Question

There is a problem when I put Kendo Dropdown List info Fancybox – Popup.
For detail:
I have page A :this page contains Kendo Dropdown list (with id = #myDropdown).
I have page B : I put my Fancybox caller here- I mean I use Fancybox to load page A (by ajax)

Everything look well , but I got a problem here:
You know, when I initialize a Dropdown List, Kendo-UI will create an “anchor” Tag for UI-effect purpose.
Ex:
DropdownList has id = #myDropdown
Kendo will create one more Tag with id = #myDropdown-list.

After closing the Fancybox-popup , The “#myDropdown” was removed from DOM, but “#myDropdown-list”. It still on the DOM overtime, and it willing to be double after I call the popup again(ofcourse if dont refresh current page).

And The Kendo-DateTimePicker as the same too.

p/s: and so sorry about by english if it was too bad :D. I hope you get my question.

im going to put my “popup” in iframe.But I dont know if it is good when using iframe in this case…

Answer 1

Using IFrame or not is not the cause of the error. I tried with a container and without it to load the fancybox via ajax, but it didn’t make a difference.

What I found is sort of a hack, however it solves the problem. Let’s suppose we have a code which creates the popup and the popup’s content is located in the href ‘popupFrame’:

$.fancybox({
    'href': 'popupFrame',
    'type': 'ajax',
    beforeClose: removeKendoHelpers
});

The other part is the function which is called before closing the popup:

function removeKendoHelpers() {
    $("#myDropdown-list").remove();
}

Of course you can create the removeKendoHelpers as an inline function and if there are more parts to remove then put that code into the removeKendoHelpers function as well.

One interesting remark: in the fancybox API onCleanup and onClosed are listed as options but they do not work, instead use beforeClose or afterClose.

UPDATE:

Actually a lot of problem is solved with calling the kendo widget’s destroy() method. It solves the removing problems for the widgets except for one of the three helper divs of the DateTimePicker, so the close looks like the following:

function removeKendoHelpers() {
    $("#myDropdown-list").data("kendoDropDownList").destroy();
    $("#datetimepicker").data("kendoDateTimePicker").destroy();
}

And to resolve the date time picker’s actual problem which is I think a bug in the kendop framework (I will report this and hopefully get some feedback) the last function only needs to be extended with:

$(".k-widget.k-calendar").remove();

OTHER solution:

This one is more crude but works like a charm for me even if the page has multiple kendo controls and even if you open another fancybox from your fancybox.

Wrap the fancybox creation in a function, like:

function openFancyBox() {
    $("body").append("<div class='fancybox-marker'></div>");

    $.fancybox({
        'href': 'popupFrame',
        'type': 'ajax',
        beforeClose: removeKendoHelpers
    });
}

This will create a new div at the very end of the body tag, and the function at the closing of the fancybox uses this:

function removeKendoHelpers() {
    $(".fancybox-marker").last().nextAll().remove();
    $(".fancybox-marker").last().remove();
}

I hope these solves all your problem!