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

Peek Not Displaying on iOS

2 Answers 22 Views
TileList
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 03 Sep 2013, 09:52 PM
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 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 04 Sep 2013, 11:29 AM
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.
0
David
Top achievements
Rank 1
answered on 04 Sep 2013, 06:42 PM
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.
Tags
TileList
Asked by
David
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
David
Top achievements
Rank 1
Share this question
or