OnClientTileContentTemplateDataBound

Updated on Aug 24, 2026

This article provides information about the OnClientTileContentTemplateDataBound event.

The OnClientTileContentTemplateDataBound event is raised before rendering the ClientContentTemplate 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

OnClientTileContentTemplateDataBound 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 OnClientTileContentTemplateDataBound event to change theoriginal HTML upon a client-side logic.

Example 1: Using OnClientTileContentTemplateDataBound event.

ASP.NET

<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" Height="400"
	ClientDataSourceID="RadClientDataSource1" OnClientTileContentTemplateDataBound="OnClientTileContentTemplateDataBound">
	<DataBindings>
		<CommonTileBinding TileType="RadContentTemplateTile" DataNameField="ProductID" />
		<ContentTemplateTileBinding>
			<ClientContentTemplate>
		<div style="width:150px; height:150px; background-color:antiquewhite;">
			<h4 style="text-align:center; margin:0; min-height:40px;">#= ProductName #</h4>
			<table style="text-align:right; width:100%;">
				<tbody>
					<tr>
						<td>Price: </td>
						<td>#= UnitPrice #$</td>
					</tr>
					<tr>
						<td>Units In Stock: </td>
						<td>#= UnitsInStock #</td>
					</tr>
				</tbody>
			</table>
		</div>
			</ClientContentTemplate>
		</ContentTemplateTileBinding>
	</DataBindings>
</telerik:RadTileList>


<script type="text/javascript">
	function OnClientTileContentTemplateDataBound(sender, args) {
		var discontinued = args.get_dataItem().Discontinued;
		var originalHtml = args.get_html();

		if (discontinued) {
			args.set_html("<div style='position:relative;'>" +
				originalHtml +
				"<h4 style='text-align:center; background-color:red; position:absolute; bottom:0;'>Discontinued</h4>");
		}
	}
</script>

See Also

• Client-side Data Binding