Post
Ask Question

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