I am working on a new web interface and the tile list I used was 3 rows and grouped in 2 columns and looked nice and tidy as per the demos on the site. The quarterly update was applied (UI for ASP.NET AJAX v2016.1.113.45) to my project; but when viewing my tile list now instead of having 3 x 2 tiles then a gap then another 3 x 2 tile grouping. What I do get is 3 x 1 with a large gap and then 3 x 1, etc... (I have attached a file to show what I mean). But by manipulating the CSS class rtlistWrapper and making the width 11.8em instead of 22.8em this does sort of correct it; but is not what I want it to do.
The tiles are bound client side from an array of objects and I expect this process to organise the tiles correctly; but does seem that this is not the case.
My questions are; why has the looked changed even though I had only updated to the new telerik update? I would rather not use the CSS class manipulation to get it to look better; if there is another workaround or a setting in the Tile List control that I can implement to get it to render properly then that is the way I would prefer to go. Any advice is welcome.
5 Answers, 1 is accepted
Could you show me a small example of what you are doing where I can see the difference between the previous release (if you tell me its version that would also help) and the current? You can use this example as base so we can keep things runnable: http://docs.telerik.com/devtools/aspnet-ajax/controls/tilelist/data-binding/client-side-data-binding#simple-data-binding.
In the meantime I can suggest the following ideas:
- set the RenderMode property of the control to Classic to see if this makes a difference because it will fetch the older stylesheets that do not have elastic capabilities built in
- or, try setting a smaller font-size to the tile list (see here: http://docs.telerik.com/devtools/aspnet-ajax/controls/tilelist/mobile-support/elastic-capabilities) in case something goes amiss with the tile dimensions
As I said in the original post all worked and rendered perfectly (RenderMode was set to 'Auto') until I updated to the new version.
Where the array comes from does not really matter in this case.
Could you modify the sample from the article to showcase the problem so I can investigate it?
Also, do my other suggestions help?
Here is the HTML server tag implementation I use that has the problem....
<telerik:RadTileList ID="rtl" runat="server" RenderMode="Auto" TileRows="3" SelectionMode="Single" OnClientLoad="loadTopLevelTiles" OnClientTileDataBound="createTile" OnClientTileClicked="tileClicked">
<CommonTileBinding tiletype="RadContentTemplateTile" DataNameField="TileId" DataTitleTextField="DisplayName" DataGroupNameField="Grouping" DataBadgeValueField="bVal" />
<div style="height: 150px;">
<img class="#= imgStyle #" src="styles/#= inoniStyle #/images/large/#= IconPng #" />
<div style="padding-left: 3px;">
<div>#= TileTypeName #</div>
If switching to Classic resolves the issue, then the most likely reason for the problem is that the tiles in your case are wider than they should be. Here are some reasons that can cause this:
- too large a font-size set to the tile list or to the page (the Lightweight RenderMode is elastic, as the article I linked explains). To resolve such an issue, set a 14px font-size to the tile list explicitly or keep using the Classic RenderMode.
- some other CSS rule from the page that modifies the tiles (e.g., adds borders, padding or something similar that changes their size). To resolve such a problem you have three options:
- remove all custom CSS from the page and if the issue is gone, seek it in that CSS. The following article explains the approach, even though it is written for RadWindow: http://docs.telerik.com/devtools/aspnet-ajax/controls/window/troubleshooting/distorted-appearance.
- use the dev toolbar of the browser to find the offending rule and then fix it in the page CSS.
- increase the width of the rtlistWrapper to accommodate the larger tiles, e.g., to 25em.