Update caused tiles to not display properly

[Matthew]

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.

[Marin Bratanov]

Hi Matthew,

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

Regards,

Marin Bratanov
Telerik

[Matthew]

Hi, the previous version of the framework was v2015.3.1111.45. Thanks for the link to the basic client side data binding example; this is the same as I am using except I bind to an array of javascript objects returned from a web service call using JSON (using jquery ajax call to web service).

As I said in the original post all worked and rendered perfectly (RenderMode was set to 'Auto') until I updated to the new version.

[Marin Bratanov]

Hi Matthew,

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?

Regards,

Marin Bratanov
Telerik

[Matthew]

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">
            <DataBindings>
                <CommonTileBinding tiletype="RadContentTemplateTile" DataNameField="TileId" DataTitleTextField="DisplayName" DataGroupNameField="Grouping" DataBadgeValueField="bVal" />
                <ContentTemplateTileBinding>
                    <ClientContentTemplate>
                        <div style="height: 150px;">
                            <img class="#= imgStyle #" src="styles/#= inoniStyle #/images/large/#= IconPng #" />
                        </div>
                    </ClientContentTemplate>
                </ContentTemplateTileBinding>
                <ClientTilePeekTemplate>
                    <div style="padding-left: 3px;">
                        <div>#= TileTypeName #</div>
                    </div>
                </ClientTilePeekTemplate>
            </DataBindings>
            <Groups>
                <telerik:TileGroup Name="Tools"></telerik:TileGroup>
                <telerik:TileGroup Name="Results"></telerik:TileGroup>
                <telerik:TileGroup Name="Actions"></telerik:TileGroup>
            </Groups>
        </telerik:RadTileList>

However, if I change the renermode from 'Auto' to 'Classic' then the tile list renders correctly. I have tested this with Ie,Edge, Firefox and Chrome and all have the same issue.

 

[Marin Bratanov]

Hello Matthew,

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.

 

Regards,

Marin Bratanov
Telerik