Overview

The Godfather (1972)
Forrest Gump (1994)
The Sixth Sense (1999)
telerik ninja image
New to Telerik UI for ASP.NET AJAX?

Telerik UI for ASP.NET AJAX is professional grade UI library with 120+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

  • 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
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page Language="vb" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Rating.Overview.DefaultVB"CodeFile="DefaultVB.aspx.vb"  %>

<%@ 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