OnClientTileContentTemplateDataBound

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