PopOver in ListView

7 posts, 0 answers
  1. Ran
    Ran avatar
    10 posts
    Member since:
    Jul 2012

    Posted 01 Aug 2012 Link to this post

    Hello,

    1. I am trying to open a PopOver from within a list view.
    in this way any clicked <li> will open a PopOver, where at any given moment, a maximum of only 1 PopOver will be open and visible at any given time.
    2. Assuming we've succeeded the above, the plan is to open each PopOver with it's relevant info.
    For example a listView with

    Remarks...
    Remarks...
    Remarks...

    Will open a PopOver with the actual remarks for each line ( <li> ).
    I am a newby at Kendo Mobile, but it looks like something trivial for someone who knows what they are doing :)

    What I've tried so far
    According to the docs:
    "The Mobile PopOver widget can be open when any mobile navigational widget (listview link item, button, tabstrip, etc.) is tapped. To do so, add data-rel="popover" attribute and a href attribute equal to the PopOver id to the navigational widget DOM element (prefixed with #, like an anchor)."

    Not 100% working. I've tried opening from within the ListView with a button (data-role="button").
    The only kind of working option, is opening the PopOver from within
    <div data-role="header"> or <div data-role="footer"> only.

    Another thing I've tried is opening the PopOver directly using various jQuery commands. Not recommended :)
    PopOver officially has a .close() command. if only it had an .open() command...

    Any help is appreciated.
    Many thanx
    Ran
    PS - I am developing on FireFox on Windows 7
     
     
  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 01 Aug 2012 Link to this post

    Hi Ran,

    Can you please be a little more specific? The data-rel popover approach is working in our online demos

    I would also like to point out that our documentation also describes the openFor widget method. 

    If you still face troubles with this, you can consider opening a support ticket with a sample project, that demonstrates the problem you have. 

    Regards,
    Petyo
    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. Ran
    Ran avatar
    10 posts
    Member since:
    Jul 2012

    Posted 01 Aug 2012 Link to this post

    Thanx for replying.

    Attached is a small demo based on your own docs.
    it is a Mobile ListView binded with an external JSON source.

    Everything  seems to work fine, until I add a button to open the PopOver.
    Once the code is run, you will see it hangs for ever and does not load.
    If you delete the line:
    <a data-role="button" href="#myPopOver" data-rel="popover">Open PopOver</a>
    Everything seems to be OK.

    So the issue remains... how to open a PopOver from within a ListView, and then how to load the text content of that PopOver, from the binded data?!

    Also, the issue of "openFor" is not well documented and has no example. At least for me, a Kendo newbe, it is not very clear to say the least.

    Many thanx
    Ran
     
  5. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 02 Aug 2012 Link to this post

    Hello Ran,

    Your listview template is invalid. The problem is that the # characters should be escaped in the template (as they are delimiters for code blocks).

    The error is also visible in the chrome/safari console, an error about an invalid template is displayed. 

    by adding a backslash in front of #, the provided sample works as expected.

    <a data-role="button" href="\#myPopOver" data-rel="popover">Open PopOver</a>



    Kind regards,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Ran
    Ran avatar
    10 posts
    Member since:
    Jul 2012

    Posted 02 Aug 2012 Link to this post

    Thank you, it works now :)

    To complete this issue, remains the question of how to open the PopOver and load the text content of that PopOver from the binded data?!
    For example a listView with

    Remarks...
    Remarks...
    Remarks...

    Will open a PopOver with the actual remarks for each line ( <li> ).

    Also, the issue of "openFor" is not very well documented. could you please give a small example for me and every one else getting here thru search (either Forum search or Google search)
    Thanx
  7. Danilo
    Danilo avatar
    3 posts
    Member since:
    Mar 2012

    Posted 06 Aug 2012 Link to this post

    Hi.
    I'm trying to open a popOver from javascript to display a successful save operation.
    function openPopover() {
                $("#popover-location").data("kendoMobilePopOver").open();
            }
    My error
    
    The open() function is obviously not working?

    Regards, Danilo
  8. Ran
    Ran avatar
    10 posts
    Member since:
    Jul 2012

    Posted 06 Aug 2012 Link to this post

    Danilo, 'PopOver' has no "open" function/method exposed for us users. it does however have a "close" function/method.
    See the code attached above in my own question, together with the minor improvement/fix suggested by Petyo, and you'll see how to open PopOvers
Back to Top
Kendo UI is VS 2017 Ready