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.
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.
Confimation dialog Message
In the confimation dialog box, need to add two buttons, one is "OK" button and other one is Cancel button.
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.
In the second step, put below div on the same view page for display dialog.
<div>
<script type="text/javascript">
Table of Contents
- Error dialog Message.
- Warning dialog Message.
- Conformation dialog Message.
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);
"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",
"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);
"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" />
@
@
<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);
"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 {
else {
alertCallback= null;
}
alertWindows.bind("close", alertCloseCallBack);
alertWindows.title(Title);
alertWindows.center();
alertWindows.content(runTimeData);
alertWindows.open();
}
</script>
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|
