Data Binding Overview

Since Q3 2013 the RadTileList control can be data bound in order to generate its tiles according to information from a datasource.

Since Q2 2014 the Telerik TileList can be data bound client-side using simple JS data source or using the RadClientDataSource control. You can find more information and explanations about this in the Client-side Data Binding article.

The datasource itself is an IEnumerable collection that contains the appropriate fields designated in the control's properties. The Supported Data Sources article offers more information on the subject.

Generally, tiles are generated in the order, in which the information is received (e.g. row by row from the datatable), and thus the data is responsible for the layout. The developer can, however, take steps to prepare the desired Groups order beforehand as explained in the Defining Structure article.

This article contains the following sections:

• Databinding Basics

• DataBinding Properties

• PeekTemplate Databinding

• RadContentTemplateTile ContentTemplate Databinding

Databinding Basics

Here is an example of a databound RadTileList. Note how all databinding settings are contained in the inner <DataBindings> tag:

<telerik:RadTileList RenderMode="Lightweight" runat="server" DataSourceID="SqlDataSource1" ID="RadTileList1" Width="634px" AppendDataBoundItems="false">
    <DataBindings>
        <CommonTileBinding TileType="RadImageTile" DataTitleTextField="UnitPrice" DataNameField="ProductName"
            DataGroupNameField="CategoryNames" DataNavigateUrlField="ProductUrls" />
        <TextTileBinding DataTextField="TextDescription" />
        <TilePeekTemplate> 
            Some text that is present in all tiles
            <div class="productNamePeek"><%# DataBinder.Eval(Container.DataItem, "ProductName") %></div>
        </TilePeekTemplate>
    </DataBindings>
</telerik:RadTileList>

The CommonTileBinding section offers the properties that affect all tiles and are common for all tile types.

There are three fallback properties that determine the most basic settings in case information from the datasource is missing for the TileType, Target and Shape.

Each specific tile type has its own inner tag that exposes specific properties for the given type, e.g. the TextTileBinding tag, responsible for a RadTextTile offers the DataTextField property which indicates the field from the datasource with the text for the tile.

The TilePeekTemplate inner tag offers the template that will be used for the Peek Template of each tile. Fields from the datasource can be evaluated here to add content specific for each tile, as well as content, common for all tiles (like the main HTML element wrapper that will provide dimensions, padding, fonts, etc.).

The AppendDataBoundItems property determines whether any existing tiles (from the markup or created programmatically) will be cleared when the control is databound. The tiles generated from the databinding will be added to the existing tiles if this property is set to true. The default value is false, so any existing tiles will be removed upon databinding.

DataBinding Properties

PeekTemplate Databinding

The PeekTemplate of the tiles can be defined by using the <TilePeekTemplate> (for server-side data binding) or the <ClientTilePeekTemplate> (for Client-side Data Binding) inner tag of the <DataBindings> tag.

An arbitrary HTML string can be defined there that will be used in all tiles. This can be used to create a common wrapper with dimensions,paddings, font sizes, backgrounds and other common visual settings, as well as common content for all tiles.

Databinding expressions can be evaluated there so that content from various fields in the datasource can be used there so that it is specific for each tile.

Here is a simple example of binding the peek template:

<telerik:RadTileList RenderMode="Lightweight" runat="server" DataSourceID="SqlDataSource1" ID="RadTileList1" Width="634px">
    <DataBindings>
        <CommonTileBinding TileType="RadImageTile" DataNameField="ProductName" DataShapeField="tileShapes" />
        <TilePeekTemplate>
            <div class="<%# DataBinder.Eval(Container.DataItem, "tileShapes") %>peekContainer">
                Some text that is present in all databound tiles peek templates
                <%# DataBinder.Eval(Container.DataItem, "ProductName") %>
            </div>
        </TilePeekTemplate>
    </DataBindings>
</telerik:RadTileList>

RadContentTemplateTile ContentTemplate Databinding

The ContentTemplate of a RadContentTemplateTile can be bound in a way similar to the PeekTemplate.Since this is specific to that tile type the ContentTemplate inner tag is available under the ContentTemplateTileBinding tag in DataBindings.

When it comes to client-side data binding, the ClientContentTemplate inner tag can be used to define its layout, as described in the Client-side Data Binding article.

In the template the developer can add arbitrary HTML and databinding expressions that will be used for all databound RadContentTemplateTiles.

For example:

<telerik:RadTileList RenderMode="Lightweight" runat="server" DataSourceID="SqlDataSource1" ID="RadTileList1" Width="634px">
    <DataBindings>
        <CommonTileBinding TileType="RadImageTile" DataNameField="ProductName" DataShapeField="tileShapes" />
        <ContentTemplateTileBinding>
            <ContentTemplate>
                <div class="<%# DataBinder.Eval(Container.DataItem, "tileShapes") %>contentContainer">
                    Some text that is present in all databound tiles' ContentTemplates
                    <%# DataBinder.Eval(Container.DataItem, "ProductName") %>
                </div>
            </ContentTemplate>
        </ContentTemplateTileBinding>
    </DataBindings>
</telerik:RadTileList>

See Also

• Overview

• Supported Data Sources

• TileGroup Object

• Defining Structure

• Tile Object