Set Rating component with precisionIn 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.
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>
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>
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 dynamicallyTo 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 modeIn 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
|
This page will automatically be redirected to the sign-in page in 10 seconds.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
