Introduction

In this article, we will learn about the very powerful Kendo Grid by Telerik that provides rich inbuilt features with less coding. We integrate the kendo grid using jQuery. Kendo can be used with any modern technology, such as - ASP.ET WebForm, ASP.NET MVC, .NET Core MVC, Node.js, PHP etc.
Prerequisites
  1. Visual Studio Code or any Text Editor
  2. Web Service or Web API
For this demo, I have used the web service created and hosted by Telerik. Source code for this web service is open source that you can review on GitHub as well.

Note
Kendo Grid is a licensed version.

Description

As we know, each and every application requires any tabular format to display small or large data with basic functionality, like Grid with Sorting, Filtering, Paging etc.

Here, the Kendo Grid provides the above functionality along with other advanced and powerful inbuilt features as mentioned below.
  1. Column Reordering
  2. Column Resizing
  3. Excel-Like filter menu which contains(Start With, End With, Contains, Not Contains. Equal to, Not equal to etc filter action)
  4. Hide or show column
  5. Keyboard navigation
  6. Row grouping
  7. Paging with Server and client-side
  8. Row or cell selection and Copy selected rows or cells in the clipboard with (Ctrl + C)
  9. Change detection in Cell Edit mode or batch edit mode
  10. Persistent selection of rows while sorting and filtering
  11. Export data to excel, pdf etc
  12. Inbuilt CRUD Operation with different edit mode like inline, popup, in cell etc
  13. Inbuilt themes or skin
  14. Support multiple form control e.g. DateTime, Textbox, Numeric, Checkbox, Dropdown etc
  15. Built-in validation as well.
  16. Frozen or lock column
CRUD operation and other advanced features will be explained in the next article. I have tried my best to cover as many as possible features in this article.

Step 1

Add Kendo UI CSS and JS along with jQuery UI as below.
  1. <!-- Add Kendo Grid CSS Reference-->
  2. <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.common-material.min.css" />
  3. <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.material.min.css" />
  4. <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.material.mobile.min.css" />
  5. <link rel="stylesheet" href="style.css" />
  6. <!-- Add Kendo Grid Js Reference -->
  7. <script src="https://kendo.cdn.telerik.com/2018.2.620/js/jquery.min.js"></script> <!-- jszip required for export to excel-->
  8. <script src="https://kendo.cdn.telerik.com/2018.2.620/js/jszip.min.js"></script>
  9. <script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script>
Step 2

Add selector in HTML page so we can bind the grid to that element.
  1. <div id="data-container">
  2. <div id="grid"></div>
  3. </div>
Step 3

Prepare, configure, and initialize Kendo grid feature to DOM element (#grid). Take a look,
  1. $(document).ready(function() {
  2. console.log("** Dom is ready **");
  3. // Dom is now ready, Need to initialize kendo grid
  4. // Define which columns should be visible in kendo grid
  5. var columnOptions = [{
  6. field: "CustomerID",
  7. editable: false
  8. }, {
  9. field: "ContactName",
  10. title: "Contact Name",
  11. //locked: true, // Ensure when locked is true it must be require to set width explicitly to each colummns
  12. width: 240
  13. }, {
  14. field: "ContactTitle",
  15. title: "Contact Title",
  16. //width: 240 // Ensure when locked is true it must be require to set width explicitly to each colummns
  17. }, {
  18. field: "CompanyName",
  19. title: "Company Name",
  20. //width: 240// Ensure when locked is true it must be require to set width explicitly to each colummns
  21. }, {
  22. field: "Address",
  23. filterable: false, //Also possible to restrict filter option for specific column
  24. }, {
  25. field: "City"
  26. }, {
  27. field: "PostalCode"
  28. }, {
  29. field: "Country",
  30. //width: 150// Ensure when locked is true it must be require to set width explicitly to each colummns
  31. }];
  32. // Prepare Datasource object using Web Service/Web API
  33. var dataSourceOptions = {
  34. type: "odata",
  35. transport: {
  36. read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
  37. },
  38. pageSize: 20,
  39. schema: {
  40. model: {
  41. id: "CustomerID"
  42. }
  43. }
  44. };
  45. //// Prepare Datasource object with static data
  46. //Configure or activate necessary feature in grid
  47. var kendoGridOption = {
  48. dataSource: dataSourceOptions,
  49. columns: columnOptions,
  50. toolbar: [{
  51. name: "cancel"
  52. }, {
  53. name: "excel"
  54. }, {
  55. name: "pdf"
  56. }],
  57. // toolbar: [{ name: "cancel" }, { name: "create" }, { name: "save" }, { name: "excel" }, { name: "pdf" }],
  58. excel: {
  59. allPages: true,
  60. fileName: "Customer Details.xlsx",
  61. filterable: true //Enables or disables column filtering in the Excel file
  62. },
  63. height: 630, //Set height so grid is displayed on visible window and scroll appears for more records
  64. editable: true, // editable: "popup",
  65. // groupable: true, // Customize empty message in groupable option
  66. groupable: {
  67. messages: {
  68. empty: "Drop columns here"
  69. }
  70. },
  71. sortable: true,
  72. filterable: true,
  73. resizable: true,
  74. reorderable: true,
  75. columnMenu: true, //This enable excel like filter menu
  76. //noRecords: true, // Configure grid for no record and also possible to define custom template as well.
  77. noRecords: {
  78. template: "No data available on current page. Current page is: #=this.dataSource.page()#"
  79. },
  80. //selectable: "multiple cell",// persistSelection not working with cell selection
  81. selectable: "multiple row", // persistSelection only works with row selection
  82. persistSelection: true,
  83. navigatable: true, // e.g. Keyboard Navigation. For info visit https://demos.telerik.com/kendo-ui/grid/keyboard-navigation
  84. allowCopy: {
  85. delimeter: ",",
  86. },
  87. pageable: {
  88. refresh: true,
  89. pageSizes: true,
  90. buttonCount: 5,
  91. pageSize: 20
  92. }
  93. };
  94. // Initialize kendo grid using ID Selector
  95. $("#grid").kendoGrid(kendoGridOption);
  96. });
The above script needs to be wrapped in script tag.

As per the above JavaScript code, you can easily configure most of the features with less code by just setting a specific property to it. I have tried to add possible or required comments to the above code snippet to make it more understandable.

Once you add the above code, it will show an output like the below screenshot which contains toolbar options, Row grouping on Country and City Column with Sorting, interactive Paging and Excel-like filter (three dots in column header).


Reference links
  • https://demos.telerik.com/kendo-ui/grid/index
  • https://demos.telerik.com/kendo-ui/grid/column-reordering
Conclusion

In this article, we have learned how to integrate Kendo Grid using jQuery UI with an in-built feature with easy configuration.

I hope you like this article.