ListView Links to Parent, then Close

4 posts, 0 answers
  1. Jon
    Jon avatar
    3 posts
    Member since:
    Jan 2013

    Posted 28 Jan 2013 Link to this post

    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">
     
    <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>
                    </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>
     
        </div>
     
        <div data-role="layout" data-id="overview-layout">
     
            <header data-role="header">
                <div data-role="navbar">
                    <!--a class="nav-button" data-align="left" data-role="backbutton">Back</a-->
                    <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.
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 30 Jan 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Jon
    Jon avatar
    3 posts
    Member since:
    Jan 2013

    Posted 30 Jan 2013 Link to this post

    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>
            </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>
    </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!
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 01 Feb 2013 Link to this post

    Hi Jon,

    The behaviour you described is caused by a bug connected with external links which is already fixed in the latest internal build. Please log-in with your account at www.kendoui.com to download it and test your project with it. Do not hesitate to contact me in case you observe any troubles.

    Best 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!
Back to Top
Kendo UI is VS 2017 Ready