Chiusura di una finestra di kendoui con pulsante Chiudi personalizzato all'interno della finestra

Question

Uso il componente finestra di Kendo UI, che è simile a qualsiasi finestra di dialogo modale.

Ho un pulsante di chiusura in esso, come faccio a chiudere la finestra su clic su tale pulsante

Il contenuto nella mia finestra viene caricato da un altro (invece di cliccare il default pulsante nella barra del titolo 'X') vista

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

in quella stessa vista, ho

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

Questo è quello che ho in mio punto di vista principale (la vista chiamando la finestra)

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

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

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

Answer 1

Fondamentalmente voi già sanno come chiudere la finestra - è necessario farlo con la stretta metodo sue API .

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

Ma al fine di collegare il gestore per il pulsante all'interno della vista è necessario attendere fino a quando il contenuto viene caricato - è necessario utilizzare l'evento refresh.

ad es.

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

Answer 2

c'è un evento in ui kendo per questo dovrebbe essere qualcosa di simile

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

Answer 3

In JavaScript - HTML window è un oggetto che rappresenta una finestra aperta in un browser. Prova a definire il tuo window come qualcos'altro.

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

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

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

Answer 4

In caso di lavorare con i contenuti caricati da ajax, la risposta del Petur Subev è perfetto! Mi piacerebbe dare un esempio di lavoro con i template, che è più semplice (mentre non tutte le richieste possono essere fatte da ajax). Si consideri il modello di seguito:

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

E ora, Mettiamoci caricare la finestra della chiamata modello di posta 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(); 
}