C# 使用窗口内的自定义关闭按钮关闭 kendoui 窗口

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/13354355/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-10 08:17:51  来源:igfitidea点击:

Closing a kendoui window with custom Close button within the window

c#javascriptasp.net-mvcmodal-dialogkendo-ui

提问by Null Reference

I'm using Kendo UI's window component, which is similar to any modal dialog.

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

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)

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

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

采纳答案by Petur Subev

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

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

$("#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 refreshevent.

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

e.g.

例如

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

回答by COLD TOLD

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

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

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

回答by OnaBai

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

在 JavaScript 中 - HTMLwindow是表示浏览器中打开的窗口的对象。尝试将您定义window为其他东西。

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

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

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

回答by Vinícius Rosa

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:

在处理由 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>

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

现在,让我们加载模板 e 调用窗口关闭方法:

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