Edit this page


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.

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

<telerik:RadTileList RenderMode="Lightweight" runat="server" ID="RadTileList1" Height="400"
    ClientDataSourceID="RadClientDataSource1" OnClientTileContentTemplateDataBound="OnClientTileContentTemplateDataBound">
        <CommonTileBinding TileType="RadContentTemplateTile" DataNameField="ProductID" />
        <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%;">
                        <td>Price: </td>
                        <td>#= UnitPrice #$</td>
                        <td>Units In Stock: </td>
                        <td>#= UnitsInStock #</td>

<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>");

See Also

Is this article helpful? No Yes
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article