Closing A Kendoui Window With Custom Close Button Within The Window

I'm using Kendo UI's window component, which is similar to any modal dialog. I have a close button in it, how do I close the window upon clicking that button (instead of clicking t

Solution 1:

Basically you already know how to close the window - you need to do it with the close method of its API.

$("#window").data("kendoWindow").close();

But in order to attach the handler to the button inside of the view you need to wait until the content is loaded - you need to use the refresh event.

e.g.

$('#theWindowId').data().kendoWindow.bind('refresh',function(e){
    var win = this;
    $('#close').click(function(){
         win.close();
    })
})

Solution 2:

In JavaScript - HTML window is an object that represents an open window in a browser. Try defining your window as something else.

$(document).ready(function () {
    var wnd = $("#window").data("kendoWindow");

    $("#open").click(function (e) {
        wnd.center();
        wnd.open();
    });

    $("#close").click(function(e) {
        wnd.close();
    });
});

Solution 3:

there is an event in kendo ui for this it should be something like this

 $("#idofyourbutton").click(function () {
     $("#window").data("kendoWindow").close();
    });

Solution 4:

In case of working with content loaded by ajax, the Petur Subev's answer is perfect! I´d like to give an example working with templates, that is more simple (whereas not all requests shoulb be by ajax). Consider the template below:

<scriptid="Template_Example1"type="text/kendo-tmpl"><divclass="i-contentWindow"><div><aid="btn1"href="\#"><spanclass="k-icon k-i-cancel"></span>Button 1</a></div></div>

And now, let´s load the template e call window close method:

functionExampleFn1(dataItem) {
    //create the templatevar template = kendo.template($("#Template_Example1").html());

    //create a kendo window to load contentvar kWindow = openKendoWindow({
        title: "Window Tests",
        iframe: false,
        resizable: false
    }).content(template(dataItem));

    // call window close from button inside template
    $("#btn1").click(function (e) {
        e.preventDefault();
        alert("btn1 on click!");
    });

    kWindow.open();
}