Telerik UI for Windows 8 HTML

RadMosaicHubTile mimics the people hub tile on the Windows Phone home screen. It is grid of small tiles that individually flip themselves to display a random image. Every now and then, an image is selected and is displayed magnified by multiple tiles in one of the corners the mosaic tile.

Using RadMosaicHubTile

Since RadMosaicHubTile is designed to exclusively display images, it has a simple API that makes displaying images very easy. The only property that must be set is called picturesSource and its value should be a JavaScript array of strings representing image URLs. These could be both paths to local files or links to images hosted at a remote point. Below is a sample definition of a mosaic hub tile.

RadMosaicHubTile Copy imageCopy
<div id="mosaicHubTile" data-win-control="Telerik.UI.RadMosaicHubTile" data-win-options="{
            picturesSource: DefaultData.imagePaths

The data contained inside DefaultData.imagePaths is an array of image paths, as shown below:

Sample Data Copy imageCopy
imagePaths: [

Mosaic tile

By default, the images are shown individually in the small mosaic tiles. However, if the flipMode property of RadMosaicHubTile is set to "row", the component will display one large image and flip it in/out row by row. The default value of the property is "individual".

If you want to provide custom styling for each mosaic tile, you can assign a string value to the tileCssClass property.

To see all available configuration options, go to RadMosaicHubTile


When using RadMosaicHubTile in a WinJS.Binding.Template or any other scenario, in which the control is added to the DOM after it is already initialized, you must specify inline width and height for the host element. This is so because RadMosaicHubTile needs its parent element to have non-zero size when it is initialized.