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

ListView Links to Parent, then Close

3 Answers 149 Views

PopOver (Mobile)

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

Jon asked on 28 Jan 2013, 03:08 PM

Hello,

I have a Popover with a ListView of links. I would like someone to be able to click on a link, have it close and it navigates to the page. Here is the code that I have so far, I have it opening in the parent, but it doesn't close.

<%@ Master Language="C#" AutoEventWireup="false" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

[[code removed]]

</head>

<body>

<a href="../index.html">Back</a>

<div data-role="view" data-layout="overview-layout" id="overview-content" data-title="Title">

<form id="form1" runat="server">

<ul data-role="listview" data-style="inset" data-type="group">

<li>

<ul>

<li>

<asp:ContentPlaceHolder ID="mainContent" runat="server">

</asp:ContentPlaceHolder>

</li>

</ul>

</li>

</ul>

</form>

<div data-role="popover" id="popover-people" data-popup='{"height": 230, "width": 350}'>

<div data-role="view" data-title="People">

<div data-role="header">

<div data-role="navbar">

<span data-role="view-title"></span>

<a data-role="button" data-align="right" data-click="closeParentPopover">Close</a>

</div>

<ul data-role="listview">

<li><a data-target="_top" href="default1.aspx" data-click="closeParentPopover">Link 1</a></li>

<li><a data-target="_top" href="default2.aspx" data-click="closeParentPopover">Link 2</a></li>

<li><a data-target="_top" href="default3.aspx" data-click="closeParentPopover">Link 3</a></li>

<li><a data-target="_top" href="default4.aspx" data-click="closeParentPopover">Link 4</a></li>

<li><a data-target="_top" href="default5.aspx" data-click="closeParentPopover">Link 5</a></li>

<li><a data-target="_top" href="default6.aspx" data-click="closeParentPopover">Link 6</a></li>

</ul>

</div>

<div data-role="layout" data-id="overview-layout">

<header data-role="header">

<div data-role="navbar">

<span data-role="view-title">Title</span>

<a data-align="right" data-rel="popover" data-role="button" class="nav-button" href="#popover-people">Login</a>

</div>

</header>

</div>

<script>

function closeParentPopover(e) {

var popover = e.sender.element.closest('[data-role=popover]').data('kendoMobilePopOver');

popover.close();

}

</script>

<script>

window.kendoMobileApplication = new kendo.mobile.Application(document.body);

</script>

</body>

</html>

The current code is not closing the link for me. Using the Developer Tools when I debug the JS, the closeParentPopover is not being called when a link is clicked inside the Popover. Can someone help me out here? I would have thought that this would have been more simple.

3 Answers, 1 is accepted

answered on 30 Jan 2013, 11:36 AM

Hi Jon,

closeParentPopover function does not get called because standard <a> tags does not have a mobile click event. The solution is to set this function as a click event handler of the ListView widget itself.

<ul data-role="listview" data-click="closeParentPopover">

<li><a data-target="_top" href="foo.html">Link 1</a></li>

<li><a data-target="_top" href="foo.html">Link 2</a></li>

</ul>

I hope this helps.

Regards,
Alexander Valchev
the Telerik team

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

answered on 30 Jan 2013, 01:49 PM

Yes, that works. Thank you very much!

I have found one issue that I am encountering with this PopOver Menu.
Here is my current html code for the PopOver.

<div data-role="popover" id="menu" data-popup='{"height": 230, "width": 250}'>

<div data-role="view" data-title="Menu">

<div data-role="header">

<div data-role="navbar">

<span data-role="view-title"></span>

<a data-role="button" data-align="right" data-click="closeParentPopover">Close</a>

</div>

<ul data-role="listview" data-click="closeParentPopover">

<li><a data-rel="external" href="/">Home</a></li>

<li><a data-rel="external" href="/mobile/about-us">About Us</a></li>

<li><a data-rel="external" href="/mobile/staff">Staff</a></li>

</ul>

</div>

Whenever I went to "About Us", the page would load. Then I would go to "Staff" and that page would load. However, when I attempted to go to "About Us" again, it stayed on the "Staff" page, but the URL showed domain.com/#/mobile/about-us in the URL. I believed this to be loading the view via AJAX and each time I loaded a page, it loaded on top of the other.

Now, I do not want it to use AJAX. I removed the data-target="_top" and added data-rel="external" as I was having some issues. This only happens on the mobile device, not Chrome or Safari on the desktop. On my iPhone, when I click a link the link, the address bar pops down real quick like it wants to go to that URL, but nothing happens. The Safari browser does not even go to the URL. When I click a link in the PopOver Menu, I want it to just to go directly to the URL, without using AJAX. If I click on "About Us" I want the URL to go to domain.com/mobile/about-us and if I click on the "Staff" I want it to go to domain.com/mobile/staff. Not /#/mobile/staff.

Thank you very much for your support and help!