Last month Telerik released a major update of the Kendo UI. In this article I share some important added features in the Kendo grid. Get recent Kendo UI bundles.

I am using two REST services provided by Telerik:

  • http://worldcup.sfg.io/teams/results
  • http://worldcup.sfg.io/matches/today
The first service end point will consist of some data and the second service end point will consist of empty data.

Figure 1 shows the first REST Service result in POSTMAN.

Figure 1

Figure 2 shows the second REST Service result in POSTMAN.

Figure 2

The following are the added features in the Kendo Grid.

1. NoRecords option

The NoRecords option displays no record message if there is no data in the Kendo grid.

Let's have a demo of it.

Case 1: using http://worldcup.sfg.io/teams/results.

HTML design
  1. <!DOCTYPE html>
  2. <html
  3. xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <script src="js/jquery.min.js"></script>
  6. <script src="js/jszip.min.js"></script>
  7. <script src="js/kendo.all.min.js"></script>
  8. <script src="js/kendo.web.min.js"></script>
  9. <link href="styles/kendo.metro.min.css" rel="stylesheet" />
  11. link href="styles/kendo.common.min.css" rel="stylesheet" />
  12. <title></title>
  13. </head>
  14. <body>
  15. <h4>Kendo update</h4>
  16. <div id="example">
  17. <div id="grid"></div>
  18. </div>
  19. </body>
  20. </html>
JavaScript
  1. < script >
  3. $(document).ready(function() {
  5. $("#grid").kendoGrid({
  7. dataSource: {
  9. type: "jsonp",
  11. transport: {
  13. read: "http://worldcup.sfg.io/teams/results"
  15. },
  17. pageSize: 20
  19. },
  21. height: 550,
  23. groupable: true,
  25. sortable: true,
  27. pageable: {
  29. refresh: true,
  31. pageSizes: true,
  33. buttonCount: 5
  35. },
  37. columns: [{
  39. field: "country",
  41. title: "Country",
  43. width: 240
  45. }, {
  47. field: "fifa_code",
  49. title: "Fifa Code"
  51. }, ]
  53. });
  55. });
  57. < /script>

Figure 3 shows the result in a browser.


Figure 3

Case 2: using http://worldcup.sfg.io/matches/today Service

JavaScript

  1. < script >
  3. $(document).ready(function() {
  5. $("#grid").kendoGrid({
  7. dataSource: {
  9. type: "jsonp",
  11. transport: {
  13. read: "http://worldcup.sfg.io/matches/today"
  15. },
  17. pageSize: 20
  19. },
  21. height: 550,
  23. groupable: true,
  25. sortable: true,
  27. pageable: {
  29. refresh: true,
  31. pageSizes: true,
  33. buttonCount: 5
  35. },
  37. columns: [{
  39. field: "country",
  41. title: "Country",
  43. width: 240
  45. }, {
  47. field: "fifa_code",
  49. title: "Fifa Code"
  51. }, ]
  53. });
  55. });
  57. < /script>
Result in Browser

Figure 4

You can see one thing in Figure 4, that is that there is no record to display in the grid, it is the developer's responsibility to show a no record message to the user. Now Kendo gives a new feature called noRecords. It is one of the properties in the Kendo grid to display the no record message.

Case 3: using noRecords property.

JavaScript
  1. < script >
  3. $(document).ready(function() {
  5. $("#grid").kendoGrid({
  7. dataSource: {
  9. type: "jsonp",
  11. transport: {
  13. read: "http://worldcup.sfg.io/matches/today"
  15. },
  17. pageSize: 20
  19. },
  21. height: 550,
  23. groupable: true,
  25. sortable: true,
  27. noRecords: true,
  29. pageable: {
  31. refresh: true,
  33. pageSizes: true,
  35. buttonCount: 5
  37. },
  39. columns: [{
  41. field: "country",
  43. title: "Country",
  45. width: 240
  47. }, {
  49. field: "fifa_code",
  51. title: "Fifa Code"
  53. }, ]
  55. });
  57. });
  59. < /script>

Figure 5 shows the result in a browser.
Figure 5

2. Customizing the noRecord property

We can customize the default message that is displayed in the grid when there is no record using the message property.

Let's have a demo of it.

JavaScript
  1. < script >
  3. $(document).ready(function() {
  5. $("#grid").kendoGrid({
  7. dataSource: {
  9. type: "jsonp",
  11. transport: {
  13. read: "http://worldcup.sfg.io/matches/today"
  15. },
  17. pageSize: 20
  19. },
  21. height: 550,
  23. groupable: true,
  25. sortable: true,
  27. noRecords: true,
  29. messages: {
  31. noRecords: "Sorry , No Record Found!"
  33. },
  35. pageable: {
  37. refresh: true,
  39. pageSizes: true,
  41. buttonCount: 5
  43. },
  45. columns: [{
  47. field: "country",
  49. title: "Country",
  51. width: 240
  53. }, {
  55. field: "fifa_code",
  57. title: "Fifa Code"
  59. }, ]
  61. });
  63. });
  65. < /script>
Figure 6 shows the result in a browser.
Figure 6

3. Adding Templates in the noRecord property

We can more customize the noRecord property using templates.

Let's have a demo of that.

JavaScript
  1. < script >
  3. $(document).ready(function() {
  5. $("#grid").kendoGrid({
  7. dataSource: {
  9. type: "jsonp",
  11. transport: {
  13. read: "http://worldcup.sfg.io/matches/today"
  15. },
  17. pageSize: 20
  19. },
  21. height: 550,
  23. groupable: true,
  25. sortable: true,
  27. noRecords: {
  29. template: "<img src=/no-record-found.jpg> </img>"
  31. },
  33. pageable: {
  35. refresh: true,
  37. pageSizes: true,
  39. buttonCount: 5
  41. },
  43. columns: [{
  45. field: "country",
  47. title: "Country",
  49. width: 240
  51. }, {
  53. field: "fifa_code",
  55. title: "Fifa Code"
  57. }, ]
  59. });
  61. });
  63. < /script>

Figure 6 shows the result in a browser.

Figure 7

The All options in the paging toolbar is one of the added features in Kendo Grid where the user can get all records in a single page.

Figure 8 shows five records in each page.

Figure 8

Figure 9 shows all records in a single page.
Figure 9

I hope you have enjoyed this article.
Thank you.