Apply Paging and Filtering in Kendo Grid

Applying the paging and filtering in the Kendo gird is  simply and easy to implement by using the pageable and filterable property in Kendo Grid.
 
Step 1: 
 
Create a HTML page and write a following code in it. 
 
HTML Design 
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4.     <head>  
  5.         <meta charset="utf-8">  
  6.         <title>Untitled</title>  
  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.         <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
  12.         <script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>  
  13.         <script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>  
  14.         <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>  
  15.     </head>  
  16.   
  17.     <body>  
  18.         <div id="grid"></div>  
  19.     </body>  
  20.   
  21. </html>  
JavaScript:
  1. $(document)  
  2. .ready(function ()  
  3. {  
  4.     ("#grid")  
  5.     .kendoGrid(  
  6.         {  
  7.             selectable: "multiple cell",  
  8.             allowCopy: true,  
  9.             pageable:  
  10.             {  
  11.                 pageSizes: true,  
  12.             },  
  13.             filterable: true,  
  14.             columns: [  
  15.             {  
  16.                 field: "productName"  
  17.             },  
  18.             {  
  19.                 field: "category"  
  20.             }],  
  21.             dataSource: [  
  22.             {  
  23.                 productName: "Tea",  
  24.                 category: "Beverages"  
  25.             },  
  26.             {  
  27.                 productName: "Coffee",  
  28.                 category: "Beverages"  
  29.             },  
  30.             {  
  31.                 productName: "Ham",  
  32.                 category: "Food"  
  33.             },  
  34.             {  
  35.                 productName: "Bread",  
  36.                 category: "Food"  
  37.             },  
  38.             {  
  39.                 productName: "Chocolate",  
  40.                 category: "Food"  
  41.             },  
  42.             {  
  43.                 productName: "Cake",  
  44.                 category: "Food"  
  45.             }]);  
  46.     })  
Result in Browser:
 
 
                                                                                             Figure 1
 
                                                                                                    Figure 2 
 
 
                                                                                                       Figure 3
Ebook Download
View all
Learn
View all