RatingModel API in JavaScript (ES5) Rating API control

Interface for a class Rating

Properties

beforeItemRender

EmitType<RatingItemEventArgs>

Event callback that is raised before rendering each item.

<input id="rating"/>

import { Rating, RatingItemEventArgs } from '@syncfusion/ej2-inputs';
let rating: Rating = new Rating({
    value:3.0,
    beforeItemRender: (args: RatingItemEventArgs)=> {
       //Your required action here
    }
});
rating.appendTo('#rating');

created

EmitType<Event>

Event callback that is raised after rendering the rating.

onItemHover

EmitType<RatingHoverEventArgs>

Event callback that is raised when a user hovers over an item.

<input id="rating"/>

import { Rating, RatingHoverEventArgs } from '@syncfusion/ej2-inputs';
let rating: Rating = new Rating({
    value:3.0,
    onItemHover: (args: RatingHoverEventArgs)=> {
       //Your required action here
    }
});
rating.appendTo('#rating');

valueChanged

EmitType<RatingChangedEventArgs>

Event callback that is raised when the value is changed.

<input id="rating"/>

import { Rating, RatingChangedEventArgs } from '@syncfusion/ej2-inputs';
let rating: Rating = new Rating({
    value:3.0,
    valueChanged: (args: RatingChangedEventArgs )=> {
       alert("Previous Value:"+args.previousValue+"\nValue:"+args.value);
    }
});
rating.appendTo('#rating');

allowReset

boolean

Defines whether to show or hide the reset button in a rating component. When set to “true”, the reset button will be visible to the user, and they will be able to click it to reset the rating value to its default value.

<input id="rating"/>

import { Rating } from '@syncfusion/ej2-inputs';
let rating: Rating = new Rating({ 
    value:3.0,
    allowReset:true
});
rating.appendTo('#rating');

cssClass

string

Defines one or more CSS classes that can be used to customize the appearance of a rating component. One or more CSS classes to customize the appearance of the rating component, such as by changing its colors, fonts, sizes, or other visual aspects.

disabled

boolean

Defines whether a rating component is enabled or disabled. A disabled rating component may have a different visual appearance than an enabled one. When set to “true”, the rating component will be disabled, and the user will not be able to interact with it.

emptyTemplate

string

Defines the template that defines the appearance of each un-rated item in a rating component.

enableAnimation

boolean

Defines whether to add animation (to provide visual feedback to the user) when an item in a rating component is hovered. When set to “true”, an animation will be added when the user hovers their cursor over an item in the rating component.

enablePersistence

boolean

Enable or disable persisting component’s state between page reloads.

enableRtl

boolean

Enable or disable rendering component in right to left direction.

enableSingleSelection

boolean

Defines whether to select all the items before the selected item should be in selected state in a rating component. When set to “true”, only the selected item will be in the selected state, and all other items will be un-selected. When set to “false”, all items before the selected one will be in the selected state.

fullTemplate

string

Defines the template that defines the appearance of each rated item in a rating component.

 <input id="rating"/>

import { Rating } from '@syncfusion/ej2-inputs';
let rating: Rating = new Rating({ emptyTemplate:"<span class='e-icons e-close'></span>", fullTemplate:"<span class='e-icons e-check'></span>", value:3.0});
rating.appendTo('#rating');

itemsCount

number

Defines the specific number of items (symbols) in rating component. The rating component typically consists of a number of items, such as stars or other symbols, that represent the rating value.

labelPosition

string | LabelPosition

Defines the position of the label in rating component. The possible values are:

• Top
• Bottom
• Left
• Right

<input id="rating"/>

import { Rating, LabelPosition } from '@syncfusion/ej2-inputs';
var rating: Rating = new Rating({ value:3.0, showLabel:true, labelPosition:LabelPosition.Top });
rating.appendTo('#rating');

labelTemplate

string

Defines the template that used as label over default label of the rating. The current value of rating passed as context to build the content.

<input id="rating"/>
<script type="text/x-jsrender" id="labelTemplate">
        <span>${value} out of 5</span>
</script>

import { Rating } from '@syncfusion/ej2-inputs';
let rating: Rating = new Rating({ showLabel:true, labelTemplate:'#labelTemplate', value:3.0 });
rating.appendTo('#rating');

locale

string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

min

number

Defines the value that specifies minimum rating that a user can select. The value is set to 0, which means that the minimum possible rating is 0.

precision

string | PrecisionType

Defines the precision type of the rating which used to component the granularity of the rating, allowing users to provide ratings with varying levels of precision. The possible values are:

• Full
• Half
• Quarter
• Exact

<input id="rating"/><br/>

import { Rating, PrecisionType } from '@syncfusion/ej2-inputs';
var rating: Rating = new Rating({ value:2.5, precision:PrecisionType.Half });
rating.appendTo('#rating');

readOnly

boolean

Defines a boolean value that specifies whether the read-only mode is enabled for a rating component, which prevents the user from modifying or interacting with the rating value but allows them to read it.

showLabel

boolean

Defines a value that specifies whether to display a label that shows the current value of a rating. When set to “true”, a label will be displayed that shows the current value of the rating; otherwise false.

<input id="rating"/>

import { Rating } from '@syncfusion/ej2-inputs';
let rating: Rating = new Rating({ showLabel:true, value:3 });
rating.appendTo('#rating');

showTooltip

boolean

Defines a value that defines whether to show tooltip for the items. When set to “true”, show tooltip for the items.

tooltipTemplate

string

Defines the template that used as tooltip content over default tooltip content of the rating. The current value of rating passed as context to build the content.

<input id="rating"/>

import { Rating } from '@syncfusion/ej2-inputs';
let tooltipTemplate: Rating = new Rating({
    tooltipTemplate:'<span>${value} Star</span>',
    value: 3.0
});
tooltipTemplate.appendTo('#rating');

value

number

Defines the current rating value which used to display and update the rating selected by the user. Based on “PrecisionType”, users can select ratings with varying levels of precision. The “value” is a decimal value that ranges from the minimum value to the items count, as specified by the “min” and “itemsCount” properties of the rating.

 <input id="rating"/>

import { Rating } from '@syncfusion/ej2-inputs';
let rating: Rating = new Rating({ value:3.0 });
rating.appendTo('#rating');

visible

boolean

Defines a value that indicates whether the rating component is visible or hidden. When set to “true”, if the rating component is visible.