OnClientTilePeekTemplateDataBound

Updated on Aug 24, 2026

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.

ASP.NET

<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