Kendo ui confirmation dialog

Today I am going to share a interesting code sample for how to display the kendo ui confirmation dialog using jQuery and MVC 4. The table of content as given below.

Table of Contents

1. Error dialog Message.
2. Warning dialog Message.
3. Conformation dialog Message.

The below openDialogBox method is used to display the "warning dialog", "error dialog" and "conformation dialog".

Error dialog Message

In the error dialog box, need to add only one button that is "OK" button which are given in below display image.

$("#btnClickMe").click(function () {

         openDialogBox("Error",  
                                 "Put error message content here.",
                                 "Error", ["OK"],  null);

 });

Confimation dialog Message

In the confimation dialog box, need to add two buttons, one is "OK" button and other one is Cancel button.

$("#btnClickMe").click(function () {

    openDialogBox("Confimation", 

                             "Are you sure want to delete this record ?", 

                             "Error",

                              ["Cancel", "OK"], 

                              null);

 });

Warning dialog Message

In the warning dialog box, need to add only one button that is "OK" button which are given in above display image.

$("#btnClickMe").click(function () {

         openDialogBox("Warning",  
                                 "Put waning message content here.",
                                 "Error", ["OK"],  null);

 });

In the first step, we need to add the kendo ui script and css file on your view.

@

    <script src="~/Scripts/kendo.all.min.js"></script>

    <script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.aspnetmvc.min.js"></script>

    <link href="~/Content/kendo.dataviz.bootstrap.min.css" rel="stylesheet" />
@

In the second step, put below div on the same view page for display dialog.

<div>

      <div id="div_alert_window"></div>

      <div class="dialog button">

             click on dialog: <input type="button" value="click me!" id="btnClickMe" />

      </div>

</div>

JavaScript code

<script type="text/javascript">

   $(document).ready(function () {

       $("#btnClickMe").click(function () {

           // This is for [Warning / Information / Confirm / Error] dialog box.

           openDialogBox("Error", 
                                "Inflow encountered some internal error.", 
                                "Error",  ["OK"],  null);

       });

   });

</script>

Kendo ui JavaScript code sample

<script type="text/javascript">

var alertResult = "Cancel";

var alertWindows;

var alertCallback;

$(function () {

    alertWindows= $("#div_alert_window").kendoWindow({

        actions: ["Close"],

        draggable: true,

        modal: true,

        resizable: false,

        visible: false,

        title: "Action"

    }).data("kendoWindow");

});

function alertClose(BtnResult) {

         alertResult = BtnResult;

         alertWindows.close();

};

function alertCloseCallBack(e) {

    alertWindows.unbind("close", alertCloseCallBack);

}

function openDialogBox(Title, Message, Type, Buttons, theFunction) {

   var runTimeData = '<table cellpadding="0" cellspacing="0"><tr><td><div        class="AKKendoAlertIcon ' + Type + '"></div></td>' +

        '<td><div class="AKKendoAlertText">' + Message + '</div></td></tr></table><div>';

   for (var i in Buttons) {

             var s = Buttons[i];

             runTimeData += '<input class="AKKendoAlertBtn" type="button"           onclick="alertClose(\'' + s + '\')" value="' + s + '">';

    }

    runTimeData += '</div>';

    alertResult = "Cancel";

    if (theFunction !== undefined) {

        alertCallback= theFunction;

    } 
    else {

        alertCallback= null;

    }

    alertWindows.bind("close", alertCloseCallBack);

    alertWindows.title(Title);

    alertWindows.center();

    alertWindows.content(runTimeData);

    alertWindows.open();

}

</script>