web-dev-qa-db-ja.com

ウィンドウ内のカスタム閉じるボタンで剣道のウィンドウを閉じる

私は、あらゆるモーダルダイアログに似た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#javascriptasp.net-mvcmodal-dialogkendo-ui
24
Null Reference

基本的に、ウィンドウを閉じる方法はすでにわかっています。APIのcloseメソッドを使用してウィンドウを閉じる必要があります。

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

ただし、ビュー内のボタンにハンドラーをアタッチするには、コンテンツがロードされるまで待つ必要があります。 refresh イベントを使用する必要があります。

e.g。

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

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

剣道uiにはこのようなイベントがあるはずです。

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

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();
}
0
Vinícius Rosa