Post
Ask Question

Added Features of Kendo Grid in New Release of Kendo UI

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" />  
  10.   
  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 >  
  2.   
  3. $(document).ready(function() {  
  4.   
  5.     $("#grid").kendoGrid({  
  6.   
  7.         dataSource: {  
  8.   
  9.             type: "jsonp",  
  10.   
  11.             transport: {  
  12.   
  13.                 read: "http://worldcup.sfg.io/teams/results"  
  14.   
  15.             },  
  16.   
  17.             pageSize: 20  
  18.   
  19.         },  
  20.   
  21.         height: 550,  
  22.   
  23.         groupable: true,  
  24.   
  25.         sortable: true,  
  26.   
  27.         pageable: {  
  28.   
  29.             refresh: true,  
  30.   
  31.             pageSizes: true,  
  32.   
  33.             buttonCount: 5  
  34.   
  35.         },  
  36.   
  37.         columns: [{  
  38.   
  39.             field: "country",  
  40.   
  41.             title: "Country",  
  42.   
  43.             width: 240  
  44.   
  45.         }, {  
  46.   
  47.             field: "fifa_code",  
  48.   
  49.             title: "Fifa Code"  
  50.   
  51.         }, ]  
  52.   
  53.     });  
  54.   
  55. });  
  56.   
  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 >  
  2.   
  3. $(document).ready(function() {  
  4.   
  5.     $("#grid").kendoGrid({  
  6.   
  7.         dataSource: {  
  8.   
  9.             type: "jsonp",  
  10.   
  11.             transport: {  
  12.   
  13.                 read: "http://worldcup.sfg.io/matches/today"  
  14.   
  15.             },  
  16.   
  17.             pageSize: 20  
  18.   
  19.         },  
  20.   
  21.         height: 550,  
  22.   
  23.         groupable: true,  
  24.   
  25.         sortable: true,  
  26.   
  27.         pageable: {  
  28.   
  29.             refresh: true,  
  30.   
  31.             pageSizes: true,  
  32.   
  33.             buttonCount: 5  
  34.   
  35.         },  
  36.   
  37.         columns: [{  
  38.   
  39.             field: "country",  
  40.   
  41.             title: "Country",  
  42.   
  43.             width: 240  
  44.   
  45.         }, {  
  46.   
  47.             field: "fifa_code",  
  48.   
  49.             title: "Fifa Code"  
  50.   
  51.         }, ]  
  52.   
  53.     });  
  54.   
  55. });  
  56.   
  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 >  
  2.   
  3. $(document).ready(function() {  
  4.   
  5.     $("#grid").kendoGrid({  
  6.   
  7.         dataSource: {  
  8.   
  9.             type: "jsonp",  
  10.   
  11.             transport: {  
  12.   
  13.                 read: "http://worldcup.sfg.io/matches/today"  
  14.   
  15.             },  
  16.   
  17.             pageSize: 20  
  18.   
  19.         },  
  20.   
  21.         height: 550,  
  22.   
  23.         groupable: true,  
  24.   
  25.         sortable: true,  
  26.   
  27.         noRecords: true,  
  28.   
  29.         pageable: {  
  30.   
  31.             refresh: true,  
  32.   
  33.             pageSizes: true,  
  34.   
  35.             buttonCount: 5  
  36.   
  37.         },  
  38.   
  39.         columns: [{  
  40.   
  41.             field: "country",  
  42.   
  43.             title: "Country",  
  44.   
  45.             width: 240  
  46.   
  47.         }, {  
  48.   
  49.             field: "fifa_code",  
  50.   
  51.             title: "Fifa Code"  
  52.   
  53.         }, ]  
  54.   
  55.     });  
  56.   
  57. });  
  58.   
  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 >  
  2.   
  3. $(document).ready(function() {  
  4.   
  5.     $("#grid").kendoGrid({  
  6.   
  7.         dataSource: {  
  8.   
  9.             type: "jsonp",  
  10.   
  11.             transport: {  
  12.   
  13.                 read: "http://worldcup.sfg.io/matches/today"  
  14.   
  15.             },  
  16.   
  17.             pageSize: 20  
  18.   
  19.         },  
  20.   
  21.         height: 550,  
  22.   
  23.         groupable: true,  
  24.   
  25.         sortable: true,  
  26.   
  27.         noRecords: true,  
  28.   
  29.         messages: {  
  30.   
  31.             noRecords: "Sorry , No Record Found!"  
  32.   
  33.         },  
  34.   
  35.         pageable: {  
  36.   
  37.             refresh: true,  
  38.   
  39.             pageSizes: true,  
  40.   
  41.             buttonCount: 5  
  42.   
  43.         },  
  44.   
  45.         columns: [{  
  46.   
  47.             field: "country",  
  48.   
  49.             title: "Country",  
  50.   
  51.             width: 240  
  52.   
  53.         }, {  
  54.   
  55.             field: "fifa_code",  
  56.   
  57.             title: "Fifa Code"  
  58.   
  59.         }, ]  
  60.   
  61.     });  
  62.   
  63. });  
  64.   
  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 >  
  2.   
  3. $(document).ready(function() {  
  4.   
  5.     $("#grid").kendoGrid({  
  6.   
  7.         dataSource: {  
  8.   
  9.             type: "jsonp",  
  10.   
  11.             transport: {  
  12.   
  13.                 read: "http://worldcup.sfg.io/matches/today"  
  14.   
  15.             },  
  16.   
  17.             pageSize: 20  
  18.   
  19.         },  
  20.   
  21.         height: 550,  
  22.   
  23.         groupable: true,  
  24.   
  25.         sortable: true,  
  26.   
  27.         noRecords: {  
  28.   
  29.             template: "<img src=/no-record-found.jpg> </img>"  
  30.   
  31.         },  
  32.   
  33.         pageable: {  
  34.   
  35.             refresh: true,  
  36.   
  37.             pageSizes: true,  
  38.   
  39.             buttonCount: 5  
  40.   
  41.         },  
  42.   
  43.         columns: [{  
  44.   
  45.             field: "country",  
  46.   
  47.             title: "Country",  
  48.   
  49.             width: 240  
  50.   
  51.         }, {  
  52.   
  53.             field: "fifa_code",  
  54.   
  55.             title: "Fifa Code"  
  56.   
  57.         }, ]  
  58.   
  59.     });  
  60.   
  61. });  
  62.   
  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.


Similar Articles