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


This article demonstrates how the OnClientTileDataBound event can be used to further configure the Tile elements via its client-side API.

The OnClientTileDataBound event is raised when the tile is bound to the fetched data.

The event handler receives two arguments:

  1. the RadTileList object that fired the event

  2. an event arguments object that exposes the following methods

OnClientTileDataBound event arguments object

Name Return type Arguments Description
get_dataItem() object Gets the data source object.
get_tile() object Gets the client-side object of the bound tile.

Example 1 demonstrates how to use the OnClientTileDataBound event to configure the PeekTemplateSettings client-side. The result of the sample code is shown in Figure 1.

Figure 1: Shows the configured Peek Template


Example 1: Using OnClientTileDataBound event to define Peek Template settings.

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

<telerik:RadTileList RenderMode="Lightweight" runat="server" ID="RadTileList1" Height="400" 
    ClientDataSourceID="RadClientDataSource1" OnClientTileDataBound="OnClientTileDataBound">
        <CommonTileBinding TileType="RadTextTile" DataNameField="ProductID" />
        <TextTileBinding DataTextField="ProductName" />
            <p>Price: $#=UnitPrice#</p>
            <span style="color:red;">This is the peek template</span>

<script type="text/javascript">
    function OnClientTileDataBound(sender, args) {
        var tile = args.get_tile();


See Also

In this article