Đóng cửa sổ kendoui bằng nút Đóng tùy chỉnh trong cửa sổ

Question

Tôi đang sử dụng thành phần cửa sổ giao diện người dùng của Kendo, tương tự như bất kỳ hộp thoại phương thức nào.

Tôi có một nút đóng ở đó, làm thế nào để đóng cửa sổ khi nhấn nút đó (thay vì nhấn vào mặc định 'x' nút trên thanh tiêu đề)

Nội dung trong cửa sổ của tôi được nạp từ một xem

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

Theo quan điểm rằng cùng, tôi có

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

Đây là những gì tôi có trong giao diện chính của tôi (quan điểm gọi cửa sổ)

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

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

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

Answer 1

Về cơ bản bạn đã biết làm thế nào để đóng cửa sổ - bạn cần phải làm điều đó với các gần phương pháp API của nó.

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

Nhưng để đính kèm xử lý vào nút bên trong xem bạn cần phải chờ đợi cho đến khi nội dung được nạp - bạn cần phải sử dụng các sự kiện refresh.

ví dụ:

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

Answer 2

có một sự kiện trong ui kendo cho điều này cần một cái gì đó như thế này

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

Answer 3

Trong JavaScript - HTML window là một đối tượng đại diện cho một cửa sổ đang mở trong trình duyệt. Hãy thử xác định window của bạn như một thứ khác.

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

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

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

Answer 4

Trong trường hợp làm việc với nội dung được tải bởi ajax, câu trả lời của Petur Subev là hoàn hảo! Tôi muốn đưa ra một ví dụ làm việc với các mẫu, đó là đơn giản hơn (trong khi không phải tất cả các yêu cầu shoulb được ajax). Hãy xem xét các mẫu dưới đây:

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

Và bây giờ, chúng ta hãy tải các mẫu e cửa sổ cuộc gọi phương pháp chặt chẽ:

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