This is a migrated thread and some comments may be shown as answers.

How to position tiles and get the desired layout

4 Answers 244 Views
TileList
This is a migrated thread and some comments may be shown as answers.
Rajesh
Top achievements
Rank 1
Rajesh asked on 07 Jan 2016, 03:45 PM

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

4 Answers, 1 is accepted

Sort by
0
Silviu
Top achievements
Rank 1
answered on 08 Jan 2016, 03:46 PM

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>

0
Accepted
Marin Bratanov
Telerik team
answered on 11 Jan 2016, 07:06 AM

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Silviu
Top achievements
Rank 1
answered on 11 Jan 2016, 09:51 AM

Thank you Marin.

That does it for me.

0
Rajesh
Top achievements
Rank 1
answered on 11 Jan 2016, 02:41 PM
Thank you Marin, works perfect.
Tags
TileList
Asked by
Rajesh
Top achievements
Rank 1
Answers by
Silviu
Top achievements
Rank 1
Marin Bratanov
Telerik team
Rajesh
Top achievements
Rank 1
Share this question
or