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

PopOver in ListView

6 Answers 395 Views
PopOver (Mobile)
This is a migrated thread and some comments may be shown as answers.
Ran
Top achievements
Rank 1
Ran asked on 01 Aug 2012, 12:59 PM
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
 
 

6 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 01 Aug 2012, 01:23 PM
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!
0
Ran
Top achievements
Rank 1
answered on 01 Aug 2012, 05:43 PM
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
 
0
Petyo
Telerik team
answered on 02 Aug 2012, 06:29 AM
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!
0
Ran
Top achievements
Rank 1
answered on 02 Aug 2012, 08:59 AM
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
0
Danilo
Top achievements
Rank 1
answered on 06 Aug 2012, 09:15 AM
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
TypeError: $("#popover-location").data("kendoMobilePopOver").open is not a function
The open() function is obviously not working?

Regards, Danilo
0
Ran
Top achievements
Rank 1
answered on 06 Aug 2012, 10:03 AM
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
Tags
PopOver (Mobile)
Asked by
Ran
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Ran
Top achievements
Rank 1
Danilo
Top achievements
Rank 1
Share this question
or