Skip to content

Latest commit

 

History

History
108 lines (87 loc) · 4.21 KB

customize-tile-size-tilelist.md

File metadata and controls

108 lines (87 loc) · 4.21 KB
title page_title description slug tags published position
Customize Tile Size in TileList
Customize Tile Size in TileList - RadTileList
Check our Web Forms article about Customize Tile Size in TileList.
tilelist/how-to/customize-tile-size-in-tilelist
custom, tile, size, dimension, wide, square, tilelist
true
4

Customize Tile Size in TileList

This article shows an approach to set up custom dimensions for the Tiles in a TileList by using only CSS and preserving the built-in drag and drop functionality.

With RadTileList, [drag and drop]({%slug tilelist/functionality/drag-and-drop%}) works only when Tile sizes (Square and Wide) and the [tile group]({%slug tilelist/functionality/group-title%}) have the same proportions as the predefined ones.

tip If you are using [Lightweight rendering]({%slug tilelist/mobile-support/render-modes%}), tile sizes are calculated in em in order to provide [elastic capabilities]({%slug tilelist/mobile-support/elastic-capabilities%}). With this RenderMode you can easily change the tile sizes by just using a larger size font, like in this example:

caption Example 1: Enlarge Tiles in TileList using font-size.

<div style="font-size:22px;">
  <telerik:RadTileList runat="server" ID="RadTileList2" TileRows="4"
          EnableDragAndDrop="true" RenderMode="Lightweight">
      <Groups>
          <telerik:TileGroup Name="Group1" Title="Group 1">
              <telerik:RadTextTile runat="server" Text="Tile 1" Shape="Square" />
              <telerik:RadTextTile runat="server" Text="Tile 2" Shape="Wide" />
          </telerik:TileGroup>
      </Groups>
  </telerik:RadTileList>
</div>

These formulas can help you determine how to calculate the size of the Wide tile and the tile group based on the desired Square tile size (in pixels):

x = SquareTileWidth = SquareTileHeight
WideTileWidth = 2 * x + 10
WideTileHeight = x 
TileGroupWidth = x + 20

You can also define larger tiles by using tile's CssClass property to decorate their width and height in a CSS rule, but you should still take into account the width of the Wide tile, which can be considered as the maximum width for a tile.

In the example below, the base tile size (SquareTileWidth from the formulas above) is 200px. And you can examine how the other tiles and the tile group are proportionally changed according to this base.

caption Example 2: CSS to apply custom sizes.

<style>
    .CustomSizeTiles .RadTile.rtileSquare {
        /* SquareTileWidth */
        width: 200px;
    }

    .CustomSizeTiles .RadTile.rtileWide {
        /* WideTileWidth  */
        width: 410px;
    }

    .CustomSizeTiles .RadTile.rtileWide,
    .CustomSizeTiles .RadTile.rtileSquare {
        /* SquareTileHeight and WideTileHeight */
        height: 200px;
    }

    .CustomSizeTiles.RadTileList .rtlistWrapper {
        /* TileGroupWidth */
        width: 420px;
    }

    .CustomSizeTiles .RadTile.rtileSquare.BigSquare {
        /* Bigger square sizes */
        width: 410px;
        height: 410px;
    }
</style>

<telerik:RadTileList runat="server" ID="RadTileList1" EnableDragAndDrop="true" TileRows="4" CssClass="CustomSizeTiles">
    <Groups>
        <telerik:TileGroup Name="Group1" Title="Group 1">
            <telerik:RadTextTile runat="server" Text="Tile 1" Shape="Square" />
            <telerik:RadTextTile runat="server" Text="Tile 2" Shape="Wide" />
        </telerik:TileGroup>
        <telerik:TileGroup Name="Group2" Title="Group 2">
            <telerik:RadTextTile runat="server" Text="Tile 3" Shape="Square" />
            <telerik:RadTextTile runat="server" Text="Tile 4" Shape="Wide" />
        </telerik:TileGroup>
        <telerik:TileGroup Name="Group3" Title="Group 3">
            <telerik:RadTextTile runat="server" Text="Tile 5" CssClass="BigSquare" />
        </telerik:TileGroup>
    </Groups>
</telerik:RadTileList>

See Also

  • [CSS Classes]({%slug tilelist/tiles/appearance-and-styling/css-classes%})
  • [Drag and Drop]({%slug tilelist/functionality/drag-and-drop%})
  • [Group Title]({%slug tilelist/functionality/group-title%})