विंडो के अंदर कस्टम बंद बटन के साथ एक केंडोउ विंडो बंद करना

Question

मैं केंडो यूआई के विंडो घटक का उपयोग कर रहा हूं, जो कि किसी भी मोडल संवाद के समान है।

मैं इसमें कोई समाप्त करें बटन, कैसे मुझे लगता है कि बटन पर क्लिक करने पर विंडो को बंद करते हैं (क्लिक करने के बजाय डिफ़ॉल्ट 'एक्स' शीर्षक पट्टी में बटन)

मेरी विंडो में सामग्री दूसरे से भरी हुई है दृश्य

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

Answer 1

मूल रूप से आप पहले से ही पता है कि विंडो को बंद करने के लिए - आप पास अपने एपीआई के विधि के साथ यह करने के लिए की जरूरत है।

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

लेकिन आदेश दृश्य आपको सामग्री भरी हुई है जब तक प्रतीक्षा करने की आवश्यकता के अंदर बटन को हैंडलर संलग्न करने में - आप refresh घटना का उपयोग करने की जरूरत है।

उदा।

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

Answer 2

इसके लिए केन्डो ui में एक घटना है यह इस

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

Answer 3

जावास्क्रिप्ट में की तरह कुछ होना चाहिए - एचटीएमएल window एक वस्तु है कि एक ब्राउज़र में एक खुली खिड़की का प्रतिनिधित्व करता है। अपने window को कुछ और के रूप में परिभाषित करने का प्रयास करें।

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

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

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

Answer 4

ajax द्वारा लोड सामग्री के साथ काम करने के मामले में, Petur Subev के जवाब एकदम सही है! मैं टेम्पलेट्स के साथ काम करने का एक उदाहरण देना चाहता हूं, यह अधिक सरल है (जबकि सभी अनुरोध shoulb 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> 

और अब, चलो टेम्पलेट ई कॉल विंडो पास विधि लोड:

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