python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
Kendo UI confirmation dialog

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>
    <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>
ANIL SINGH

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions