How to position tiles and get the desired layout

[Rajesh]

Hi,

My page has 10 tiles (4 square, 4 wide and 2 custom sized), I need to arrange the 4 square one below another and in the next column 4 wide one below another, followed by 2 custom tiles in the next column (layout attached). I am not able to position the square tiles one below another, and I read few posts which says that 2 square tiles act as one wide. Is there a way I can achieve the desired layout as shown in the attachment, please let me know.

Thanks,

Rajesh

[Silviu]

I am also interested in the same as above.

 As you can see from the attachments, the order is wrong, using the code below I get 4 tiles on row 1 and 2 tiles on row 2 instead of 3 on each row.

 What is the correct way of adding tiles?

<telerik:RadTileList ID="radTileList" runat="server" Height="350" TileRows="2" Skin="Glow" ScrollingMode="None" Visible="false">
                    <Groups>
                        <telerik:TileGroup>
                            <telerik:RadImageAndTextTile runat="server" Skin="Glow" ImageUrl="~/Images/icon1.png" ID="radTile1" Enabled="true" >
                                <Title Text="Tile 1"></Title>
                            </telerik:RadImageAndTextTile>
                            <telerik:RadImageAndTextTile runat="server" Skin="Glow" ImageUrl="~/Images/icon2.png" ID="radTile2" Enabled="true">
                                <Title Text="Tile 2"></Title>
                            </telerik:RadImageAndTextTile>
                            <telerik:RadImageAndTextTile runat="server" Skin="Glow" ImageUrl="~/Image/icon3.png" ID="radTile3" Enabled="true" >
                                <Title Text="Tile 3"></Title>
                            </telerik:RadImageAndTextTile>
                            <telerik:RadImageAndTextTile runat="server" Skin="Glow" ID="radTile4" ImageUrl="~/Images/icon4.png" Enabled="true">
                                <Title Text="Tile 4"></Title>
                            </telerik:RadImageAndTextTile>
                            <telerik:RadImageAndTextTile runat="server" Skin="Glow" ImageUrl="~/Images/icon5.png" ID="radTile5" Enabled="true" >
                                <Title Text="Tile 5"></Title>
                            </telerik:RadImageAndTextTile>
                            <telerik:RadImageAndTextTile runat="server" Skin="Glow" ImageUrl="~/Images/icon6.png" ID="radTile6" Enabled="true" >
                                <Title Text="Tile 6"></Title>
                            </telerik:RadImageAndTextTile>
                        </telerik:TileGroup>
                    </Groups>
                </telerik:RadTileList>

[Marin Bratanov]

Hi guys,

@Rajesh:

You can use standalone tiles so you can have custom dimensions and layout:http://demos.telerik.com/aspnet-ajax/tilelist/examples/standalonetiles/defaultcs.aspx. From a layout point of view the tiles are div elements with float: left and position: relative.

Here is a basic example of such a layout that you can use as base for creating your page (e.g., tweak it according to your preferences, extract the needed CSS into classes, duplicate it as many times as needed, etc.):

<div style="width: 800px;">
    <div style="width: 480px; float: left;">
        <telerik:RadTextTile runat="server" ID="RadTextTile1" Shape="Square" Text="first square"></telerik:RadTextTile>
        <telerik:RadTextTile runat="server" ID="RadTextTile2" Shape="Wide" Text="first wide"></telerik:RadTextTile>
        <telerik:RadTextTile runat="server" ID="RadTextTile3" Shape="Square" Text="second square"></telerik:RadTextTile>
        <telerik:RadTextTile runat="server" ID="RadTextTile4" Shape="Wide" Text="second wide"></telerik:RadTextTile>
    </div>
    <div style="float: left;">
        <telerik:RadTextTile runat="server" ID="RadTextTile5" Text="first custom" Width="310px" Height="310px"></telerik:RadTextTile>
    </div>
</div>

 

@Silviu:

You can set the TileRows property to 3 yet while you use a TileList you will be constrained by the layout it must have. A TileList uses columns first, then rows, so 3x3 may not be possible and would depend on the way you use groups and the Rows/Height you set. Thus, you may need to switch to standalone tiles to create custom layouts.

On the provided images - the layout is correct for the provided settings and to achieve the custom layout you want I suggest avoiding a tilelist because this layout does not fit in its concept.

For example:

<div style="width: 490px;">
    <telerik:RadImageAndTextTile runat="server" Skin="Glow" ImageUrl="~/Images/icon1.png" ID="radTile1" Enabled="true">
        <Title Text="Tile 1"></Title>
    </telerik:RadImageAndTextTile>
    <telerik:RadImageAndTextTile runat="server" Skin="Glow" ImageUrl="~/Images/icon2.png" ID="radTile2" Enabled="true">
        <Title Text="Tile 2"></Title>
    </telerik:RadImageAndTextTile>
    <telerik:RadImageAndTextTile runat="server" Skin="Glow" ImageUrl="~/Image/icon3.png" ID="radTile3" Enabled="true">
        <Title Text="Tile 3"></Title>
    </telerik:RadImageAndTextTile>
    <telerik:RadImageAndTextTile runat="server" Skin="Glow" ID="radTile4" ImageUrl="~/Images/icon4.png" Enabled="true">
        <Title Text="Tile 4"></Title>
    </telerik:RadImageAndTextTile>
    <telerik:RadImageAndTextTile runat="server" Skin="Glow" ImageUrl="~/Images/icon5.png" ID="radTile5" Enabled="true">
        <Title Text="Tile 5"></Title>
    </telerik:RadImageAndTextTile>
    <telerik:RadImageAndTextTile runat="server" Skin="Glow" ImageUrl="~/Images/icon6.png" ID="radTile6" Enabled="true">
        <Title Text="Tile 6"></Title>
    </telerik:RadImageAndTextTile>
</div>

Regards,

Marin Bratanov
Telerik

[Silviu]

Thank you Marin.

That does it for me.

[Rajesh]

Thank you Marin, works perfect.