Zamykanie okna Kendoui z niestandardowym przyciskiem Zamknij w oknie

Question

Używam komponentu okna Kendo UI, który jest podobny do dowolnego modalnego okna dialogowego.

Mam przycisk zamykania w nim, w jaki sposób mogę zamknąć okno po kliknięciu tego przycisku

Zawartość w moim oknem jest ładowany z innego (zamiast klikania domyślny przycisk w pasku tytułowym „X”) widok

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

w tym samym widoku, mam

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

to co mam w głównym widoku (widok wywołanie okna)

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

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

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

Answer 1

Zasadniczo wiesz już, w jaki sposób, aby zamknąć okno - trzeba to zrobić z ścisłej sposobu jego API.

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

Jednak aby dołączyć obsługi przycisku wewnątrz zdania, trzeba czekać aż zawartość jest załadowany - trzeba użyć zdarzenia refresh.

np.

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

Answer 2

nie jest wydarzeniem w kendo UI to powinno być coś takiego

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

Answer 3

w JavaScript - HTML window jest obiektem, który reprezentuje otwarte okno w przeglądarce. Spróbuj zdefiniować swój window jako coś innego.

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

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

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

Answer 4

W przypadku pracy z treści ładowanych przez AJAX, odpowiedzią Petur Subev jest doskonały! Chciałbym podać przykład pracy z szablonami, co jest prostsze (podczas gdy nie wszystkie żądania są podawane przez ajax). Rozważmy poniższy szablon:

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

A teraz przejdźmy załadować szablon e okna rozmowy ścisłą metodę:

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