Post
Ask Question

Get Total Number of Records in Kendo Grid

Here is the HTML Design and JQuery code to get total number of records in Kendo Grid: 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>Untitled</title>  
  6.   
  7.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">  
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">  
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">  
  10.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css">  
  11.   
  12.     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
  13.     <script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>  
  14.     <script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>  
  15.     <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>  
  16. </head>  
  17. <body>  
  18.     <div id="grid"></div>  
  19.     <script>  
  20.         $(document).ready(function () {  
  21.   
  22.           
  23. $("#grid").kendoGrid({  
  24.     selectable: "multiple cell",  
  25.     allowCopy: true,  
  26.     dataBound: onDataBound,  
  27.     columns: [  
  28.         { field: "productName" },  
  29.         { field: "category" }  
  30.     ],  
  31.     dataSource: [  
  32.         { productName: "Tea", category: "Beverages" },  
  33.         { productName: "Coffee", category: "Beverages" },  
  34.         { productName: "Ham", category: "Food" },  
  35.         { productName: "Bread", category: "Food" }  
  36.     ]  
  37. });  
  38.   
  39.         })  
  40.         function onDataBound(e) {  
  41.             e.preventDefault();  
  42.             alert(this.dataSource.total());  
  43.         }  
  44.     </script>  
  45. </body>  
  46. </html>