ウィンドウ内のカスタムクローズボタンを使用してケンドイウィンドウを閉じる

Question

私は剣道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(); 
    }); 
}); 

Answer 1

基本的にはすでにウィンドウを閉じるする方法を知っている - あなたは、そのAPIの近い方法でそれを行う必要があります。

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

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

AJAXによってロードされたコンテンツでの作業の場合は

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

Answer 2

このため剣道UIのイベントは、このJavaScriptで

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

Answer 3

のようなものである必要がありあり - 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(); 
    }); 
}); 

Answer 4

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

そして今を、let'sテンプレートEの通話ウィンドウcloseメソッドロード：

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