使用窗口内的自定义关闭按钮关闭 kendoui 窗口答案

【问题标题】：Closing a kendoui window with custom Close button within the window使用窗口内的自定义关闭按钮关闭 kendoui 窗口
【发布时间】：2012-11-01 12:06:58
【问题描述】：

我正在使用 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();
    });
});

【问题讨论】：

标签： c# javascript asp.net-mvc modal-dialog kendo-ui

【解决方案1】：

基本上您已经知道如何关闭窗口 - 您需要使用其 API 的 close 方法来完成。

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

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

例如

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

【讨论】：

很好，很好的解释，这正是我要找的！
这段代码去哪儿了？在主视图的准备就绪功能中？我试过了，但 $('#theWindowId').data().kendoWindow 未定义（$('#theWindowId').data() 已定义，但不包含 kendoWindow）
需要在Window初始化后进行。或者您可以在配置 Window 时指定刷新处理程序，就像这里使用的 demos.kendoui.com/web/window/events.html

【解决方案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();
    });
});

【讨论】：

【解决方案3】：

在 kendo ui 中有一个事件，它应该是这样的

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

【讨论】：

这不起作用，因为我的窗口中加载的内容属于另一个视图的内容。我在另一个视图中有一个按钮，其 id 为“关闭”
哦，你的意思是窗口中的按钮来自另一个视图
还有人有其他想法吗？

【解决方案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();
}

【讨论】：

那么close方法在哪里呢？