Displaying Labels on Rating Stars in RadRating Control

Environment

Product	RadRating for ASP.NET AJAX
Version	all

Description

I want to use the RadRating control but need to display a label showing the value of each star. This KB article also answers the following questions:

• How can I show the value of each rating star in the RadRating control?
• Is it possible to display labels above stars in the RadRating control?
• Can I customize the appearance of labels on rating stars in the RadRating control?

Solution

To display a label for each star in the RadRating control, utilize the title attribute of each rating item. CSS can be used to show the value of each star above it. Here's a step-by-step guide on achieving this:

1. Apply the following CSS to display the value of the title attribute above each star:

css

.RadRating {
    padding-top: 20px;
}

.RadRating .rrtItem a::after {
    content: attr(title);
    position: absolute;
    top: -15px;
    display: block;
    width: 24px;
    text-align: center;
}

2. Add the RadRating control to your page and specify the Title attribute for each RadRatingItem:

aspx

<telerik:RadRating RenderMode="Lightweight" ID="RadRating2" runat="server" ItemCount="5" Value="3">
    <Items>
        <telerik:RadRatingItem Value="1"></telerik:RadRatingItem>
        <telerik:RadRatingItem Value="2"></telerik:RadRatingItem>
        <telerik:RadRatingItem Value="3"></telerik:RadRatingItem>
        <telerik:RadRatingItem Value="4"></telerik:RadRatingItem>
        <telerik:RadRatingItem Value="5"></telerik:RadRatingItem>
    </Items>
</telerik:RadRating>

This setup ensures that the value of each star is displayed above it, providing a clear visual indicator of the rating value. You can customize the CSS to fit your design requirements, such as adjusting the font size, color, or positioning of the labels.

See Also

• RadRating Overview
• CSS ::after Pseudo-element