radtilelist

[Radian]

i want to set radtilelist in sequence either horizontally or vertically.  Cn u pls tell me. 

[Radian]

Actually iafter drag and drop one image to particular location. Remaining images must be move in sequence that can be vertical or horizontal......So pls hlp me

[Danail Vasilev]

Hi,

RadTileList mimics the Windows 8 start menu and thus tiles flow down then to the right.

In case you need the tiles to go to the right, you can consider standalone tiles: http://demos.telerik.com/aspnet-ajax/tilelist/examples/standalonetiles/defaultcs.aspx. From a layout point of view, they are divs with float: left and display: inline-block. You can generate them programmatically by looping through your data.

Regards,
Danail Vasilev
Telerik

[Brian Azzi]

I'm really struggling with this... no matter what I do, my tile list is populating data first across, then down in columns whenever there is more than one row. I'm not getting a consistent data flow like the demos where it installs across a row, then to another row, and so on...

I see this... say the width is wide enough for 3 tiles... as I insert tiles:

1 2 3

 

1 3 4

2

 

1 3 5

2 4

 

Instead of what everyone expects:

 

1 2 3

4 5

 

So frustrating! 

I'm databinding on the client using the RadClientDataSource. Just to be sure I also duplicated my sample data into a javascript variable and directly bound that as well. AHHH.

[Stanimir]

Hello Brian,

Test if adding the following css sample to the bottom of the page where the tile list is loaded will solve your problem:

.RadTileList {
        height: auto !important;
        width: auto !important;
        overflow-x: hidden;
    }

    .RadTileList .rtlistGroup, .RadTileList .rtlistGroupSeparator, .RadTileList .rtlistWrapper {
        float: none;
        clear: both;
    }

    .RadTileList .rtlistGroupSeparator {
        width: auto;
        height: 30px;
        margin: 10px 0;
    }

    .RadTileList .rtlistWrapper {
        width: auto !important;
    }

    .RadTileList .rtlistScrollWrapper {
        width: auto !important;
    }

This is is modified version of the css customization of the RadTileList, when it is rendered in Mobile RenderMode and the screen is with max-width 768 px. Here is the original css:

@media only screen and (max-width: 768px) {
  .RadTileList.rtlistResponsive {
    height: auto !important;
    width: auto !important;
    overflow-x: hidden; }
    .RadTileList.rtlistResponsive .rtlistGroup, .RadTileList.rtlistResponsive .rtlistGroupSeparator, .RadTileList.rtlistResponsive .rtlistWrapper {
      float: none;
      clear: both; }
    .RadTileList.rtlistResponsive .rtlistGroupSeparator {
      width: auto;
      height: 30px;
      margin: 10px 0; }
    .RadTileList.rtlistResponsive .rtlistWrapper {
      width: 100vw; }
    .RadTileList.rtlistResponsive .rtlistScrollWrapper {
      width: auto !important; }}

If this does not help, please provide me with a code sample and step by step scenario explaining the current and expected behavior. I will review it and advise you further.

Regards,
Stanimir
Telerik by Progress

[Brian Azzi]

That seems to have done the trick! (At least with my dummy test data... I can clearly see that it now flows horizontally first).

Thanks!!! Much appreciated. As a suggestion, it would be really nice to have a property of some sort to enable this layout type in a future version. : )   

[Stanimir]

Hi Brian,

Thank you for the suggestion about the property. I am not sure if we will create such one as we will be bound to officially  support this configuration. However I think that we will be able to create a public resource showcasing this scenario.


Regards,
Stanimir
Telerik by Progress