Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

Rating / First Look

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:


  • Telerik RadRating


    Telerik RadRating is a flexible UI component that allows users to intuitively rate by selecting number of items [stars] from a predefined maximum number of items. The user can fully customize the control by configuring its orientation, rating precision, direction etc.

    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. The standard direction is from left to right (or from top to bottom if it has vertical orientation).
    • 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. In Single mode a single item [star] is marked as selected and in Continuous mode all items, starting from the first one, are marked as selected.
    • Rating Precision- the RadRating control enables the users to select their rating value precisely. By setting the Precision property to one of the following: Exact, Half, Item - you can rate by selecting: a precise part of the star [Exact], half a star [Half] or the whole star [Item].

Source Code

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

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <!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></title>
        <qsf:HeadTag ID="Headtag1" runat="server" />
        <style type="text/css">
            .divRatings
            {
                background-color: #fff3c8;
                color: #000;
                border: 1px solid #ffe58a;
                float: left;
                width: 100%;
                margin-bottom: 25px;
            }
        </style>
    </head>
    <body class="BODY">
        <form id="Form2" method="post" runat="server">
        <qsf:Header ID="Header1" runat="server" NavigationLanguage="c#" ShowSkinChooser="true" />
        <telerik:RadScriptManager ID="ScriptManager" runat="server" />
        <telerik:RadFormDecorator ID="RFD1" runat="server" DecoratedControls="Default" />
        <div class="divRatings">
            <asp:Panel ID="RadRating_wrapper" runat="server">
                <div style="padding: 15px; padding-left: 60px; float: left;">
                    The Godfather (1972)<telerik:RadRating ID="RadRating1" runat="server" ItemCount="5"
                        Value="3" SelectionMode="Continuous" Precision="Half" Orientation="Horizontal" />
                </div>
                <div style="padding: 15px; padding-left: 60px; float: left;">
                    Forrest Gump (1994)<telerik:RadRating ID="RadRating2" runat="server" ItemCount="5"
                        Value="3" SelectionMode="Continuous" Precision="Half" Orientation="Horizontal" />
                </div>
                <div style="padding: 15px; padding-left: 60px; float: left;">
                    The Sixth Sense (1999)<telerik:RadRating ID="RadRating3" runat="server" ItemCount="5"
                        Value="3" SelectionMode="Continuous" Precision="Half" Orientation="Horizontal" />
                </div>
            </asp:Panel>
        </div>
        <br />
        <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Configure Example"
            Expanded="true">
            <div style="float: left; padding-left: 60px;">
                <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>
                <br />
                <strong>Change RadRating Direction:</strong>
                <asp:RadioButtonList ID="rblDirection" runat="server" AutoPostBack="true" OnSelectedIndexChanged="rblDirection_SelectedIndexChanged">
                    <asp:ListItem Text="Standard" Selected="True" />
                    <asp:ListItem Text="Reversed" />
                </asp:RadioButtonList>
                <br />
            </div>
            <div style="float: left; padding-left: 80px;">
                <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>
                <br />
                <strong>Set RadRating Selection Mode:</strong>
                <asp:RadioButtonList ID="rblSelectionMode" runat="server" AutoPostBack="true" OnSelectedIndexChanged="rblSelectionMode_SelectedIndexChanged">
                    <asp:ListItem Text="Single" />
                    <asp:ListItem Text="Continuous" Selected="True" />
                </asp:RadioButtonList>
                <br />
            </div>
            <div style="float: left; padding-left: 80px;">
                <strong>Set RadRating Orientation:</strong>
                <asp:RadioButtonList ID="rblOrientation" runat="server" AutoPostBack="true" OnSelectedIndexChanged="rblOrientation_SelectedIndexChanged">
                    <asp:ListItem Text="Horizontal" Selected="True" />
                    <asp:ListItem Text="Vertical" />
                </asp:RadioButtonList>
                <br />
            </div>
        </qsf:ConfiguratorPanel>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="rblNumberStars" EventName="SelectedIndexChanged">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadRating_wrapper" />
                        <telerik:AjaxUpdatedControl ControlID="rblNumberStars" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="rblDirection" EventName="SelectedIndexChanged">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadRating_wrapper" />
                        <telerik:AjaxUpdatedControl ControlID="rblDirection" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="rblSelectionMode" EventName="SelectedIndexChanged">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadRating_wrapper" />
                        <telerik:AjaxUpdatedControl ControlID="rblSelectionMode" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="rblChoosePrecision" EventName="SelectedIndexChanged">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadRating_wrapper" />
                        <telerik:AjaxUpdatedControl ControlID="rblChoosePrecision" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="rblOrientation" EventName="SelectedIndexChanged">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadRating_wrapper" />
                        <telerik:AjaxUpdatedControl ControlID="rblOrientation" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <qsf:Footer runat="server" ID="Footer1" ShowCodeViewer="true" />
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451