如何在kendo UI中創建確認彈出窗口？

Question

我有確認彈出式jQuery UI代碼。

if (confirm('Are you sure you want to delete the batchjob:' + 
dataItem["Name"])) { 
      $.get("@Url.Content("~/BatchJob/DeleteBatchJob")", { batchJobDetailId: parseInt(dataItem["BatchJobDetailId"]) }, function (data) { 
       if (data) { 
        debugger 
        var batchJobValidateWnd = $("#ValidateBatchJobStatus").data("kendoWindow"); 
        batchJobValidateWnd.content("BatchJob deleted successfully."); 
        batchJobValidateWnd.center().open(); 
        $.post("@Url.Content("~/BatchJob/SearchBatchJobDetailByParams")", { jobName: $("#Name").val(), startDate: $("#ScheduleStartDate").val() }, function (data) { 

        }); 
       } 
       else { 
        debugger 
        window.location = '@Url.Content("~/BatchJob/Create")/' + parseInt(dataItem["BatchJobDetailId"]); 
       } 
      }); 
     } 

我需要劍道確認彈出？我該如何更改jQuery的確認彈出窗口劍道確認彈出

Answer 1

您可以創建通過一個承諾一個劍道確認對話框，如果確認你會與執行相同的方式一個jQuery對話框。

該對話框本身應該使用External Template創建，該External Template將在buttonDisplayDialogclick事件上呈現，該事件將在繼續之前等待響應。

<script id="confirmationTemplate" type="text/x-kendo-template"> 

<div class="popupMessage"></div> 
    </br> 
<hr/> 
<div class="dialog_buttons"> 
    <input type="button" class="confirm_yes k-button" value="Yes" style="width: 70px" /> 
    &nbsp; 
    <input type="button" class="confirm_no k-button" value="No" style="width: 70px" /> 
    </div> 

</script> 

基於用戶是否點擊「是」或「否」將返回result作爲true或false值是你應該把你的代碼的其餘部分：

$("#buttonDisplayDialog").kendoButton({ 
     click: function(e) { 
     $.when(showConfirmationWindow('Are you sure you want to delete the batchjob:')).then(function(confirmed){ 

      if(confirmed){ 
      alert('This is where you will put confirmation code'); 
      } 
      else{ 
      alert('User clicked no'); 
      } 
     }); 
     }  
    }); 
    }); 

function showConfirmationWindow(message) { 
    return showWindow('#confirmationTemplate', message) 
    }; 

    function showWindow(template, message) { 

    var dfd = new jQuery.Deferred(); 
    var result = false; 

    $("<div id='popupWindow'></div>") 
    .appendTo("body") 
    .kendoWindow({ 
     width: "200px", 
     modal: true, 
     title: "", 
     modal: true, 
     visible: false, 
     close: function (e) { 
     this.destroy(); 
     dfd.resolve(result); 
     } 
    }).data('kendoWindow').content($(template).html()).center().open(); 

    $('.popupMessage').html(message); 

    $('#popupWindow .confirm_yes').val('OK'); 
    $('#popupWindow .confirm_no').val('Cancel'); 

    $('#popupWindow .confirm_no').click(function() { 
     $('#popupWindow').data('kendoWindow').close(); 
    }); 

    $('#popupWindow .confirm_yes').click(function() { 
     result = true; 
     $('#popupWindow').data('kendoWindow').close(); 
    }); 

    return dfd.promise(); 
    }; 

這裏一個Dojo example來演示上述代碼的行動。