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

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.

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

  $("#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){
      title: "My Title",
      content: content,
        okText: "Ok"

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

  function myprompt(content, defaultValue){
    return $("<div></div>").kendoPrompt({
      title: "My Title",
      value: defaultValue,
      content: content

See Also

In this article
Not finding the help you need? Improve this article