Added Features of Kendo Gird in New Release of Kendo UI

Datetime:2016-08-22 23:47:46          Topic: JavaScript  JSONP           Share

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

I am using two REST service that is 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. The first REST Service result in POSTMAN:

Figure 1

The second REST Service result in POSTMAN:

Figure 2

List of added features in Kendo Grid:

1. NoRecords option

This option is used to display 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> 

The result in 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 notice one thing in above figure 4 that there is no record to display in the grid, it is the developers responsibility to show a no record message to user. Now  kendo gives a new feature called noRecords. It is one of the property in Kendo grid which is used 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> 
The result in browser: 

Figure 5

2. Customizing the noRecord property

We can customize the default message which 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> 
The Result in browser

Figure 6

3. 

Adding Templates in the noRecord property

We can more customize the noRecord property by using the templates.

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: {  
  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> 
Result in browser:

Figure 7

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

The following figure shows five records in each page.

Figure 8

The following figure shows all records in a single page:

Figure 9

I hope you have enjoyed this article.

Thank you.





About List