Rating

The Rating component allows the user to rate something by clicking on a set of symbols on a numeric scale. This allows users to provide feedback or ratings for products, services, or content.

<input id="rating">

<script>
  let ratingObj: Rating = new Rating();
  ratingObj.appendTo('#rating');
</script>

Properties

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');

Defaults to false

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.

Defaults to ”

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.

Defaults to false

emptyTemplate

string | Function

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

Defaults to ”

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.

Defaults to true

enablePersistence

boolean

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

Defaults to false

enableRtl

boolean

Enable or disable rendering component in right to left direction.

Defaults to false

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.

Defaults to false

fullTemplate

string | Function

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');

Defaults to ”

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.

Defaults to 5

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');

Defaults to LabelPosition.Right

labelTemplate

string | Function

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');

Defaults to ”

locale

string

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

Defaults to ”

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.

Defaults to 0.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');

Defaults to PrecisionType.Full

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.

Defaults to false

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');

Defaults to false

showTooltip

boolean

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

Defaults to true

tooltipTemplate

string | Function

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');

Defaults to ”

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');

Defaults to 0.0

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.

Defaults to true

Methods

addEventListener

Adds the handler to the given event listener.

Returns void

appendTo

Appends the control within the given HTML element

Returns void

attachUnloadEvent

Adding unload event to persist data when enable persistence true

Returns void

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

destroy

Destroys the Rating instance.

Returns void

detachUnloadEvent

Removing unload event to persist data when enable persistence true

Returns void

getLocalData

Returns the persistence data for component

Returns any

getRootElement

Returns the route element of the component

Returns HTMLElement

handleUnload

Handling unload event to persist data when enable persistence true

Returns void

refresh

Applies all the pending property changes and render the component again.

Returns void

removeEventListener

Removes the handler from the given event listener.

Returns void

reset

Reset’s the value to minimum.

<input id="rating"/>
<button id="targetButton">reset </button> 

import { Rating } from "@syncfusion/ej2-inputs";
let ratingObj: Rating = new Rating({
  min:2.0,
  value: 3.0
});
ratingObj.appendTo("#rating");
document.getElementById("targetButton").addEventListener('click', function(): void => {
  ratingObj.reset();
});

Returns void

Inject

Dynamically injects the required modules to the component.

Returns void

Events

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');