CODEWITHSUNDEEP
javascriptkendo-uipopup
kpg
kpg

Reputation: 661

how to reuse kendo ui popup window in different locations

I want to use a the same kendo ui popup in several places. I first tried to change the anchor element at run-time, this is either not allowed or I am doing it incorrectly. Assuming it is not allowed (which makes sense) my next attempt was to create the window when I needed it then destroy it, then re-create it again later in a different place. But when the destroy method is called the widget is entirely removed from the DOM so attempts to re-create it fail.

While I understand I'm asking for more than perhaps the popup was designed for is there any way to reuse the popup in different locations?

My brute force solution would be to have n number of identical popups...ugh.

Attempt 1:

$("#popup").kendoPopup({
    anchor: $("#tc1")
});
$("#popup").data("kendoPopup").open();
$("#popup").data("kendoPopup").close();
...
//not sure if this is possible or how to do it
$("#popup").data("kendoPopup").anchor("#tc2");

Attempt 2: 

$("#popup").kendoPopup({
    anchor: $("#tc1")
});
$("#popup").data("kendoPopup").open();
$("#popup").data("kendoPopup").close();
$("#popup").data("kendoPopup").destroy();
...
//this fails
$("#popup").kendoPopup({
    anchor: $("#tc2")
});

Upvotes: 2

Views: 1023

Answers (1)

DontVoteMeDown
DontVoteMeDown

Reputation: 21465

In years dealing with Kendo UI, a well learned lesson for me was: wrap everything you can. So I suggest you to always create a wrapper function or widget of your own.

This is a simple example of how you can achieve what you want with a wrapper function:

var showPopup = function($popupEl, $anchorEl) {
    var popupOptions = {
        anchor: $anchorEl,
        origin: "bottom right",
        position: "bottom right",
        collision: "fit"
    };

    if (!$popupEl.hasClass("k-popup")) {
        $popupEl.kendoPopup(popupOptions);
    } else {
        $popupEl.data("kendoPopup").setOptions(popupOptions);
    }

    $popupEl.data("kendoPopup").open();
};

With that function you can call it whenever and wherever you want:

showPopup($("#popup"), $("#tc1"));

Demo

Upvotes: 1

Related Questions