Peek Not Displaying on iOS

3 posts, 0 answers
  1. David
    David avatar
    2 posts
    Member since:
    Jul 2013

    Posted 03 Sep 2013 Link to this post

    Hi everyone,

    We have a page setup with tiles that use the Peek functionality on mouseover. Peek works fine on desktop browsers we've tested (IE9/Firefox/Chrome) as well as the built in Android browser (long-hold to show Peek, in this case). On the iOS devices (6.1.3) we have tested on, though, Peek isn't occurring at all. We are generating all of our tiles programmatically:

    addTextTile = new RadTextTile()
    {
        NavigateUrl = "~/NavUrl.aspx"
    };
     
    addTextTile.Title.Text = "Tile Title";
    addTextTile.BackColor = Color.FromArgb(0, 0xBE, 0x20, 0x26);
    addTextTile.Badge.PredefinedType = TileBadgeType.Attention;
    addTextTile.Shape = TileShape.Wide;
    addTextTile.PeekTemplateSettings.HidePeekTemplateOnMouseOut = true;
    addTextTile.PeekTemplateSettings.ShowPeekTemplateOnMouseOver = true;
    addTextTile.PeekTemplateSettings.ShowInterval = 0;
    addTextTile.PeekContentContainer.ForeColor = Color.Black;
    addTextTile.PeekContentContainer.BackColor = Color.White;
    addTextTile.PeekContentContainer.BorderColor = Color.FromArgb(0, 0xBE, 0x20, 0x26);
    addTextTile.PeekContentContainer.BorderWidth = 5;
    addTextTile.PeekContentContainer.Controls.Add(new LiteralControl("<div>Peek stuff goes here.</div>"));
     
    LiveTiles.Add(addTextTile);


    Any assistance as to why Peek is not displaying on iOS would be greatly appreciated. Thank you.
  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 04 Sep 2013 Link to this post

    Hi David,

    Having the ShowPeekTemplateOnMouseOver=true  and ShowInterval=0 requires that the mouseover event is fired on the tile element in order to show the peek template. This cannot happen in iPad, however, because there are no mouse events there. While android browsers may raise them, this is not the case with Safari.

    What you can consider at this point is handling the click event (OnClientTileClicked), checking if you are under mobile safari (see here for browser checks) and showing the peek template programmatically, then hiding it with the desired timeout (by using the tile's client-side API).


    Regards,
    Marin Bratanov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. David
    David avatar
    2 posts
    Member since:
    Jul 2013

    Posted 04 Sep 2013 Link to this post

    Thank you for the guidance, Marin! I've worked around the problem now, employing the following:

    JavaScript:
    <script type="text/javascript">
        var oldOpenTile = null;
     
        function OnClientTileClicked(tileList, args) {
            var currentOpenTile = args.get_tile();
     
            if ($telerik.isMobileSafari == true) {
                if (oldOpenTile != null) {
                    oldOpenTile.hidePeekTemplate();
                }
                currentOpenTile.showPeekTemplate();
                oldOpenTile = currentOpenTile;
            }
        }
    </script>

    CSS for the emptyLinkSpan to navigate when clicking on the div:
    span.emptyLinkSpan {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
     
      /* edit: added z-index */
      z-index: 1;
     
      /* edit: fixes overlap error in IE7/8,
         make sure you have an empty gif */
      background-image: url('empty.gif');
    }

    C# TileGroup:
    <rad:RadTileList ID="TileList" runat="server" TileRows="3" OnClientTileClicked="OnClientTileClicked">
        <Groups>
            <rad:TileGroup>
            </rad:TileGroup>
        </Groups>
    </rad:RadTileList>

    And my tile generation code:
    addTextTile = new RadTextTile()
    {
        //Move this url to a span in the div shown on peek so that clicks don't redirect the user.
        //NavigateUrl = "~/NavUrl.aspx"
    };
     
    addTextTile.Title.Text = "Tile Title";
     
    NavigateUrl = "NavUrl.aspx";
     
    addTextTile.BackColor = Color.FromArgb(0, 0xBE, 0x20, 0x26);
    addTextTile.BorderColor = Color.FromArgb(0, 0xE2, 0x22, 0x27);
    addTextTile.Badge.PredefinedType = TileBadgeType.Attention;
    addTextTile.Shape = TileShape.Wide;
    addTextTile.PeekTemplateSettings.HidePeekTemplateOnMouseOut = true;
    addTextTile.PeekTemplateSettings.ShowPeekTemplateOnMouseOver = true;
    addTextTile.PeekTemplateSettings.ShowInterval = 0;
    addTextTile.PeekTemplateSettings.CloseDelay = 0;
    addTextTile.PeekContentContainer.ForeColor = Color.Black;
    addTextTile.PeekContentContainer.BackColor = Color.White;
    addTextTile.PeekContentContainer.BorderColor = Color.FromArgb(0, 0xBE, 0x20, 0x26);
    addTextTile.PeekContentContainer.BorderWidth = 5;
    addTextTile.PeekContentContainer.Controls.Add(new LiteralControl("<div style=\"width: 300px; height: 110px; overflow: hidden;\"><a href=\"" + NavigateUrl + "\">Peek stuff goes here<span class=\"emptyLinkSpan\"></span></a></div>"));
     
    TileList.Add(addTextTile);


    This causes it to behave as normal across devices. Adjusting the size of the div created on-peek to not cover the title and badge means that a user has to click higher than those areas to navigate, but it is an acceptable tradeoff.

    Thanks again for your help.
Back to Top