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

Binding to Telerik ClientDataSource

You can data bind RadRotator on the client to a RadClientDataSource control since Q2 2014. This functionality is provided out of the box through the server-side ClientDataSourceID property which also has its client-side counterpart - the set_clientDataSourceID() method.

Client-side data binding means fewer postbacks, easier integration with various data services and a more flexible client-side development.

The layout of the bound Rotator items is defined in the ClientTemplate inner tag. Their design is created with HTML code where the fetched data source fields are inserted with the following syntax - #= datasourceFieldName #.

In the simplest setup, you only need to provide an array of JSON literals to the RadRotator and define the desired template.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Title="" Language="C#"  AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Rotator.DataBinding.ClientSideBinding.ClientDataSourceBinding.DefaultCS" %>

<!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>
</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">
        <telerik:RadClientDataSource runat="server" ID="RadClientDataSource1">
            <DataSource>
                <WebServiceDataSourceSettings BaseUrl="https://demos.telerik.com/kendo-ui/service/">
                    <Select Url="Products" DataType="JSONP" />
                </WebServiceDataSourceSettings>
            </DataSource>
        </telerik:RadClientDataSource>
        <telerik:RadRotator RenderMode="Lightweight" runat="server" ID="RadRotator1" ClientDataSourceID="RadClientDataSource1" 
                            RotatorType="Buttons" Width="856" ItemWidth="200" Height="200" ItemHeight="200" OnClientDataBound="rotator_clientDataBound">
            <ClientTemplate>
                <div class="itemWrapper">
                    <span class="productName">#= ProductName #</span>
                    <span class="productPrice">Price: #= kendo.toString(UnitPrice, "c") #</span>
                    <img width="200" height="200" src="../../../../../Img/Northwind/Products/#= ProductID #.jpg" alt="Alternate Text" />
                </div>
            </ClientTemplate>
        </telerik:RadRotator>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance