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>
  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>
  17. <body>
  18. <div id="grid"></div>
  19. </body>
  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