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

Data Binding

DataSourceID

RadRating can be easily bound to any of the ASP.NET DataSource controls (SqlDataSource, LinqDataSource, and etc.). All you need to do is set the Rating's DataSourceID property to the ID of the DataSource control.

This Rating control is bound to a SqlDataSource control, and has its ItemBinding.ValueField property is mapped to the "TimesRated" column of the Data Source.

RadRating.DataSource

This RadRating control is bound in the code-behind using the RadRating.DataSource property. The Value and ToolTip properties of the Items are mapped to the respective fields of the DataSource, by using the RadRating.ItemBinding.ValueField and RadRating.ItemBinding.ToolTipField properties.

DbValue
    

The RadRating provides property, DbValue, that sets the rating value in a database-friendly way. This example shows this property in action.

We have RadRotator bound to a set of images, and for every image there is a Rating control that displays the respective rating.

  • Demo Configurator
  • RadRating.DataSource Settings

Change ToolTipFormatString (move the mouse pointer over the Rating to see the change)

RadRating's Items collection can be populated with data from a given data source. To bound the control to any of the ASP.NET Data Source controls, all you need to set its DataSourceID property to the ID of the respective DataSource control. If you need to programmatically populate the Rating, you should use the RadRating.DataSource property.

The RadRatingItem's ToolTip and the Value property can be mapped to desired columns/fields of the Data Source, through the RadRating.ItemBinding.ToolTipField and RadRating.ItemBinding.ValueField respectively. The RadRating.ItemBinding.ToolTipFormatString should be used to control how data bound to the ToolTip property is displayed.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Rating.DataBinding.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" />
    <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" Skin="Sunset" MinDisplayTime="500">
    </telerik:RadAjaxLoadingPanel>
    <div class="demo-containers">
        <div class="demo-container size-thin">
            <telerik:RadAjaxPanel ID="RadAjaxPanel2" runat="server" LoadingPanelID="LoadingPanel1">
                <div>
                    <strong style="padding-bottom: 20px; display: block;">DataSourceID</strong>
                    <telerik:RadRating RenderMode="Lightweight" ID="RadRating3" runat="server" DataSourceID="SqlDataSource1" AutoPostBack="true"
                        OnRate="RadRating_Rate" Skin="WebBlue">
                        <ItemBinding ValueField="TimesRated"></ItemBinding>
                    </telerik:RadRating>
                    <asp:Label ID="lblRating" runat="server" ForeColor="Green"></asp:Label>
                    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
                        SelectCommand="SELECT DISTINCT TOP(7) TimesRated FROM Vehicles WHERE (VehicleTypeID = '1') ORDER BY TimesRated">
                    </asp:SqlDataSource>
                    <p>
                        <strong>RadRating</strong> can be easily bound to any of the ASP.NET DataSource
                        controls (SqlDataSource, LinqDataSource, and etc.). All you need to do is set the
                        Rating's <strong>DataSourceID</strong> property to the ID of the DataSource control.
                    </p>
                    <p>
                        This Rating control is bound to a SqlDataSource control, and has its ItemBinding.<strong>ValueField</strong>
                        property is mapped to the "TimesRated" column of the Data Source.
                    </p>
                </div>
            </telerik:RadAjaxPanel>
        </div>
        <div class="demo-container size-thin">
            <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="LoadingPanel1">
                <div>
                    <strong style="padding-bottom: 20px; display: block;">RadRating.DataSource</strong>
                    <telerik:RadRating RenderMode="Lightweight" ID="RadRating2" runat="server" Skin="WebBlue" AutoPostBack="true"
                        OnRate="RadRating_Rate">
                    </telerik:RadRating>
                    <asp:Label ID="Label1" runat="server" ForeColor="Green"></asp:Label>
                    <p>
                        This <strong>RadRating</strong> control is bound in the code-behind using the <strong>
                            RadRating.DataSource</strong> property. The <strong>Value</strong> and <strong>ToolTip</strong>
                        properties of the Items are mapped to the respective fields of the DataSource, by
                        using the RadRating.ItemBinding.<strong>ValueField</strong> and RadRating.ItemBinding.<strong>ToolTipField</strong>
                        properties.
                    </p>
                </div>
            </telerik:RadAjaxPanel>
        </div>
        <div class="demo-container size-thin">
            <div>
                <strong style="padding-bottom: 20px; display: block;">DbValue</strong>
                <telerik:RadRotator RenderMode="Lightweight" ID="rotatorRating" runat="server" Height="175px" ItemHeight="160px"
                    Width="151px" ItemWidth="151px">
                    <ItemTemplate>
                        <asp:Image ID="Image1" runat="server" ImageUrl='<%# DataBinder.Eval(Container.DataItem, "Path") %>'
                            AlternateText='<%# VirtualPathUtility.GetFileName(DataBinder.Eval(Container.DataItem, "Path").ToString()) %>'>
                        </asp:Image>
                        <span>Rating:</span>
                        <telerik:RadRating RenderMode="Lightweight" ID="RadRating1" runat="server" ItemCount="7" ReadOnly="true" Skin="Simple"
                            DbValue='<%# DataBinder.Eval(Container.DataItem, "Value") %>'>
                        </telerik:RadRating>
                    </ItemTemplate>
                </telerik:RadRotator>
                <p>
                    The <strong>RadRating</strong> provides property, <strong>DbValue</strong>, that
                    sets the rating value in a database-friendly way. This example shows this property
                    in action.
                </p>
                <p>
                    We have RadRotator bound to a set of images, and for every image there is a Rating
                    control that displays the respective rating.
                </p>
            </div>
        </div>
    </div>
    <qsf:ConfiguratorPanel ID="demoConfigurator" runat="server">
        <Views>
            <qsf:View Title="RadRating.DataSource Settings">
                <p>
                    Change <strong>ToolTipFormatString</strong> (move the mouse pointer over the Rating
                    to see the change)
                </p>
                <asp:RadioButtonList AutoPostBack="true" ID="rbListToolTipFormatString" runat="server"
                    OnSelectedIndexChanged="rbListToolTipFormatString_SelectedIndexChanged">
                    <asp:ListItem Text="None" Value="" Selected="True"></asp:ListItem>
                    <asp:ListItem Text="Rating: {0}" Value="Rating: {0}"></asp:ListItem>
                    <asp:ListItem Text="The Item's ToolTip is '{0}'" Value="The Item's ToolTip is '{0}'"></asp:ListItem>
                </asp:RadioButtonList>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance