We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

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.

  1. Include the necessary scripts and themes required to render the Rating component.

HTML

  1. Then, include the “input” element in the <body> section that is to be converted as Rating component.

HTML

  1. Now, in the <script> section declare the rating component, with precision modes and values as illustrated in the following code example.

JavaScript

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

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

To set the “readOnly” property value at run time,

JavaScript

To get the “readOnly” property at runtime,

JavaScript

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

 
Article ID: Published Date: Last Revised Date: Platform: Control: .NET Framework: Product Version:
3034 12/11/2014 12/11/2014 JavaScript ejRating 4 12.1.0.43
Tags:
Did you find this information helpful?
Add Comment
You must log in to leave a comment

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.