Kendo UI Extended API: MessageBox Dialogs

This website is no longer actively supported

Written by John DeVight on 19 Mar 2013 18:32

Download found at kendoui-extended-api on GitHub in the examples folder.

Overview

In May 2011, I wrote an article about Creating Standard MessageBox Dialogs using the Telerik MVC Extensions. I used the standard MessageBox dialogs in my applications until recently, when I began porting or creating new applications using Kendo UI. I now needed to create standard MessageBox dialogs using the Kendo UI framework. This time, I wanted to be able to use the standard MessageBox dialogs without having to define the HTML in each application. When I created the Kendo UI Extended API, I made sure that all the HTML would be created dynamically within the JavaScript.

I've created the following standard MessageBox dialog widgets:

1. ExtAlertDialog
2. ExtInputDialog
3. ExtOkCancelDialog
4. ExtYesNoDialog
5. ExtWaitDialog
6. ExtMultiLineInputDialog (Coming Soon)

Adding Kendo UI Web Extended API to Your Application

Adding the StyleSheet

In the kendoui-extended-api GitHub repository, there is a styles folder. Download the folder and add it to your application. In the HTML file, define the reference to the kendo.ext.css. For example:

<link href="//cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css" rel="stylesheet" />
<link href="//cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css" rel="stylesheet" />
<link href="./styles/kendoext/kendo.ext.css" rel="stylesheet" />

Adding the JavaScript

In the kendoui-extended-api GitHub repository, there is a js folder. Download the folder and add the kendo.web.ext.js file to your application. In the HTML file, define the reference to the kendo.web.ext.js after the references to the jQuery and Kendo UI JavaScript files. For example:

<script src="//code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="//cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<script src="./scripts/kendo.web.ext.js"></script>

ExtAlertDialog

To use the ExtAlertDialog call the kendo.ui.AlertDialog.show method. The show method takes a JSON Object with options. Since the ExtAlertDialog is derived from the Kendo UI Web Window widget, any option available for the Kendo UI Web Window widget is also available for the ExtAlertDialog, plus the following options:

• message (String): Message to be displayed to the user.
• icon (String): The CSS Class of the image to be displayed. Images provided are:
  • Information: k-ext-information
  • Question: k-ext-question
  • Warning: k-ext-warning
  • Error: k-ext-error

The kendo.ui.AlertDialog.show method returns a jQuery.Deferred Object. When the user clicks the OK button the Deferred object is resolved and any done callbacks are executed.

Here is an example:

$.when(kendo.ui.AlertDialog.show({
    title: "Alert!", 
    message: "This is a sample alert box",
    icon: "k-ext-information" })
).done(function () {
    console.log("User clicked the OK button");
});

Here is a screenshot:

ExtInputDialog

To use the ExtInputDialog call the kendo.ui.InputDialog.show method. The show method takes a JSON Object with options. Since the ExtInputDialog is derived from the Kendo UI Web Window widget, any option available for the Kendo UI Web Window widget is also available for the ExtInputDialog, plus the following options:

• message (String): Message prompt to be displayed to the user.
• required (Boolean): Indicates whether a value must be entered in the input field.
• requiredCss (String): The CSS Class to be applied to the input field if a value is required and empty when the user clicks the OK button. The default is: "k-ext-required".

The kendo.ui.InputDialog.show method returns a jQuery.Deferred Object. When the user clicks the OK button the Deferred object is resolved and any done callbacks are executed. The done callback is passed an argument that is a JSON Object containing the following attributes:

• button (String): the button that was clicked: "OK" or "Cancel".
• input (String): the input entered by the user.

Here is an example:

$.when(kendo.ui.ExtInputDialog.show({ 
    title: "Input", 
    message: "Please enter your name:", 
    required: true })
).done(function (response) {
    if (response.button == "OK") {
        console.log(kendo.format("{0} button clicked with input of: {1}", 
            response.button, response.input));
    } else {
        console.log(kendo.format("{0} button clicked", 
            response.button);
    }
});

Here is a screenshot:

Here is a screenshot when the value is required, nothing is entered, and the user clicks OK:

ExtOkCancelDialog

To use the ExtOkCancelDialog call the kendo.ui.OkCancelDialog.show method. The show method takes a JSON Object with options. Since the ExtOkCancelDialog is derived from the Kendo UI Web Window widget, any option available for the Kendo UI Web Window widget is also available for the ExtOkCancelDialog, plus the following options:

• message (String): Message to be displayed to the user.
• icon (String): The CSS Class of the image to be displayed. Images provided are:
  • Information: k-ext-information
  • Question: k-ext-question
  • Warning: k-ext-warning
  • Error: k-ext-error

The kendo.ui.OkCancelDialog.show method returns a jQuery.Deferred Object. When the user clicks the OK or Cancel button the Deferred object is resolved and any done callbacks are executed. The done callback is passed an argument that is a JSON Object containing the following attributes:

• button (String): the button that was clicked: "OK" or "Cancel".

Here is an example:

$.when(kendo.ui.ExtOkCancelDialog.show({ 
    title: "OK/Cancel", 
    message: "This is a sample ok/cancel box",
    icon: "k-ext-question" })
).done(function (response) {
    console.log(kendo.format("{0} button clicked", 
        response.button));
});

Here is a screenshot:

ExtYesNoDialog

To use the ExtYesNoDialog call the kendo.ui.YesNoDialog.show method. The show method takes a JSON Object with options. Since the ExtYesNoDialog is derived from the Kendo UI Web Window widget, any option available for the Kendo UI Web Window widget is also available for the ExtYesNoDialog, plus the following options:

• message (String): Message to be displayed to the user.
• icon (String): The CSS Class of the image to be displayed. Images provided are:
  • Information: k-ext-information
  • Question: k-ext-question
  • Warning: k-ext-warning
  • Error: k-ext-error

The kendo.ui.YesNoDialog.show method returns a jQuery.Deferred Object. When the user clicks the Yes or No button the Deferred object is resolved and any done callbacks are executed. The done callback is passed an argument that is a JSON Object containing the following attributes:

• button (String): the button that was clicked: "Yes" or "No".

Here is an example:

$.when(kendo.ui.ExtOkCancelDialog.show({ 
    title: "Yes/No", 
    message: "This is a sample yes/no box",
    icon: "k-ext-warning" })
).done(function (response) {
    console.log(kendo.format("{0} button clicked", 
        response.button));
});

Here is a screenshot:

ExtWaitDialog

To use the ExtWaitDialog call the kendo.ui.WaitDialog.show method. The show method takes a JSON Object with options. Since the ExtWaitDialog is derived from the Kendo UI Web Window widget, any option available for the Kendo UI Web Window widget is also available for the ExtWaitDialog, plus the following options:

• message (String): Message to be displayed to the user.

The kendo.ui.WaitDialog.show method returns a jQuery.Deferred Object when the wait dialog has finished initializing.

Here is a screenshot:

Conclusion

Check out the Kendo UI Extended API and let me know if there are additional capabilities that you think need to be added to the MessageBox dialogs or any of the other Kendo UI Extended API widgets. Also, let me know if there are other widgets you would like to see added.

References

• kendoui-extended-api on GitHub
• jQuery.Deferred Object
• Creating Standard MessageBox Dialogs using the Telerik MVC Extensions

Related Articles

• Kendo UI Extended API: DropDownTreeView Widget
• Kendo UI Extended API: DropDownGrid Widget
• Kendo UI Extended API: BorderLayout Widget

---