New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

WebForms Rating Overview

The Godfather (1972)
Forrest Gump (1994)
The Sixth Sense (1999)
  • Demo Configurator
Choose Number of Stars:
Change RadRating Direction:
Select Rating Precision:
Set RadRating Selection Mode:
Set RadRating Orientation:

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 120+ 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.

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
More about RadRating for ASP.NET AJAX
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ 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" %>
<!DOCTYPE html>
<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 no-bg">
<div class="divRatings">
        <asp:Panel ID="RadRating_wrapper" runat="server">
            <div style="padding: 15px; padding-left: 20px;">
                The Godfather (1972)<telerik:RadRating RenderMode="Lightweight" 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 RenderMode="Lightweight" 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 RenderMode="Lightweight" ID="RadRating3" runat="server" ItemCount="5"
                    Value="3" SelectionMode="Continuous" Precision="Half" Orientation="Horizontal">
                </telerik:RadRating>
            </div>
        </asp:Panel>
    </div>
    </div>
    <telerik:RadAjaxLoadingPanel runat="server" ID="LoadingPanel"></telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="LoadingPanel">
        <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>
    <qsf:ConfiguratorPanel ID="ConfigurationPanel1" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn runat="server" Size="Medium">
                    <strong>Choose Number of Stars:</strong>
                    <div class="spacer">
                        <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>
                    </div>
                    <strong>Change RadRating Direction:</strong>
                    <div class="spacer">
                        <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>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Size="Medium">
                    <strong>Select Rating Precision:</strong>
                    <div class="spacer">
                        <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>
                    </div>
                    <strong>Set RadRating Selection Mode:</strong>
                    <div class="spacer">
                        <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>
                    <strong>Set RadRating Orientation:</strong>
                    <div class="spacer">
                        <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:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance