Get Started

You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

Become a sharper developer and jumpstart your career.

Basic

$0

$

. 00

monthly

For Basic members:

  • Standard Profile
  • Access learning courses
  • Access free e-books
  • 1x point

Premium

$20

$

. 00

monthly

For Premium members:

  • Earn 2x reward points
  • Premium profile with Verified check
  • Premium Avatar with status update
  • Learning courses
  • Unlimited Certifications and badges on profile
  • Unlimited Book downloads
  • Access to Premium content
  • Online Training
  • Unlimited PDF conversions and downloads
  • Professional Resume Writing
  • Interview Preparations Guide
  • 25 messages per month
  • 1 "Kodzu" avatar, basic
Products

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.

Up Next
    Ebook Download
    View all
    Learn
    View all