it-swarm.com.de

Schließen eines Kendoui-Fensters mit der benutzerdefinierten Schaltfläche Schließen im Fenster

Ich verwende die Fensterkomponente von Kendo UI, die jedem modalen Dialog ähnlich ist.

Ich habe eine Schaltfläche zum Schließen, wie schließe ich das Fenster, wenn Sie auf diese Schaltfläche klicken (statt auf die Standardschaltfläche "x" in der Titelleiste).

Der Inhalt in meinem Fenster wird aus einer anderen Ansicht geladen 

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

In derselben Ansicht habe ich

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

Das ist, was ich in meiner Hauptansicht habe (die Ansicht, die das Fenster aufruft)

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

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

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

Grundsätzlich wissen Sie bereits, wie Sie das Fenster schließen - Sie müssen es mit der close -Methode seiner API tun.

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

Um den Handler mit der Schaltfläche in der Ansicht zu verbinden, müssen Sie jedoch warten, bis der Inhalt geladen ist. Sie müssen das Ereignis refresh verwenden. 

z.B.

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

In JavaScript - HTML ist window ein Objekt, das ein geöffnetes Fenster in einem Browser darstellt. Versuchen Sie, Ihre window als etwas anderes zu definieren.

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

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

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

es gibt eine Veranstaltung in Kendo Ui für diese sollte es so etwas sein 

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

Wenn Sie mit von ajax geladenen Inhalten arbeiten, ist die Antwort von Petur Subev perfekt! Ich möchte ein Beispiel für die Arbeit mit Vorlagen geben, das einfacher ist (wobei nicht alle Anforderungen von ajax sein sollen).

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

Und jetzt laden wir die Schablonen-Methode zum Laden des Templates:

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