OnClientTilePeekTemplateDataBound

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.

<style>
    .peekTemplateContainer.notInStock {
        background-color:red;
    }
</style>

<telerik:RadClientDataSource runat="server" ID="RadClientDataSource1" PageSize="8" AllowPaging="true">
    <DataSource>
        <WebServiceDataSourceSettings BaseUrl="http://demos.kendoui.com/service/">
            <Select Url="products" DataType="JSONP" />
        </WebServiceDataSourceSettings>
    </DataSource>
</telerik:RadClientDataSource>

<telerik:RadTileList RenderMode="Lightweight" runat="server" ID="RadTileList1" Width="1015px" Height="500px"
    ClientDataSourceID="RadClientDataSource1"
    OnClientTilePeekTemplateDataBound="OnClientTilePeekTemplateDataBound">
    <DataBindings>
        <CommonTileBinding TileType="RadTextTile" DataNameField="ProductName" DataBadgeValueField="UnitsInStock" />
        <TextTileBinding DataTextField="ProductName" />
        <ClientTilePeekTemplate>
                      <div class="peekTemplateContainer" >
                           <h3>#=ProductName#</h3>
                           <div class="peekTemplateTags">
                                Price: $#=UnitPrice#<br />
                           </div>
                      </div>
        </ClientTilePeekTemplate>
    </DataBindings>
</telerik:RadTileList>


<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');
            args.set_html(html);
        }
    }
</script>

See Also

• Client-side Data Binding

• Peek Template