JavaScript API

ejRating

11 Jul 201821 minutes to read

The Rating control provides an intuitive Rating experience that enables you to select a number of stars that represent a Rating. You can configure the item size, orientation and the number of displayed items in the Rating control. You can also customize the Rating star image by using custom CSS.

Syntax

$(element).ejRating()

Example

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

    <script>
        // Create Rating
        $('#rating').ejRating();
    </script>

Requires

module:jQuery
module:jquery.easing.1.3.js
module:ej.core.js
module:ej.rating.js

Members

allowReset `boolean`

Enables the rating control with reset button.It can be used to reset the rating control value.

Default Value

true

Example

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

    <script>
        //To set allowReset API value during initialization
        $("#rating").ejRating({ allowReset: true });
    </script>

cssClass `string`

Specify the CSS class to achieve custom theme.

Default Value

””

Example

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

    <script>
        // Set the cssClass during initialization.
        $("#rating").ejRating({ cssClass: "gradient-lime" });
    </script>

enabled `boolean`

When this property is set to false, it disables the rating control.

Default Value

true

Example

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

    <script>
        //To set enabled API value during initialization
        $("#rating").ejRating({ enabled: true });
    </script>

enablePersistence `boolean`

Save current model value to browser cookies for state maintenance. While refresh the page Rating control values are retained.

Default Value

false

Example

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

    <script>
        //To set persist API value during initialization
        $("#rating").ejRating({ enablePersistence: true });
    </script>

height `string`

Specifies the height of the Rating control wrapper.

Default Value

null

Example

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

    <script>
        //To set height API value during initialization
        $("#rating").ejRating({ height: "50" });
    </script>

htmlAttributes `object`

Specifies the list of HTML attributes to be added to rating control.

Default Value

{}

Example

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

    <script>
        //To set htmlAttributes API value during initialization
        $("#rating").ejRating({ htmlAttributes:{"aria-label":"rating"} });
    </script>

incrementStep `number`

Specifies the value to be increased while navigating between shapes(stars) in Rating control.

Default Value

1

Example

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

    <script>
        //To set incrementStep API value during initialization
        $("#rating").ejRating({ incrementStep: 2 });
    </script>

maxValue `number`

Allow to render the maximum number of Rating shape(star).

Default Value

5

Example

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

    <script>
        //To set maxValue API value during initialization
        $("#rating").ejRating({ maxValue: 10 });
    </script>

minValue `number`

Allow to render the minimum number of Rating shape(star).

Default Value

0

Example

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

    <script>
        //To set minValue API value during initialization
        $("#rating").ejRating({ minValue: 3 });
    </script>

orientation `enum`

Specifies the orientation of Rating control. See Orientation

Name	Type	Default	Description
Horizontal	string	horizontal	Used to set Orientation as Horizontal
Vertical	string	vertical	Used to set Orientation as Vertical

Default Value

ej.Rating.Orientation.Horizontal

Example

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

    <script>
        //To set orientation API value during initialization
        $("#rating").ejRating({ orientation: ej.Rating.Orientation.Horizontal });
    </script>

precision `enum`

Helps to provide more precise ratings.Rating control supports three precision modes - full, half, and exact. See Precision

Name	Type	Default	Description
Exact	string	exact	Used to set Precision as Exact
Full	string	full	Used to set Precision as Full
Half	string	half	Used to set Precision as Half

Default Value

“full”

Example

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

    <script>
        //To set precision API value during initialization
        $("#rating").ejRating({ precision: ej.Rating.Precision.Half });
    </script>

readOnly `boolean`

Interaction with Rating control can be prevented by enabling this API.

Default Value

false

Example

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

    <script>
        //To set readOnly API value during initialization
        $("#rating").ejRating({ readOnly: true });
    </script>

shapeHeight `number`

To specify the height of each shape in Rating control.

Default Value

23

Example

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

    <script>
        //To set shapeHeight API value during initialization
        $("#rating").ejRating({ shapeHeight: 25 });
    </script>

shapeWidth `number`

To specify the width of each shape in Rating control.

Default Value

23

Example

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

    <script>
        //To set shapeWidth API value during initialization
        $("#rating").ejRating({ shapeWidth: 25 });
    </script>

showTooltip `boolean`

Enables the tooltip option.Currently selected value will be displayed in tooltip.

Default Value

true

Example

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

    <script>
        //To set showTooltip API value during initialization
        $("#rating").ejRating({ showTooltip: true });
    </script>

value `number`

To specify the number of stars to be selected while rendering.

Default Value

1

Example

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

    <script>
        //To set value API value during initialization
        $("#rating").ejRating({ value: 3 });
    </script>

width `string`

Specifies the width of the Rating control wrapper.

Default Value

null

Example

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

    <script>
        //To set width API value during initialization
        $("#rating").ejRating({ width: "200" });
    </script>

Methods

destroy()

Destroy the Rating widget all events bound will be unbind automatically and bring the control to pre-init state.

Example

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

    <script>
        // Create Rating
        $("#rating").ejRating();
        
        // Create Rating Object
        var ratingObj = $("#rating").data("ejRating");
        ratingObj.destroy();
        
    </script>

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

    <script>
        $("#rating").ejRating();
        // destroy the rating
        $("#rating").ejRating("destroy");
    </script>

getValue()

To get the current value of rating control.

Returns:

number

Example

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

    <script>
        // Create rating
        $("#rating").ejRating();
        
        // Create rating object
        var ratingObj = $("#rating").data("ejRating");

        // Get current value of rating
        ratingObj.getValue();

     </script>

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

    <script>
        $("#rating").ejRating();
        // To get the current value of rating
        $("#rating").ejRating("getValue");
    </script>

hide()

To hide the rating control.

Example

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

    <script>
       
        $("#rating").ejRating();
        
        //Create rating object
        var ratingObj = $("#rating").data("ejRating");

        // hides the rating control
        ratingObj.hide(); 
        
    </script>

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

    <script>
        $("#rating").ejRating();
        // hide the rating control
        $("#rating").ejRating("hide");
    </script>

refresh()

User can refresh the rating control to identify changes.

Example

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

    <script>
        $("#rating").ejRating();
        // Create rating control object
        var ratingObj = $("#rating").data("ejRating");
        // Refresh the rating control
        ratingObj.refresh(); 
    </script>

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

    <script>
        $("#rating").ejRating();
        // To refresh the rating values
        $("#rating").ejRating("refresh");
    </script>

reset()

To reset the rating value.

Example

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

    <script>
        $("#rating").ejRating();
        //  Create the rating object.
        var ratingObj = $("#rating").data("ejRating");
        
        // reset the rating values
        ratingObj.reset(); 
    </script>

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

    <script>
        $("#rating").ejRating();
        // reset the rating values
        $("#rating").ejRating("reset");
    </script>

setValue(value)

To set the rating value.

Name	Type	Description
value	string\|number	Specifies the rating value.

Example

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

    <script>
    
        $("#rating").ejRating();
        
        // Create the rating object
        var ratingObj = $("#rating").data("ejRating");
        
        // Set current value of rating
        ratingObj.setValue(4); 
        
    </script>

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

    <script>
        $("#rating").ejRating();
        // To set the current value of rating
        $("#rating").ejRating("setValue", 4);
    </script>

show()

To show the rating control

Example

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

    <script>

        $("#rating").ejRating();

        // Create rating object
        var ratingObj = $("#rating").data("ejRating");

        // shows the rating control
        ratingObj.show();

    </script>

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

    <script>
        $("#rating").ejRating();
        // show the rating control
        $("#rating").ejRating("show");
    </script>

Events

change

Fires when Rating value changes.

Name

Type

Description

argument

Object

Event parameters from rating

Name	Type	Description
value	number	returns the current value.
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the rating model
type	string	returns the name of the event
event	object	returns the mouse click event args values.

Example

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

    <script>
        //change event for rating
        $("#rating").ejRating({
            change: function (args) { }
        });
    </script>

click

Fires when Rating control is clicked successfully.

Name

Type

Description

argument

Object

Event parameters from rating

Name	Type	Description
value	number	returns the current value.
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the rating model
type	string	returns the name of the event
event	object	returns the mouse click event args values.

Example

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

    <script>
        //click event for rating
        $("#rating").ejRating({
            click: function (args) { }
        });
    </script>

create

Fires when Rating control is created.

Name

Type

Description

argument

Object

Event parameters from rating

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the rating model
type	string	returns the name of the event.

Example

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

    <script>
        //create event for rating
        $("#rating").ejRating({
            create: function (args) { }
        });
    </script>

destroy

Fires when Rating control is destroyed successfully.

Name

Type

Description

argument

Object

Event parameters from rating

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the rating model
type	string	returns the name of the event

Example

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

    <script>
        //destroy event for rating
        $("#rating").ejRating({
            destroy: function (args) { }
        });
    </script>

mouseout

Fires when mouse hover is removed from Rating control.

Name

Type

Description

argument

Object

Event parameters from rating

Name	Type	Description
value	number	returns the current value.
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the rating model
type	string	returns the name of the event
event	object	returns the mouse click event args values.

Example

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

    <script>
        //mouseout event for Rating
        $("#rating").ejRating({
            mouseout: function (args) { }
        });
    </script>

mousemove

Fires when mouse move is moving the Rating control.

Name

Type

Description

argument

Object

Event parameters from rating

Name	Type	Description
value	number	returns the current value.
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the rating model
type	string	returns the name of the event
event	object	returns the mouse click event args values.

Example

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

    <script>
        //mousemove event for Rating
        $("#rating").ejRating({
            mousemove: function (args) { }
        });
    </script>

mouseover

Fires when mouse hovered over the Rating control.

Name

Type

Description

argument

Object

Event parameters from rating

Name	Type	Description
value	number	returns the current value.
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the rating model
type	string	returns the name of the event
event	object	returns the mouse click event args values.
index	object	returns the current index value.

Example

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

    <script>
        //mouseover event for rating
        $("#rating").ejRating({
            mouseover: function (args) { }
        });
    </script>