Rating

Controls

All Controls

Rating

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

RadRating - Telerik's ASP.NET Rating

The Godfather (1972)
Forrest Gump (1994)
The Sixth Sense (1999)
Configure Example
Choose Number of Stars:


Change RadRating Direction:

Select Rating Precision:


Set RadRating Selection Mode:

Set RadRating Orientation:

tlrk.it/17R6rvu To test the behavior of our controls on mobile devices, scan the QR code.

tlrk.it/17R6rvu

About RadRating for ASP.NET AJAX

Integrate a flexible option for rating your web content with Telerik RadRating for ASP.NET AJAX. Let your visitors share their opinion on your web posts by selecting the precise score with a single click in an intuitive way. Shape the control to your liking, add comments and average scoring with RadRating for maximum user interactivity.

RadRating and 80+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.


Get Started

  • Use Telerik’s Visual Studio Extensions (which you have installed together with the Telerik controls) to quickly create, upgrade and configure your Telerik UI projects. Save time by using the ready-to-use Visual Studio templates that cover common application scenarios.
  • Find the controls in need in your VS toolbox and use the Design-time surface and rich wizards to configure them quickly.
  • If you’d like to learn more about how to best implement the controls, browse the Telerik folder in your Start menu and use the shortcuts there to access the local demos, online documentation or open the sample examples app in Visual Studio.
  • If you like this particular Rating demo, you can use the following path to find it in the sample website application:
rating/examples/overview

Key Features

  • Horizontal/Vertical Orientation - depending on your needs, RadRating can be displayed horizontally or vertically on the page by setting the Orientation property
  • Direction - you can configure the RadRating to reverse its standard direction using its IsDirectionReversed property
  • Maximum Number of Items - by setting a value to the ItemCount property you can easily choose the maximum number of items the user can rate from
  • Selection Mode - it can be Single or Continuous
  • Rating Precision- the RadRating control enables the users to select their rating value precisely

Resources

C# VB
Show code in new window Demo isolation steps
<%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Rating.Overview.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Src="~/Rating/Examples/Overview/Info.ascx" TagName="Info" TagPrefix="qsf" %>
<!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>
    <title>Rating your ASP.NET website | RadRating control demo</title>
     <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
     <div class="divRatings">
          <asp:Panel ID="RadRating_wrapper" runat="server">
               <div style="padding: 15px; padding-left: 20px;">
                    The Godfather (1972)<telerik:RadRating ID="RadRating1" runat="server" ItemCount="5"
                         Value="3" SelectionMode="Continuous" Precision="Half" Orientation="Horizontal">
                    </telerik:RadRating>
               </div>
               <div style="padding: 15px; padding-left: 20px;">
                    Forrest Gump (1994)<telerik:RadRating ID="RadRating2" runat="server" ItemCount="5"
                         Value="3" SelectionMode="Continuous" Precision="Half" Orientation="Horizontal">
                    </telerik:RadRating>
               </div>
               <div style="padding: 15px; padding-left: 20px;">
                    The Sixth Sense (1999)<telerik:RadRating ID="RadRating3" runat="server" ItemCount="5"
                         Value="3" SelectionMode="Continuous" Precision="Half" Orientation="Horizontal">
                    </telerik:RadRating>
               </div>
          </asp:Panel>
     </div>
     <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Configure Example"
          Expanded="true" CssClass="qsf-conf-local">
          <div class="qsf-ib">
               <strong>Choose Number of Stars:</strong>
               <asp:RadioButtonList ID="rblNumberStars" runat="server" AutoPostBack="true" OnSelectedIndexChanged="rblNumberStars_SelectedIndexChanged">
                    <asp:ListItem Text="5 Items" Selected="True" Value="5"></asp:ListItem>
                    <asp:ListItem Text="7 Items" Value="7"></asp:ListItem>
                    <asp:ListItem Text="10 Items" Value="10"></asp:ListItem>
               </asp:RadioButtonList>
               <strong>Change RadRating Direction:</strong>
               <asp:RadioButtonList ID="rblDirection" runat="server" AutoPostBack="true" OnSelectedIndexChanged="rblDirection_SelectedIndexChanged">
                    <asp:ListItem Text="Standard" Selected="True"></asp:ListItem>
                    <asp:ListItem Text="Reversed"></asp:ListItem>
               </asp:RadioButtonList>
          </div>
          <div style="padding-left: 20px;" class="qsf-ib">
               <strong>Select Rating Precision:</strong>
               <asp:RadioButtonList ID="rblChoosePrecision" runat="server" AutoPostBack="true" OnSelectedIndexChanged="rblChoosePrecision_SelectedIndexChanged">
                    <asp:ListItem Text="Whole Item"></asp:ListItem>
                    <asp:ListItem Text="Half an Item" Selected="True"></asp:ListItem>
                    <asp:ListItem Text="Exact Precision"></asp:ListItem>
               </asp:RadioButtonList>
               <strong>Set RadRating Selection Mode:</strong>
               <asp:RadioButtonList ID="rblSelectionMode" runat="server" AutoPostBack="true" OnSelectedIndexChanged="rblSelectionMode_SelectedIndexChanged">
                    <asp:ListItem Text="Single"></asp:ListItem>
                    <asp:ListItem Text="Continuous" Selected="True"></asp:ListItem>
               </asp:RadioButtonList>
          </div>
          <div>
               <strong>Set RadRating Orientation:</strong>
               <asp:RadioButtonList ID="rblOrientation" runat="server" AutoPostBack="true" OnSelectedIndexChanged="rblOrientation_SelectedIndexChanged">
                    <asp:ListItem Text="Horizontal" Selected="True"></asp:ListItem>
                    <asp:ListItem Text="Vertical"></asp:ListItem>
               </asp:RadioButtonList>
          </div>
     </qsf:ConfiguratorPanel>
     <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
          <AjaxSettings>
               <telerik:AjaxSetting AjaxControlID="rblNumberStars" EventName="SelectedIndexChanged">
                    <UpdatedControls>
                         <telerik:AjaxUpdatedControl ControlID="RadRating_wrapper"></telerik:AjaxUpdatedControl>
                         <telerik:AjaxUpdatedControl ControlID="rblNumberStars"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
               </telerik:AjaxSetting>
               <telerik:AjaxSetting AjaxControlID="rblDirection" EventName="SelectedIndexChanged">
                    <UpdatedControls>
                         <telerik:AjaxUpdatedControl ControlID="RadRating_wrapper"></telerik:AjaxUpdatedControl>
                         <telerik:AjaxUpdatedControl ControlID="rblDirection"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
               </telerik:AjaxSetting>
               <telerik:AjaxSetting AjaxControlID="rblSelectionMode" EventName="SelectedIndexChanged">
                    <UpdatedControls>
                         <telerik:AjaxUpdatedControl ControlID="RadRating_wrapper"></telerik:AjaxUpdatedControl>
                         <telerik:AjaxUpdatedControl ControlID="rblSelectionMode"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
               </telerik:AjaxSetting>
               <telerik:AjaxSetting AjaxControlID="rblChoosePrecision" EventName="SelectedIndexChanged">
                    <UpdatedControls>
                         <telerik:AjaxUpdatedControl ControlID="RadRating_wrapper"></telerik:AjaxUpdatedControl>
                         <telerik:AjaxUpdatedControl ControlID="rblChoosePrecision"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
               </telerik:AjaxSetting>
               <telerik:AjaxSetting AjaxControlID="rblOrientation" EventName="SelectedIndexChanged">
                    <UpdatedControls>
                         <telerik:AjaxUpdatedControl ControlID="RadRating_wrapper"></telerik:AjaxUpdatedControl>
                         <telerik:AjaxUpdatedControl ControlID="rblOrientation"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
               </telerik:AjaxSetting>
          </AjaxSettings>
     </telerik:RadAjaxManager>
     <div class="qsf-overview-qr">
        <p>
            <asp:Image ID="Image1" runat="server" ImageUrl="~/Common/Images/QrCodesOverview/Rating.png" AlternateText="tlrk.it/17R6rvu" />
            To test the behavior of our controls on mobile devices, scan the QR code.
        </p>
        <a href="http://tlrk.it/17R6rvu">tlrk.it/17R6rvu</a>
    </div>
    </form>
</body>
</html>