Hello,
I have a RadTileList on my webform with total of 12 tiles in asp.net project and I have set the TileColumns=4 so I get to see 3 rows of tiles but the tiles order goes from Top to Bottom from first row but I would like it to go from Left to Right.
I did see the "RightToLeft" option but that was not what I wanted to do.
I would like the tile numbers 1,2,3,4 to go left to right on the first row then continue 5,6,7,8 in the second row and the likes.
Would it be possible to add such features to set the Tile Direction Vertical/Horizontal?
Thanks
Currently the mouse wheel scrolls a fixed amount of pixels. A property should allow the developer to control this speed. Leave your comments below on the way this property should be implemented (e.g. an enum or an integer from a given range).
Scrolling by touching the white space between the tiles is possible. If you disable selection scrolling can work as expected. Note that for tablets the scrolling container must be an element outside of the tilelist. A workaround that fixes the majority of the issues is available in the attached sample.
Hello,
I would like to be able to move tiles between two RadTileLists. This may be through drag and drop or through an external button click.
If you use the code from the following help article: http://docs.telerik.com/devtools/aspnet-ajax/controls/tilelist/how-to/responsive-layout-and-dynamic-height#responsive-layout-and-dynamic-height and set ScrollingMode property of the RadTileList control to Accelerated after re-sizing the window it is possible to scroll vertically. http://screencast.com/t/KtCjTSAy2558
Until this feature is implemented, you can use the TileDataBound event (http://docs.telerik.com/devtools/aspnet-ajax/controls/tilelist/server-side-programming/events/ontiledatabound) to set properties of the tiles and their child controls.
A workaround is to have the tile list use the Default skin and change the tiles classes with JavaScript in the OnClientTileDataBound event
<asp:ScriptManager ID="Scriptmanager1" runat="server" />
<telerik:RadSkinManager runat="server" ID="rsm1" Skin="mySkinName"></telerik:RadSkinManager>
<telerik:RadClientDataSource runat="server" ID="RadClientDataSource1" PageSize="8" AllowPaging="true">
<DataSource>
<WebServiceDataSourceSettings BaseUrl="http://demos.kendoui.com/service/">
<Select Url="products" DataType="JSONP" />
</WebServiceDataSourceSettings>
</DataSource>
</telerik:RadClientDataSource>
<telerik:RadTileList ID="rtl" runat="server" RenderMode="Classic" TileRows="3" SelectionMode="Multiple" OnClientTileDataBound="createTile" OnClientTileClicked="tileClicked" EnableEmbeddedSkins="false" Skin="Default" ClientDataSourceID="RadClientDataSource1">
<DataBindings>
<CommonTileBinding TileType="RadContentTemplateTile" DataNameField="ProductID" DataTitleTextField="ProductName" DataBadgeValueField="UnitPRice" Shape="Square" />
<ContentTemplateTileBinding>
<ClientContentTemplate>
<div style="height: 150px; background-image: url('#= ProductName #');">
<div style="padding: 5px 8px 3px 8px;">
<div>#= ProductName #</div>
<div style="font-size:0.8em; width: 134px; word-wrap:break-word; padding-bottom: 8px;">#= UnitsInStock #</div>
<div class="field pad" >
<img src="images/email.png" title="Can be emailed">
</img>
</div>
<div class="field pad">
<img src="images/SMS.png" title="Can receive SMS">
</img>
</div>
<div class="field pad">
<img src="images/noentry.png" title="Has a restricted password">
</img>
</div>
</div>
</div>
</ClientContentTemplate>
</ContentTemplateTileBinding>
<ClientTilePeekTemplate>
<div style="height: 150px; background-image: url('styles/#= ProductName #/images/large/user.jpg');">
<div style="padding: 5px 8px 5px 8px; width: 134px; height: 140px; background-color: azure;">
<div>#= ProductName #</div>
<div class="field" style="font-size:0.8em; width: 100px;">#= ProductID #</div>
<div class="field" style="font-size:0.8em; width: 34px; text-align: right;">#= ProductID #</div>
<div class="field" style="font-size:0.8em; width: 100px;">#= ProductName #</div>
<div class="field" style="font-size:0.8em; width: 34px; text-align: right;">#= ProductName #</div>
<div class="field" style="font-size:0.8em; width: 100px;">#= UnitPrice #</div>
<div class="field" style="font-size:0.8em; width: 34px; text-align: right;">#= UnitPrice #</div>
<div class="field" style="font-size:0.8em; width: 100px;">#= UnitsInStock #</div>
<div class="field" style="font-size:0.8em; width: 34px; text-align: right;">#= Discontinued #</div>
</div>
</div>
</ClientTilePeekTemplate>
</DataBindings>
</telerik:RadTileList>
<script>
function createTile(sender, args) {
var tileElem = $telerik.$(args.get_tile().get_element());
tileElem.removeClass("RadTile_Default").addClass("RadTile_mySkinName");
}
function tileClicked() {
}
</script>
Sometime it would be better to have a layout that is not in the metro style. Where the default is: 1 2 5 6 3 4 7 8 There are scenarios where: 1 2 3 4 5 6 7 8 would work much better. The tile list fits in metro style apps well but has other uses where that style is not really desired. There has been interest in this for the past couple years in the forum. Thanks Michael