Edit this page

Render Modes

RadTileList has different render modes that can change the behavior of the control under different screen resolutions. They are exposed via the RenderMode property that has four possible values - Classic, Lightweight, Mobile and Auto.

The markup RadTileList uses is as lightweight and as semantic as possible. The change that may occur is to enable its responsive layout—if needed, JavaScript code modifies the tiles' containers and CSS applies a different layout to the control—or to enable its elastic design.

The possible options for the RenderMode property are:

  • Classic—this mode is the rendering that has been used before. It remains without changes and it is the default value of the property.

  • Lightweight—this mode emphasizes on semantic HTML and CSS3. It reduces the amount of markup the control renders and makes it easier to customize. This also reduces the number of image sprites required by the control. All of this decreases the overall size and complexity of each skin, including custom ones. Тhe control is elastic and font-icons are used instead of image sprites for the selection indicator and predefined badges.

  • Mobile - this mode enables the Responsive layout capabilities of the control.

  • Auto - this mode makes the control choose the appropriate rendering mode according to the browser. With RadTileList, Mobile will be set only under mobile devices.

important

RadTileList, as well as the other Telerik controls that utilize render modes, supports only one type of render mode per page. This includes mode being set for a standalone instance(s), and a programmatically created instance(s). All such controls must have the same RenderMode on a given page.This also includes instances from user controls and master pages.

note

RadTileList uses RadTile controls internally, so all their instances must have the same render mode. Tiles that are children of a TileList will inherit the RenderMode of the TileList.

Setting Render Mode

There are two ways to configure the rendering mode of the controls:

  • The RenderMode property in the markup or in the code-behind that can be used for a particular instance:

    ASP.NET

    <telerik:RadTileList ID="RadTileList1" runat="server" RenderMode="Mobile">
    </telerik:RadTileList>
    

    C#

    RadTileList1.RenderMode = Telerik.Web.UI.RenderMode.Mobile;
    

    VB

    RadTileList1.RenderMode = Telerik.Web.UI.RenderMode.Mobile
    
  • A global setting in the web.config file that will affect the entire application, unless a concrete value is specified for a given control instance:

    XML

    <appSettings>
        <add key="Telerik.Web.UI.TileList.RenderMode" value="Mobile" />
    </appSettings>
    

See Also