Post
Ask Question

Kendo Rating Using JQuery

Introduction

 
Rating controls are widely used in modern web sites to rate the product, blog, articles and so on. In this blog, you will learn how to implement the kendo rating control using JQuery and how to fetch the values from the control, based on the selection.
 
KendoRating.html 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default-v2.min.css" />  
  6.   
  7.     <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jquery.min.js"></script>  
  8.     <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>  
  9.   
  10. </head>  
  11. <body>  
  12.     <div id="example">  
  13.         <div class="k-content">  
  14.             <h4>Rating </h4>  
  15.             <input id="rating" name="rating" style="width: 100%;" />  
  16.         </div>  
  17.   
  18.         <div class="box">  
  19.             <h4>Result</h4>  
  20.             <div>  
  21.                 Old value: <label id=lblOldValue />  
  22.             </div>  
  23.             <div>  
  24.                 New Value: <label id=lblNewValue />  
  25.             </div>  
  26.         </div>  
  27.   
  28.         <script>  
  29.         $(document).ready(function () {  
  30.             $("#rating").kendoRating({  
  31.                 min: 1,  
  32.                 max: 5,  
  33.                 value: 3,  
  34.                 change: onChange,  
  35.             });  
  36.   
  37.             function onChange(e) {  
  38.             $("#lblOldValue").text(e.oldValue)  
  39.             $("#lblNewValue").text(e.newValue)  
  40.             }  
  41.         });  
  42.         </script>  
  43.     </div>  
  44.   
  45.   
  46. </body>  
  47. </html>  
In the above code, you can see how Kendo Rating control is initialized with some properties:
  1. min – defines the minimum rating
  2. max – defines the maximum rating
  3. value – default rating value
  4. change- the change event which will be captured when there is a change in the rating
 
In a change event, we are capturing the old and new values from the control and it will be bound with label control
 
 
 

Summary

 
We have seen how to implement the kendo rating control using JQuery, and working with a change event in regards to rating control.