2012-11-13 137 views
22

我正在使用Kendo UI的窗口組件,它類似於任何模式對話框。在窗口內用自定義關閉按鈕關閉kendoui窗口

我有它的關閉按鈕,我怎麼在點擊該按鈕關閉該窗口(而不是單擊默認的「X」在標題欄按鈕)

在我的窗口中的內容是從另一個裝鑑於

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

在同一觀,我有

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

這是我在我的主視圖(視圖調用窗口)

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

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

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

回答

27

基本上你已經知道如何關閉窗口 - 你需要它的API的接近的方法來做到這一點。

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

但爲了處理程序附加到按鈕,你需要等到內容加載視圖裏面 - 你需要使用refresh事件。

例如

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

好的,很好的解釋,這正是我要找的! –

+2

這段代碼去哪裏?在主視圖的準備就緒功能中?我試過,但$('#theWindowId')。data()。kendoWindow是未定義的($('#theWindowId')。data()已定義,但不包含kendoWindow) –

+1

您需要在窗口被初始化。或者,您可以在配置窗口時最初指定刷新處理程序,如http://medos.kendoui.c​​om/web/window/events.html –

0

有劍道UI事件這應該是這樣的

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

,因爲內容在我的窗口中加載這並不工作屬於另一種觀點。 我在另一個視圖中有一個按鈕,其ID爲「關閉」 –

+0

ohh您的意思是在窗口來自另一個視圖的buuton –

+0

是的,我編輯了我的主帖 –

1

在JavaScript - HTML window是表示在瀏覽器中打開的窗口中的對象。嘗試將您的window定義爲別的。

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

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

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

在與AJAX加載內容的工作情況下,Petur Subev的答案是完美的!我想給一個使用模板的例子,這更簡單(但並非所有的請求都是由ajax提供)。 考慮下面的模板:

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

而現在,let's加載模板E,呼叫窗口關閉方法:

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