Edit this page

OnClientItemDataBound

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">
    <DataSource>
        <WebServiceDataSourceSettings BaseUrl="http://demos.kendoui.com/service/">
            <Select Url="Products" DataType="JSONP" />
        </WebServiceDataSourceSettings>
    </DataSource>
</telerik:RadClientDataSource>

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

<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));
    }
</script>

See Also