New to Kendo UI for jQuery? Download free 30-day trial

Create Confirmation Dialog by Using Promises

Environment

Product Progress Kendo UI Window for jQuery
Operating System Windows 10 64bit
Visual Studio version Visual Studio 2017
Preferred Language JavaScript

Description

How can I create a confirmation dialog in a Kendo UI Window by using Promises for deferred execution?

Solution

The example below demonstrates how to achieve the desired scenario.

    <script id="confirmationTemplate" type="text/x-kendo-template">
    <div class="popupMessage"></div>
      </br>
    <hr/>
    <div class="dialog_buttons">
        <input type="button" class="confirm_yes" value="Yes" style="width: 70px" />
        &nbsp;
        <input type="button" class="confirm_no" value="No" style="width: 70px" />
      </div>
    </script>
    <script>
      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();
        $(".confirm_yes").kendoButton();
        $(".confirm_no").kendoButton();
        $('.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();
      };
      $.when(showConfirmationWindow('Are you sure?')).then(function(confirmed){
        if(confirmed){
          alert('OK');
        }
        else{
          alert('Cancel');
        }
      });
    </script>

See Also

In this article