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.

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