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


This article demonstrates how the OnClientItemDataBound event can be used to manipulate the items of a RadRotator bound to a client-side data source.

The OnClientItemDataBound event is raised when an item in the Rotator is bound to the provided data source.

The event handler receives two parameters:

  1. The RadRotator instance that fired the event.

  2. An event arguments object containing the following methods:

    • get_dataItem() - returns the client-side data object to the Rotator item.

    • get_item() - returns the client-side object of the Rotator item.

Example 1 demonstrates how to use a data source field of the bound item to locate the index of the rendered Rotator item,using the OnClientItemDataBound event.

Example 1: Using the OnClientItemDataBound event's arguments in Client-side logic.

<telerik:RadClientDataSource runat="server" ID="RadClientDataSource1" PageSize="5" AllowPaging="true">
        <WebServiceDataSourceSettings BaseUrl="">
            <Select Url="Products" DataType="JSONP" />

<telerik:RadRotator RenderMode="Lightweight" runat="server" ID="Rotator" ClientDataSourceID="RadClientDataSource1" 
        <span class="productName">#= ProductName #</span>

<script type="text/javascript">
    function OnClientItemDataBound(sender, args) {
        var productID = args.get_dataItem().ProductID; // The ProductID is an existing field in the retrieved data object
        var itemsIndex = args.get_item().get_index();
        alert("Product with ID " + productID + " is bound to the item at position " + (itemsIndex + 1));

See Also

In this article