Custom Validation In Kendo Grid

Gowtham K
7y
4.9k
0
1

Blog

CustomValidation.rar

Introduction

Validation in the Kendo Grid plays a vital role while we are updating the data in the Grid. To explain how to implement the validation in the Kendo Grid, I have created a Grid with static data source and batch editing.

Constructing the Kendo Grid with batch editing

Create one new HTML page, and write the below code in it. In my case, I named it CustomValidation.html.

CustomValidation.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css"/>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
</head>
<body>
<h3>Kendo Grid </h3>
<br/>
<br/>
<div id="grid"></div>
<script>
$(document).ready(function()
{
dataSource = new kendo.data.DataSource({
data:[{ ProductID:1, productName: "Tea", category: "Beverages" },
{ ProductID:2, productName: "Coffee", category: "Beverages" },
{ ProductID:3, productName: "Ham", category: "Food" },
{ ProductID:4, productName: "Bread", category: "Food" } ],
schema:{
model:{
id:"ProductID",
fields:{
ProductID:{editable:false,nullable:true},
productName:{editable:true},
Category:{editable:true}
},
}
},
})
$("#grid").kendoGrid({
dataSource: dataSource,
selectable: "true",
allowCopy: true,
editable:true,
navigatable:true,
columns: [
{ field: "productName", title:"Product Name" },
{ field: "category",title:"Category"}
],
});
});
</script>
</body>
</html>

The above code is used to construct the Kendo Grid with static datasource and batch editing.

Result in Browser

Kendo Grid with Validation

The validation for the Kendo Grid fields can be easily customized using the validation attribute while defining the Kendo Grid schema.

CustomValidation.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css"/>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
</head>
<body>
<h3>Kendo Grid using custom validation </h3>
<br/>
<br/>
<div id="grid"></div>
<script>
$(document).ready(function()
{
dataSource = new kendo.data.DataSource({
data:[{ ProductID:1, productName: "Tea", category: "Beverages" },
{ ProductID:2, productName: "Coffee", category: "Beverages" },
{ ProductID:3, productName: "Ham", category: "Food" },
{ ProductID:4, productName: "Bread", category: "Food" } ],
schema:{
model:{
id:"ProductID",
fields:{
ProductID:{editable:false,nullable:true},
Category:{editable:true},
productName:{
validation:{
required:true,
productnamevalidation: function (input) {
debugger;
if (input.is("[name='productName']") && input.val() != "") {
if(input.val().match(/\d+/g)!=null)
{
input.attr("data-productnamevalidation-msg", "Product Name should not contain number");
return false
}
}
return true;
}
}
}
},
}
},
})
$("#grid").kendoGrid({
dataSource: dataSource,
selectable: "true",
allowCopy: true,
editable:true,
navigatable:true,
columns: [
{ field: "productName", title:"Product Name" },
{ field: "category",title:"Category"}
],
});
});
</script>
</body>
</html>

Here, we are going to see how the validation happens in the Kendo Grid client side. In this demo, I’m not going to play with any server side CRUD operations.

From the above code, you can observe the validation for the Product Name field which is defined in the Kendo Grid schema. In this example, two validations are applied on the Product Name field.