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

score 32 · Accepted Answer · edited Sep 14 '15 at 11:53

32

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

edited Sep 14 '15 at 11:53

Manuel Reis

574
8
29

answered Nov 13 '12 at 21:18

Petur Subev

19,983
3
52
68

Great, nice explanation, and it's exactly what I'm looking for! – Null Reference Nov 14 '12 at 14:52
2

Where does this code go? In the on ready function of the Main view? I tried that, but $('#theWindowId').data().kendoWindow is undefined ($('#theWindowId').data() is defined, but doesn't contain kendoWindow) – crichavin Apr 23 '13 at 16:05
1

You need to do it after the Window is initialized. Or you can specify the refresh handler initially when configuring the Window, like used here http://demos.kendoui.com/web/window/events.html – Petur Subev Apr 23 '13 at 16:14

OnaBai · Answer 2 · 2012-11-13T15:12:36.770

1

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

edited Nov 13 '12 at 15:12

answered Nov 13 '12 at 11:19

OnaBai

40,767
6
96
125

COLD TOLD · Answer 3 · 2012-11-13T01:38:50.067

0

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

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

edited Nov 13 '12 at 01:38

answered Nov 13 '12 at 01:33

COLD TOLD

13,513
3
35
52

That didn't work because the content loaded in my window belongs to that of another view. I have a button in my other view that has an id of "Close" – Null Reference Nov 13 '12 at 01:40
ohh you mean the the buuton that in the window coming from another view – COLD TOLD Nov 13 '12 at 01:42
Anyone else has any other idea? – Null Reference Nov 13 '12 at 09:25

score 0 · Answer 4 · edited Mar 19 '16 at 13:13

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:

<script id="Template_Example1" type="text/kendo-tmpl">
<div class="i-contentWindow">
    <div>
        <a id="btn1" href="\#"><span class="k-icon k-i-cancel"></span>Button 1</a>
    </div>
</div>

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

function ExampleFn1(dataItem) {
    //create the template
    var template = kendo.template($("#Template_Example1").html());

    //create a kendo window to load content
    var 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();
}

So where is the close method? – LarryBud Oct 08 '19 at 13:45 — LarryBud, Oct 08 '19 at 13:45

Closing a kendoui window with custom Close button within the window

4 Answers4

Linked