How to display rating control with exact precision and in non-editable mode?
Set Rating component with precision
In certain scenario, it is necessary to showcase the Rating component with exact precision values. For example, while rating a movie or a food item, you may require to set the rating with exact precision like 3.7, 4.2 (i.e., in decimal values).
Syncfusion JS Rating component provides you the option to set the precision for Rating component in the following modes.
ej.Rating.Full - You can only select the full shape of Rating.
ej.Rating.Half - You can select either half or full shape of the Rating.
ej.Rating.Exact – You can select the exact precision in the Rating component.
By default, the precision mode is “Full”.
The following steps explains how to set the precision modes during initialization.
- Include the necessary scripts and themes required to render the Rating component.
HTML
<head> <!--Contains the necessary theme for our componets--> <link href="http://cdn.syncfusion.com/js/web/flat-azure/ej.web.all-latest.min.css" rel="stylesheet" /> <!--dependency script files--> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery- easing/1.3/jquery.easing.min.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.js"></script> <!--contains the necessary scripts to render all the web components--> <script src="http://cdn.syncfusion.com/js/web/ej.web.all-latest.min.js"></script> </head>
- Then, include the “input” element in the <body> section that is to be converted as Rating component.
HTML
<div class="frame"> <table> <tr> <td valign="top">Full Precision : </td> <td> <input id="fullRating" type="text" class="rating" /> </td> </tr> <tr> <td valign="top">Half Precision : </td> <td> <input id="halfRating" type="text" class="rating" /> </td> </tr> <tr> <td valign="top">Exact Precision : </td> <td> <input id="exactRating" type="text" class="rating" /> </td> </tr> </table> </div>
- Now, in the <script> section declare the rating component, with precision modes and values as illustrated in the following code example.
JavaScript
<script type="text/javascript">
$(function () {
$("#fullRating").ejRating({ value: 4 });
$("#halfRating").ejRating({ precision: ej.Rating.Precision.Half, value: 3.5 });
$("#exactRating").ejRating({ precision: ej.Rating.Precision.Exact, value: 2.6 });
});
</script>
Output:
Figure 1: Rating component with precision
To change the precision mode in Run time or to set the precision mode dynamically
To change “precision” property value dynamically, you have to create an object for Rating control. Then access the “option” method using the created object to change the precision mode dynamically.
JavaScript
var fullRatingObj;
//Object for "fullRating" component is created
fullRatingObj = $("#fullRating").data("ejRating");
//precision mode for "fullRating" component is changed from "Full" to "Exact"
fullRatingObj.option("precision", ej.Rating.Precision.Exact)
Set Rating component in Non-Editable mode
In certain scenarios like online shopping, it is necessary to display only the rating of a product and not allowing you to interact with the Rating component. For these cases, Syncfusion JS Rating component provides an option to set the “readOnly” mode for the Rating Component. When you enable the “readOnly” property, the Rating component changes to non-editable mode. Therefore, you cannot interact with the control and can only see the rating.
To set the “readOnly” property during initialization,
JavaScript
<script type="text/javascript">
$(function () {
$("#fullRating").ejRating({ value: 4, readOnly:true });
$("#halfRating").ejRating({ precision: ej.Rating.Precision.Half, value: 3.5, readOnly: true });
$("#exactRating").ejRating({ precision: ej.Rating.Precision.Exact, value: 2.6, readOnly: true });
});
</script>
To set the “readOnly” property value at run time,
JavaScript
var fullRatingObj;
//Object for "fullRating" component is created
fullRatingObj = $("#fullRating").data("ejRating");
//sets the value for "readOnly" property as fasle
fullRatingObj.option("readOnly", false)
To get the “readOnly” property at runtime,
JavaScript
var fullRatingObj;
//Object for "fullRating" component is created
fullRatingObj = $("#fullRating").data("ejRating");
//gets the value of "readOnly"
fullRatingObj.option("readOnly")
You can refer to the following common user guide for JavaScript to know more about getting started of the components. Under each component, you are provided with “Concepts and features” section that explains about the features of the particular component.
http://help.syncfusion.com/web
You can also refer to the following class reference link for JavaScript that showcases all the properties, methods and events supported by each component.
http://help.syncfusion.com/cr/js
