Closing a kendoui window with custom Close button within the window

Question

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 the default 'x' button in the title bar)

The content in my window is loaded from another view

@(Html.Kendo().Window()            .Name("window")            .Title("Role")            .Content("loading...")            .LoadContentFrom("Create", "RolesPermissions", Model.Role)            .Modal(true)            .Width(550)                       .Height(300)                       .Draggable()            .Visible(false)           ) 

In that same view, I have

<span id="close" class="btn btn-inverse">Cancel</span> 

This is what I have in my main view (the view calling the window)

$(document).ready(function () {     var window = $("#window").data("kendoWindow");      $("#open").click(function (e) {         window.center();         window.open();     });      $("#close").click(function(e) {         window.close();     }); }); 

Answer 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();     }) })