使用窗口内自定义关闭按钮关闭Kendo UI窗口

Question

我正在使用Kendo UI的窗口组件，它类似于任何模态对话框。

我在其中有一个关闭按钮，如何在单击该按钮时关闭窗口（而不是单击标题栏中的默认“x”按钮）

我的窗口中的内容从另一个视图加载

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

在同一个视图中，我有

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

这是我在主视图中拥有的内容（调用窗口的视图）

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

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

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

- Null Reference

Answer 1

基本上，您已经知道如何关闭窗口 - 您需要使用其API的close方法来执行此操作。

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

但是为了将处理程序附加到视图内部的按钮，您需要等待内容加载完成 - 您需要使用refresh事件。

例如：

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

- Petur Subev

---

太好了，解释得非常清楚，正是我所需要的！ - Null Reference

这段代码应该放在哪里？是放在主视图的on ready函数中吗？我尝试过了，但是$('#theWindowId').data().kendoWindow是未定义的（$('#theWindowId').data()已定义，但不包含kendoWindow）。 - crichavin

你需要在窗口初始化后执行它。或者，当配置窗口时，可以最初指定刷新处理程序，就像这里使用的一样http://demos.kendoui.com/web/window/events.html - Petur Subev

Answer 2

在 JavaScript - HTML 中，window 是代表浏览器中打开的窗口的对象。尝试将你的 window 定义为其他内容。

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

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

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

- OnaBai

Answer 3

在Kendo UI中有一个事件，它应该是这样的：

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

- COLD TOLD

---

那不起作用是因为加载在我的窗口中的内容属于另一个视图。我有一个在另一个视图中的按钮，它的ID是“Close”。 - Null Reference

哦，你是指来自另一个视图的窗口中的按钮。 - COLD TOLD

还有其他人有什么想法吗？ - Null Reference

Answer 4

如果涉及到使用ajax加载的内容，Petur Subev的答案是完美的！我想给出一个更简单的模板示例（虽然不是所有请求都应该通过ajax）。 考虑下面的模板：

<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>

现在，让我们加载模板并调用窗口关闭方法：

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

- Vinícius Rosa

---

那么 close 方法在哪里呢？ - LarryBud