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

Client-Side Events

RadRating:
Event log
  • Demo Configurator
  • Set RadRating Selected Value:
  •  

This example demonstrates the client-side functionality of the RadRating control.

See the help section for detailed information about RadRating's client-side events and API.

Client-side events:

  • OnClientLoad - raised when the Rating control is initialized.
  • OnClientRating - raised when the user is rating and before the new value is set to the control.
  • OnClientRated - raised after the user has rated.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Rating.ClientSideFunctionality.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" />
    <script src="scripts.js" type="text/javascript"></script>
    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

        <script type="text/javascript">
            function getRatingObject() {
                return $find("<%=RadRating1.ClientID %>");
            }

            function getTextValue() {
                return $get("<%=txtValue.ClientID %>");
            }

            function getCancelCheckBox() {
                return $get("<%=cbCancel.ClientID %>");
            }
        </script>
    </telerik:RadScriptBlock>
</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 size-thin">
        <div>
            <span style="line-height: 250%;">RadRating:</span>
            <telerik:RadRating RenderMode="Lightweight" ID="RadRating1" runat="server" Precision="Exact" SelectionMode="Continuous"
                OnClientLoad="OnClientLoad" OnClientRating="OnClientRating" OnClientRated="OnClientRated"
                ItemCount="7">
            </telerik:RadRating>
            <br />
        </div>
    </div>
    <qsf:EventLogConsole ID="EventLogConsole1" runat="server" AllowClear="true"></qsf:EventLogConsole>
    <qsf:ConfiguratorPanel runat="server">
        <Views>
            <qsf:View>
                <ul class="fb-group">
                    <li>
                        <asp:CheckBox ID="cbCancel" runat="server" Text="Cancel OnClientRating (If checked the rating does not occur.)"></asp:CheckBox></li>
                    <li>
                        <asp:CheckBox ID="cbReadOnly" runat="server" onclick="SetReadOnly();" Text="Make RadRating ReadOnly"></asp:CheckBox></li>
                    <li>Set RadRating Selected Value:</li>
                    <li>
                        <qsf:TextBox ID="txtValue" runat="server" Width="100"></qsf:TextBox>&nbsp;
            <qsf:Button ID="btnValue" runat="server" OnClientClicked="setValue" AutoPostBack="false"
                Text="Set">
            </qsf:Button>
                    </li>
                </ul>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance