web-dev-qa-db-fra.com

Fermer une fenêtre kendoui avec un bouton de fermeture personnalisé dans la fenêtre

J'utilise le composant window de Kendo UI, qui est similaire à n'importe quel dialogue modal.

J'ai un bouton de fermeture dedans, comment fermer la fenêtre en cliquant dessus (au lieu de cliquer sur le bouton 'x' par défaut dans la barre de titre)

Le contenu de ma fenêtre est chargé depuis une autre vue 

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

Dans cette même vue, j'ai

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

Voici ce que j'ai dans ma vue principale (la vue qui appelle la fenêtre)

$(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
23
Null Reference

En gros, vous savez déjà comment fermer la fenêtre. Vous devez le faire avec la méthode close de son API.

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

Mais pour attacher le gestionnaire au bouton à l'intérieur de la vue, vous devez attendre que le contenu soit chargé - vous devez utiliser l'événement refresh . 

par exemple.

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

En JavaScript - HTML window est un objet qui représente une fenêtre ouverte dans un navigateur. Essayez de définir votre window comme autre chose.

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

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

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

il y a un événement dans kendo ui pour cela, il devrait être quelque chose comme ça 

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

En cas d'utilisation de contenu chargé par ajax, la réponse de Petur Subev est parfaite! J'aimerais donner un exemple d'utilisation de modèles, c'est plus simple (alors que toutes les demandes ne doivent pas nécessairement être ajax) . Considérez le modèle ci-dessous:

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

Et maintenant, chargeons la méthode de fermeture du modèle et de la fenêtre d’appel:

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