How to add confirmation window for jQuery Kendo Ui Grid through update?
Coda Chang
For Kendo UI, it would give a confirmation window before you delete a record. 
Is there a way to add it to the update button? and the add record?
Here is an example, it seems hook all the callback already.
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/grid/editing-inline">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.617/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
{ field: "UnitsInStock", title:"Units In Stock", width: "120px" },
{ field: "Discontinued", width: "120px", editor: customBoolEditor },
{ command: ["edit", "destroy"], title: " ", width: "250px" }],
editable: "inline"
});
});
function customBoolEditor(container, options) {
$('<input class="k-checkbox" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container);
}
</script>
</div>
</body>
</html>
Swati
You can do that by using click event of jquery .So , whenever edit button or create new button is clicked then click handler will get called and then you can use confirm(..) box to get response from user .If user select cancel then we can use cancelChanges() to avoid any changes else do required operation.
Demo Code :
$(document).ready(function() {
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {
models: kendo.stringify(options.models)
};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: {
editable: false,
nullable: true
},
ProductName: {
validation: {
required: true
}
},
UnitPrice: {
type: "number",
validation: {
required: true,
min: 1
}
},
Discontinued: {
type: "boolean"
},
UnitsInStock: {
type: "number",
validation: {
min: 0,
required: true
}
}
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
columns: [
"ProductName",
{
field: "UnitPrice",
title: "Unit Price",
format: "{0:c}",
width: "120px"
},
{
field: "UnitsInStock",
title: "Units In Stock",
width: "120px"
},
{
field: "Discontinued",
width: "120px",
editor: customBoolEditor
},
{
command: ["edit", "destroy"],
title: " ",
width: "250px"
}
],
editable: "inline"
});
});
function customBoolEditor(container, options) {
$('<input class="k-checkbox" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container);
}
//onclick of edit and new recors
$(document).on('click', '.k-grid-edit,.k-grid-add', function() {
var r = confirm("Are you sure ?"); //show alert
//if user select cancel
if (r == false) {
//cancel changes
$('#grid').data('kendoGrid').dataSource.cancelChanges();
console.log("Cancel!");
}
})html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}<base href="https://demos.telerik.com/kendo-ui/grid/editing-inline">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.617/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/kendo.all.min.js"></script>
<div id="example">
<div id="grid"></div>
</div>Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
- Prev: How to prevent row count to count twice in a collapsible dataTable?
- Next: react with jquery datatables - NotFoundError: Node.removeChild: The node to be removed is not a child of this node
Related
TOP Ranking
- 1
pump.io port in URL
- 2
How to import an asset in swift using Bundle.main.path() in a react-native native module
- 3
Failed to listen on localhost:8000 (reason: Cannot assign requested address)
- 4
Inner Loop design for webscrapping
- 5
Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background
- 6
mysql.connector.errors.InterfaceError: 2003: Can't connect to MySQL server on '127.0.0.1:3306' (111 Connection refused)
- 7
Removed zsh, but forgot to change shell back to bash, and now Ubuntu crashes (wsl)
- 8
ggplotly no applicable method for 'plotly_build' applied to an object of class "NULL" if statements
- 9
How to run blender on webserver?
- 10
Resetting Value of <input type="time"> in Firefox
- 11
Converting a class method to a property with a backing field
- 12
Ambiguous use of 'init' with CFStringTransform and Swift 3
- 13
Execute ./script.sh with a crontab
- 14
How to set tab order for array of cluster,where cluster elements have different data types in LabVIEW?
- 15
How to pass data to the ng2-bs3-modal?
- 16
Retrieve Element Tag Value XML Using Bash
- 17
Spring Boot JPA PostgreSQL Web App - Internal Authentication Error
- 18
SQL Server : need add a dot before two last character
- 19
Making Array From Page Elements in jQuery
- 20
Laravel's ORM sync with timestamps doesn't update timestamps
- 21
Do animations stop css changes after animation completion?
Comments