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.

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.

The name of the TileGroup the tile belongs to. Tiles with the same value in this field will be placed in the same group. Groups will be created in the order in which they are met in the datasource unless the developer has predefined the control's structure.

The Shape of the Tile. Must be supported by the tile and is case-sensitive. If the value of the field is not a valid shape name, the tile will fall back to the value defined in the Shape databinding property . If none is defined it will use the default shape for a RadBaseTile, which is Square.

DataTargetField

string

The Target of the Tile. Must be supported by the tile and is case-sensitive. If the value of the field is not a valid target name, the tile will fall back to the value defined in the Target databinding property . The target can be the name of any frame present on the page, so arbitrary strings are allowed. If the value is not one of the predefined options (_blank, _top, _parent, _self), navigation may not occur of there isn't a frame with the designated name.

DataTileTypeField

string

The Type of the Tile. Must be supported by the tile and is case-sensitive. If the value of the field is not a valid type, the tile will fall back to the value defined in the TileType databinding property.

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.

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.