Update caused tiles to not display properly

6 posts, 0 answers
  1. Matthew
    Matthew avatar
    8 posts
    Member since:
    Jun 2009

    Posted 14 Jan Link to this post

    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.

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 15 Jan Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Matthew
    Matthew avatar
    8 posts
    Member since:
    Jun 2009

    Posted 15 Jan in reply to Marin Bratanov Link to this post

    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.

  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 15 Jan Link to this post

    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
  6. Matthew
    Matthew avatar
    8 posts
    Member since:
    Jun 2009

    Posted 21 Jan in reply to Marin Bratanov Link to this post

    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.
     
  7. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 22 Jan Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017