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


This article provides information about the OnClientTilePeekTemplateDataBound event.

The OnClientTilePeekTemplateDataBound event is raised before rendering the Peek Template in the browser.

The event handler receives two arguments:

  1. the RadTileList object that fired the event

  2. an event arguments object that exposes the following methods

OnClientTilePeekTemplateDataBound event arguments object

Name Return type Arguments Description
get_dataItem() object Gets the data source object.
get_html() string Gets the HTML code that is going to be rendered.
set_html(string) string Sets the HTML that is going to be rendered.

Example 1 demonstrates how to use the OnClientTilePeekTemplateDataBound event to change the original Peek Template HTML upon a client-side logic.

Example 1: Using OnClientTilePeekTemplateDataBound event.

    .peekTemplateContainer.notInStock {

<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" Width="1015px" Height="500px"
        <CommonTileBinding TileType="RadTextTile" DataNameField="ProductName" DataBadgeValueField="UnitsInStock" />
        <TextTileBinding DataTextField="ProductName" />
                      <div class="peekTemplateContainer" >
                           <div class="peekTemplateTags">
                                Price: $#=UnitPrice#<br />

<script type="text/javascript">
    function OnClientTilePeekTemplateDataBound(sender, args) {
        var dataItem = args.get_dataItem(),
             html = args.get_html();

        if (!dataItem.UnitsInStock) {
            html = html.replace('class="peekTemplateContainer', 'class="peekTemplateContainer notInStock');

See Also

In this article