Modal window animation

[A. Drost]

Hello,

I am currently experiencing a problem with the animation of a modal window.

<div id="remove-window" class="window">

    <p>Wilt u  het geselecteerde item  verwijderen?</p>

    <button onclick="bsv.edf.web.client.grid.remove_confirm('/Service/PersonService.svc/json/Delete',bsv.edf.web.client.grid.removed)" class="k-button">Ja</button>

    <button onclick="bsv.edf.web.client.grid.remove_cancel()" class="k-button">Nee</button>

</div>

This is the window

// user wants to remove a select item

pub.remove = function () {

    var Object = bsv.edf.web.client.grid.getSelectedItem();

    if (Object != null) {

        $("#remove-window").kendoWindow({ resizable: false, title: "Item verwijderen", modal: true, actions: ["Close"] });

        var window = $("#remove-window").data("kendoWindow");

        window.center();

        window.open();

    }

};

 

// user wants to cancel the remove

pub.remove_cancel = function () {

    var window = $("#remove-window").data("kendoWindow");

    window.close();

};

the pub.remove is called when i want to delete an item
and the pub.remove_cancel is called when we cancel the remove
the remove_cancel is actualy behaving correctly the problem lies with the Close button in the top-right corner
When i press the Close button the window closes correctly with the correct animation but when i then open the window again with the pub.remove function the start gray-out animation doesn't display.

[Alex Gyoshev]

Please try the following code for your remove method:

pub.remove = function () {
    var Object = bsv.edf.web.client.grid.getSelectedItem();
    if (Object != null) {
        var window = $("#remove-window").data("kendoWindow"); 
        if (!window.data("kendoWindow") {
            window  = $("#remove-window").kendoWindow({
                resizable: false,
                title: "Item verwijderen",
                modal: true,
                actions: ["Close"]
            });
        }

        window.center().open();
    }
};

It will prevent the window from initializing twice, and should resolve the problem with the animation. Here is the jsFiddle that was used for testing.

Kind regards,
Alex Gyoshev
the Telerik team

[A. Drost]

Thanks for the solution it fixed the problem