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
    • 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