Edit this page

Customize the Predefined Dialogs

Depending on your project, you might need to open alert, prompt, and confirmation Kendo UI Dialogs.

The easiest way to achieve this behavior is to use the dedicated methods which are exposed through the Kendo UI API. However, this configuration enables you to change only the message without providing you the control over the Dialog itself—for example, over the title.

The following example demonstrates a possible way to implement your own methods that open customized instances of the alert, prompt, and confirmation Dialogs. This is achieved by using the kendo.ui.Alert, kendo.ui.Prompt, and kendo.ui.Confirm configuration options.

Example
<button id="alertBtn" class="k-button">myalert</button>
<button id="confirmBtn" class="k-button">myconfirm</button>
<button id="promptBtn" class="k-button">myprompt</button>

<script>
  $("#alertBtn").on("click", function () {
    window.myalert("This is a Kendo UI Alert message!");
  });

  $("#confirmBtn").on("click", function () {
    window.myconfirm("Are you sure that you want to proceed?").then(function () {
      window.myalert("Operation done!");
    }, function () {
      window.myalert("You chose to Cancel action.");
    });
  });

  $("#promptBtn").on("click", function () {
    window.myprompt("Please, enter a arbitrary value:", "any value").then(function (data) {
      window.myalert(kendo.format("The value that you entered is '{0}'", data));
    }, function () {
      window.myalert("Cancel entering value.");
    })
  });

  function myalert(content){
    $("<div></div>").kendoAlert({
      title: "My Title",
      content: content
    }).data("kendoAlert").open();
  }

  function myconfirm(content){
    return $("<div></div>").kendoConfirm({
      title: "My Title",
      content: content
    }).data("kendoConfirm").open().result;
  }

  function myprompt(content, defaultValue){
    return $("<div></div>").kendoPrompt({
      title: "My Title",
      value: defaultValue,
      content: content
    }).data("kendoPrompt").open().result;
  }
</script>

See Also

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve the information

close
Dummy