TileList - Responsive Behavior

Scan here to open the demo on your mobile device.

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

The Telerik ASP.NET TileList rearranges its elements on mobile, so that they fit best on the device screen. Depending on the viewport width, the layout can be:

  • Standard with columns and groups of tiles with rows that flow to the right
  • Tablet-oriented with tile groups appearing under one another, a maximum of four square tiles on a row and no explicit columns
  • Phone-oriented tile groups appear stacked under each other, there are two square tiles on a row and they will zoom to fit the device screen.

To enable the layout change for mobile devices, just set the RenderMode property of the TileList to Mobile and add the following meta tag to the page's head section:

< meta name = "viewport" content = "width=device-width, initial-scale=1" />

You can find more information and examples of the responsive capabilities of the RadTileList in its Responsive Layout help article.

See more mobile-optimized demos of Telerik controls in this responsive sample app.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Title="" Language="C#"  AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits=" TileList.Examples.ResponsiveBehavior.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-thin no-bg">
        <div class="qsf-overview-qr">
                <asp:Image ID="Image1" runat="server" ImageUrl="images/qr-tilelist.png" AlternateText="tlrk.it/1gZOH33" />
                <br />
                Scan here to open the demo on your mobile device.
            <a href="http://tlrk.it/1gZOH33" style="margin-left: 15px">tlrk.it/1gZOH33</a>

Find Assistance

Help Us Improve

Was this example helpful?