How to position tiles and get the desired layout

5 posts, 1 answers
  1. Rajesh
    Rajesh avatar
    5 posts
    Member since:
    Sep 2015

    Posted 07 Jan Link to this post

    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

  2. Silviu
    Silviu avatar
    50 posts
    Member since:
    Feb 2015

    Posted 08 Jan Link to this post

    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>

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 11 Jan Link to this post

    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
  5. Silviu
    Silviu avatar
    50 posts
    Member since:
    Feb 2015

    Posted 11 Jan in reply to Marin Bratanov Link to this post

    Thank you Marin.

    That does it for me.

  6. Rajesh
    Rajesh avatar
    5 posts
    Member since:
    Sep 2015

    Posted 11 Jan Link to this post

    Thank you Marin, works perfect.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017