Rating - Items Collection

Rating Bar
Pie Rating
Yes/No Rating Rating: 0
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

RadRating's Items Collection enables the user to individually customize every single item. By setting RadRatingItem's properties you can easily give diverse look and functionality to different items:

  • Value - the decimal value associated with the RadRatingItem.
  • ToolTip - the tooltip shown when the mouse pointer is hovered over the item.
  • CssClass - the CSS class applied to the item.
  • ImageUrl - the URL of the image displayed when item is not rated.
  • SelectedImageUrl - the URL of the image displayed when the item is selected (rated).
  • HoveredImageUrl - the URL of the image displayed when the item is not rated but the mouse pointer is over the item.
  • HoveredSelectedImageUrl - the URL of the image displayed when the item is selected (rated) and the mouse pointer is over the item.
  • ItemHeight(RadRating) - the height of every item. (The property is set to the RadRating control and not to the Item.)
  • ItemWidth (RadRating) - the width of every item. (The property is set to the RadRating control and not to the Item.)
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Rating.ItemsCollection.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-thin">
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="ratingBinary" EventName="Rate">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="lblBinaryRating" UpdatePanelRenderMode="Inline"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <table id="tableWrapper">
            <tr>
                <td>
                    <strong>Rating Bar</strong>
                    <div class="divBigRating">
                        <telerik:RadRating RenderMode="Lightweight" ID="ratingBar" runat="server" Orientation="Horizontal" ItemHeight="61px"
                            ItemWidth="11px" CssClass="ratingClass" Skin="Silk">
                            <Items>
                                <telerik:RadRatingItem Value="1" HoveredImageUrl="images/Rating1/1h.png" HoveredSelectedImageUrl="images/Rating1/1h.png"
                                    SelectedImageUrl="images/Rating1/1s.png" ImageUrl="images/Rating1/1.png" ToolTip="Very Low"></telerik:RadRatingItem>
                                <telerik:RadRatingItem Value="2" HoveredImageUrl="images/Rating1/2h.png" HoveredSelectedImageUrl="images/Rating1/2h.png"
                                    SelectedImageUrl="images/Rating1/2s.png" ImageUrl="images/Rating1/2.png" ToolTip="Low"></telerik:RadRatingItem>
                                <telerik:RadRatingItem Value="3" HoveredImageUrl="images/Rating1/3h.png" HoveredSelectedImageUrl="images/Rating1/3h.png"
                                    SelectedImageUrl="images/Rating1/3s.png" ImageUrl="images/Rating1/3.png" ToolTip="Medium"></telerik:RadRatingItem>
                                <telerik:RadRatingItem Value="4" HoveredImageUrl="images/Rating1/4h.png" HoveredSelectedImageUrl="images/Rating1/4h.png"
                                    SelectedImageUrl="images/Rating1/4s.png" ImageUrl="images/Rating1/4.png" ToolTip="Medium-High"></telerik:RadRatingItem>
                                <telerik:RadRatingItem Value="5" HoveredImageUrl="images/Rating1/5h.png" HoveredSelectedImageUrl="images/Rating1/5h.png"
                                    SelectedImageUrl="images/Rating1/5s.png" ImageUrl="images/Rating1/5.png" ToolTip="High"></telerik:RadRatingItem>
                                <telerik:RadRatingItem Value="6" HoveredImageUrl="images/Rating1/6h.png" HoveredSelectedImageUrl="images/Rating1/6h.png"
                                    SelectedImageUrl="images/Rating1/6s.png" ImageUrl="images/Rating1/6.png" ToolTip="Very High"></telerik:RadRatingItem>
                            </Items>
                        </telerik:RadRating>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <strong>Pie Rating</strong>
                    <div class="divSmallRating">
                        <telerik:RadRating RenderMode="Lightweight" ID="ratingPie" runat="server" SelectionMode="Single" ItemHeight="20px"
                            ItemWidth="20px" CssClass="ratingClass2" Skin="Silk">
                            <Items>
                                <telerik:RadRatingItem Value="0" ToolTip="0%" HoveredImageUrl="images/Rating3/1h.png"
                                    HoveredSelectedImageUrl="images/Rating3/1h.png" SelectedImageUrl="images/Rating3/1s.png"
                                    ImageUrl="images/Rating3/1.png"></telerik:RadRatingItem>
                                <telerik:RadRatingItem Value="1" ToolTip="25%" HoveredImageUrl="images/Rating3/2h.png"
                                    HoveredSelectedImageUrl="images/Rating3/2h.png" SelectedImageUrl="images/Rating3/2s.png"
                                    ImageUrl="images/Rating3/2.png"></telerik:RadRatingItem>
                                <telerik:RadRatingItem Value="2" HoveredImageUrl="images/Rating3/3h.png" HoveredSelectedImageUrl="images/Rating3/3h.png"
                                    SelectedImageUrl="images/Rating3/3s.png" ImageUrl="images/Rating3/3.png" ToolTip="50%"></telerik:RadRatingItem>
                                <telerik:RadRatingItem Value="3" ToolTip="75%" HoveredImageUrl="images/Rating3/4h.png"
                                    HoveredSelectedImageUrl="images/Rating3/4h.png" SelectedImageUrl="images/Rating3/4s.png"
                                    ImageUrl="images/Rating3/4.png"></telerik:RadRatingItem>
                                <telerik:RadRatingItem Value="4" HoveredImageUrl="images/Rating3/5h.png" HoveredSelectedImageUrl="images/Rating3/5h.png"
                                    SelectedImageUrl="images/Rating3/5s.png" ImageUrl="images/Rating3/5.png" ToolTip="100%"></telerik:RadRatingItem>
                            </Items>
                        </telerik:RadRating>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <strong>Yes/No Rating</strong>
                    <asp:Label ID="lblBinaryRating" runat="server" Font-Size="Medium"></asp:Label>
                    <div class="divSmallRating">
                        <telerik:RadRating RenderMode="Lightweight" ID="ratingBinary" runat="server" Orientation="Horizontal" SelectionMode="Single"
                            ItemHeight="20px" ItemWidth="20px" CssClass="ratingClass1" OnRate="ratingBinary_Rate"
                            AutoPostBack="true" Skin="Silk">
                            <Items>
                                <telerik:RadRatingItem Value="-1" HoveredImageUrl="images/Rating2/downh.png" HoveredSelectedImageUrl="images/Rating2/downh.png"
                                    SelectedImageUrl="images/Rating2/downh.png" ImageUrl="images/Rating2/down.png"
                                    ToolTip="No"></telerik:RadRatingItem>
                                <telerik:RadRatingItem Value="0" HoveredImageUrl="images/Rating2/0h.png" HoveredSelectedImageUrl="images/Rating2/0h.png"
                                    SelectedImageUrl="images/Rating2/0.png" ImageUrl="images/Rating2/0.png" ToolTip="Reset Current Rating"></telerik:RadRatingItem>
                                <telerik:RadRatingItem Value="1" HoveredImageUrl="images/Rating2/uph.png" HoveredSelectedImageUrl="images/Rating2/uph.png"
                                    SelectedImageUrl="images/Rating2/uph.png" ImageUrl="images/Rating2/up.png" ToolTip="Yes"></telerik:RadRatingItem>
                            </Items>
                        </telerik:RadRating>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?