This is a migrated thread and some comments may be shown as answers.

Update caused tiles to not display properly

5 Answers 120 Views
TileList
This is a migrated thread and some comments may be shown as answers.
Matthew
Top achievements
Rank 1
Matthew asked on 14 Jan 2016, 01:20 PM

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

Sort by
0
Marin Bratanov
Telerik team
answered on 15 Jan 2016, 07:57 AM

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:

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
0
Matthew
Top achievements
Rank 1
answered on 15 Jan 2016, 09:31 AM

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.

0
Marin Bratanov
Telerik team
answered on 15 Jan 2016, 10:50 AM

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
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
0
Matthew
Top achievements
Rank 1
answered on 21 Jan 2016, 04:16 PM

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.
 
0
Marin Bratanov
Telerik team
answered on 22 Jan 2016, 09:38 AM

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:

 

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
Tags
TileList
Asked by
Matthew
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Matthew
Top achievements
Rank 1
Share this question
or