Post
Ask Question

Custom Validation In Kendo Grid

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

  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4.     <meta charset="utf-8"/>    
  5.     <title>Kendo UI Snippet</title>    
  6.     
  7.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css"/>    
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css"/>    
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css"/>    
  10.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css"/>    
  11.     
  12.     <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>    
  13.     <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>    
  14. </head>    
  15. <body>    
  16.  <h3>Kendo Grid </h3>  
  17.  <br/>  
  18.  <br/>     
  19. <div id="grid"></div>    
  20.   
  21. <script>    
  22. $(document).ready(function()  
  23. {  
  24.     dataSource = new kendo.data.DataSource({  
  25.         data:[{ ProductID:1, productName: "Tea", category: "Beverages" },    
  26.         { ProductID:2, productName: "Coffee", category: "Beverages" },    
  27.         { ProductID:3, productName: "Ham", category: "Food" },    
  28.         { ProductID:4, productName: "Bread", category: "Food" }  ],  
  29.         schema:{  
  30.     model:{  
  31.         id:"ProductID",  
  32.         fields:{  
  33.         ProductID:{editable:false,nullable:true},  
  34.         productName:{editable:true},  
  35.         Category:{editable:true}   
  36.         },  
  37.   
  38.     }  
  39.     },  
  40.     })  
  41.       
  42.   
  43. $("#grid").kendoGrid({    
  44.      dataSource: dataSource,  
  45.     selectable: "true",    
  46.     allowCopy: true,  
  47.     editable:true,  
  48.     navigatable:true,    
  49.       
  50.     columns: [    
  51.         { field: "productName", title:"Product Name" },    
  52.         { field: "category",title:"Category"}    
  53.     ],    
  54.      
  55.           
  56.       
  57. });     
  58. });    
  59. </script>    
  60. </body>    
  61. </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

  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4.     <meta charset="utf-8"/>    
  5.     <title>Kendo UI Snippet</title>    
  6.     
  7.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css"/>    
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css"/>    
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css"/>    
  10.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css"/>    
  11.     
  12.     <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>    
  13.     <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>    
  14. </head>    
  15. <body>    
  16.  <h3>Kendo Grid using custom validation </h3>  
  17.  <br/>  
  18.  <br/>     
  19. <div id="grid"></div>    
  20.   
  21. <script>    
  22. $(document).ready(function()  
  23. {  
  24.     dataSource = new kendo.data.DataSource({  
  25.         data:[{ ProductID:1, productName: "Tea", category: "Beverages" },    
  26.         { ProductID:2, productName: "Coffee", category: "Beverages" },    
  27.         { ProductID:3, productName: "Ham", category: "Food" },    
  28.         { ProductID:4, productName: "Bread", category: "Food" }  ],  
  29.         schema:{  
  30.     model:{  
  31.         id:"ProductID",  
  32.         fields:{  
  33.         ProductID:{editable:false,nullable:true},  
  34.           
  35.         Category:{editable:true},  
  36.          productName:{  
  37.              validation:{  
  38.                  required:true,  
  39.                   productnamevalidation: function (input) {  
  40.                       debugger;  
  41.                                                       if (input.is("[name='productName']") && input.val() != "") {  
  42.                                                           if(input.val().match(/\d+/g)!=null)  
  43.                                                           {  
  44.                                                           input.attr("data-productnamevalidation-msg", "Product Name should not contain number");  
  45.                                                          return false  
  46.                                                           }  
  47.                                                       }  
  48.   
  49.                                                       return true;  
  50.                                                   }  
  51.             }  
  52.   
  53.            }  
  54.         },  
  55.   
  56.     }  
  57.     },  
  58.     })  
  59.       
  60.   
  61. $("#grid").kendoGrid({    
  62.      dataSource: dataSource,  
  63.     selectable: "true",    
  64.     allowCopy: true,  
  65.     editable:true,  
  66.     navigatable:true,    
  67.       
  68.     columns: [    
  69.         { field: "productName", title:"Product Name" },    
  70.         { field: "category",title:"Category"}    
  71.     ],    
  72.      
  73.           
  74.       
  75. });     
  76. });    
  77. </script>    
  78. </body>    
  79. </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.

  1. Required field validation   

  2. Product Name should contain only alphabet letters 
I hope you have enjoyed this blog. Your valuable feedback, questions, and comments about this blog are always welcome.
Next Recommended Reading Get Selected Row Value In Kendo Grid From The External Button Click Event