Events in EJ2 TypeScript Rating control

29 Aug 20235 minutes to read

This section describes the rating events that will be triggered when appropriate actions are performed. The following events are available in the rating control.

beforeItemRender

The rating control triggers the beforeItemRender event before rendering each rating item. The RatingItemEventArgs passed as an event argument provides the details of the item to be rendered.

import { Rating, RatingItemEventArgs } from '@syncfusion/ej2-inputs';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

// Initialize the Rating control.
let rating: Rating = new Rating({
    beforeItemRender: (args: RatingItemEventArgs)=> {
       //Your required action here
    }
});

// Render initialized Rating.
rating.appendTo('#rating');

created

The rating control triggers the created event when the rendering of the rating control is completed.

import { Rating } from '@syncfusion/ej2-inputs';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

// Initialize the Rating control.
let rating: Rating = new Rating({
    created: ()=> {
       //Your required action here
    }
});

// Render initialized Rating.
rating.appendTo('#rating');

onItemHover

The rating control triggers the onItemHover event when the rating item is hovered. The RatingHoverEventArgs passed as an event argument provides the details of the hovered item.

import { Rating, RatingHoverEventArgs } from '@syncfusion/ej2-inputs';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

// Initialize the Rating control.
let rating: Rating = new Rating({
    onItemHover: (args: RatingHoverEventArgs)=> {
       //Your required action here
    }
});

// Render initialized Rating.
rating.appendTo('#rating');

valueChanged

The rating control triggers the valueChanged event when the value of the rating is changed. The RatingChangedEventArgs passed as an event argument provides the details when value is changed.

import { Rating, RatingChangedEventArgs } from '@syncfusion/ej2-inputs';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

// Initialize the Rating control.
let rating: Rating = new Rating({
    valueChanged: (args: RatingChangedEventArgs )=> {
       //Your required action here
    }
});

// Render initialized Rating.
rating.appendTo('#rating');

Below example demonstrates the valueChanged event of the Rating control.

import { Rating, RatingChangedEventArgs } from '@syncfusion/ej2-inputs';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

// Initialize the Rating control.
let rating: Rating = new Rating({
    valueChanged: (args: RatingChangedEventArgs )=> {
       alert("Previous Value:"+args.previousValue+"\nValue:"+args.value);
    }
});

// Render initialized Rating.
rating.appendTo('#rating');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Rating</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="TypeScript Rating Control" />
    <meta name="author" content="Syncfusion" />
    <link href="styles.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div class='wrap'>
            <input id="rating"/>
        </div>
    </div>
</body>
</html>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.wrap {
  margin: 50px auto;
  text-align: center;
}