Questions on Kendo UI for jQuery Forum

1 answer

35 views

Hello,

I wanted to implement something similar to the android options button, which pops down a menu below it of options. Is the Popover component a good one for this, given that I'm building a mobile phone-oriented app?

Thanks.

PopOver (Mobile)

answered on 25 Mar 2013

1 answer

60 views

PopOver & hierarchy of items.

Hi

Is it possible to implement a popover that explores a hierarchy? The HierarchicalDataSource docs suggest that it's only the TreeView that can handle this, which I'm assuming means that it's not possible to make the popover do this - but I've not tried it out yet.

If there's any examples of how this might be done, links would be hugely appreciated.

I'm trying to implement a popover that allows the user to browse a hierarchy, sample screenshot attached.

Thanks,

--
John Clayton

PopOver (Mobile)

answered on 27 Feb 2013

1 answer

218 views

Problem with Popover demo

Greetings - I'm just getting started with Kendo Mobile and am looking at using the Popover. I've tried reproducing your demo located here: http://demos.kendoui.com/mobile/popover/index.html. I've copied and pasted the HTML from your demo into a local MVC view (I made a couple of trivial changes to load jQuery and Kendo from their respective CDNs). The complete markup from my view is as follows:

<!DOCTYPE html>

<html>

<head>

<title></title>

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>

<link href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css" rel="stylesheet"/>

<link href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css" rel="stylesheet"/>

<link href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.mobile.all.min.css" rel="stylesheet"/>

</head>

<body>

<div data-role="view" data-title="Tag people" id="popover">

<div data-role="header">

<div data-role="navbar">

<a id="back-button" class="nav-button" data-align="left" data-role="backbutton">Back</a>

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

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

</div>

<div data-role="content">

<img src="http://demos.kendoui.com/content/mobile/shared/faces.jpg" />

</div>

<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><label>Isabella Anderson<input type="checkbox"></label></li>

<li><label>Josh Anderson<input type="checkbox"></label></li>

<li><label>Linda Anderson<input type="checkbox"></label></li>

<li><label>Oliver Anderson<input type="checkbox"></label></li>

<li><label>James Williams<input type="checkbox"></label></li>

<li><label>Barbara Williams<input type="checkbox"></label></li>

</ul>

</div>

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

<div data-role="view">

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

<li><label>Sydney, Australia <input name="location" type="radio"></label></li>

<li><label>New York, USA <input name="location" type="radio"></label></li>

<li><label>Miami, USA <input name="location" type="radio"></label></li>

</ul>

</div>

<div data-role="footer">

<div data-role="navbar">

<a data-align="right" href="#popover-location" data-rel="popover" data-role="button">Select location</a>

</div>

<style scoped>

.km-ios #popover .km-view-title,

.km-ios #popover-people .km-view-title

{

color: #fff;

text-shadow: 0 -1px rgba(0,0,0,.5);

}

.km-ios #popover .km-navbar,

.km-root > * > #popover > .km-content

{

background: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0, rgba(255, 255, 255, 0.35)), color-stop(0.5, rgba(255, 255, 255, 0.1)), color-stop(0.5, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0))) #000;

}

.km-ios #popover .km-navbar .km-button

{

background-color: #000;

}

</style>

<script>

function closeParentPopover(e) {

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

popover.close();

}

</script>

<script>

var app = new kendo.mobile.Application(document.body);

</script>

</body>

</html>

A screenshot of what I see when I view the page is attached to this post.

Basically when the page loads, it appears as if the people popover is fully expanded and covers the entire page. Any insight as to what I'm missing would be much appreciated.

PopOver (Mobile)

answered on 06 Feb 2013

3 answers

116 views

ListView Links to Parent, then Close

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.

PopOver (Mobile)

answered on 01 Feb 2013

1 answer

288 views

Popover binding to close event?

So i have a popover and clicking the close button works well to close the popover, but i would like to bind the popover's close event to a custom function where i can send an ajax request and do some custom processing. I would like to bind the close because if you open the popover, select elements and click somewhere on the page the popover will close and i would like to capture that close event and fire my custom function.. I tried doing this:

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

<div data-role="view" data-title="Clinic Locations">

<div data-role="header">

<div data-role="navbar">

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

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

</div>

<ul data-role="listview">

@{

var locs = (List<Location>) Session["Locations"];

foreach (var l in locs)

{

if (l.IsActive)

{

<li><label>@l.DisplayText<input data-ident="@l.Identifier" type="checkbox" checked="checked" name="chbx-location"/></label></li>

}

else

{

<li><label>@l.DisplayText<input data-ident="@l.Identifier" ype="checkbox" name="chbx-location"/></label></li>

}

</ul>

</div>

And then in document.ready i'm trying to bind to the close event like this.

$(document).ready(function () {

// bind the location popover close event to the updateSlectedLocation function.

var locPopover = $('#popover-locations');

locPopover.bind('close', updateSelectedLocation);

});

But nothing is firing when i open the popover then click somewhere else on the page to close it... Any thoughts?

PopOver (Mobile)

answered on 21 Jan 2013

0 answers

660 views

Uncaught TypeError: Cannot read property 'checked' of undefined

Hi,

I am using the popover with listview and checkbox or radio items. With radio everything works finde, but when I am using checkboxes I get the Error: Uncaught TypeError: Cannot read property 'checked' of undefined
Any idea, what could be wrong? I am creating the Items like this:

$this.children().each(function (i) {

var $item = $("<li><label>" + $(this).val() + " <input type=\"" + (base.multiple ? "checkbox" : "radio") + "\" " + (this.selected ? "checked=\"checked\"" : "") + " /></label></li>");

listview.prepend($item);

var that = this;

$item.on("click", function () {

console.log("test");

that.selected = true;

$this.ButtonCombobox("setSelection");

})

});

The error is thrown before output "test" and is thrown by kendo.mobile.min.js.

PopOver (Mobile)

asked on 09 Nov 2012

1 answer

121 views

dynamic popover height

Hello,

is it possible to adjust the height of a popover to its content?
My popover contains several views with different heights.

Thank you
Axel

PopOver (Mobile)

answered on 22 Oct 2012

2 answers

140 views

Listview in Popover (target:parent)

Hi there,

I am abusing the popover for a menu-like view. So I have my popover which has a listview with some menu entries. Now I'd like to navigate to a different view when clicking an entry. It works, but the new view is loaded INSIDE the popover. Instead I want it to load in the "PARENT" view. How can I achieve that?
This is how the hierarchy looks like:

<div data-role="view"> 

<div data-role="popover">

<div data-role="view"> 

<ul data-role="listview">

<li><a href="view/TabView.html">Tab</a></li>

</ul>

</div>

</div

>



//edit: I noticed the following behavior when playing around with the listview's links:



<li><a data-transition="fade" href="view/TabView.html">inside</a></li> //opens inside the popover



<li><a data-rel="external" data-transition="fade" href="view/TabView.html">ext</a></li> //doesnt open at all on the phone



<li><a data-rel="external" data-transition="fade" href="#view/TabView.html">ext</a></li> //(notice the #) doesnt open at all on the phone but has exactly the desired behavior on the desktop



any suggestions?

PopOver (Mobile)

answered on 16 Oct 2012

2 answers

178 views

popover acts like not initialized

Have an anchor:

<a id="popanchor" data-rel="popover" href="#popover-task" data-role="button" >Open PopOver</a>

and a popover:

<div data-role="popover" id="popover-task" >

<div data-role="view">

Hi There

</div>

Other kendo elements seem to be working fine. Get error when clicking on the button "Uncaught TypeError: Cannot call method 'openFor' of undefined".

Looking at source the error occurs here:

kendo.widgetInstance($(href), ui).openFor(link);

In the widgetInstance function...

kendo.widgetInstance = function(element, suite) {

var widget = suite.roles[element.data(kendo.ns + "role")];

if (widget) {

return element.data("kendo" + widget.fn.options.prefix + widget.fn.options.name);

}

};

it fails to find the "kendoMobilePopOver" data. Which leads me to believe its not initializing properly. I tried setting up in in JavaScript instead and same result.

Thoughts? Thanks,

Dennis

PopOver (Mobile)

answered on 15 Oct 2012

1 answer

228 views

Uncaught TypeError: Cannot read property 'nextView' of undefined

i got this error while using Mobile PopOver when click 'Select Location'
My Page is like below:

<div data-role="view" >
<div> Home </div>
</div>

<div data-role="view" data-layout="pop" id="Location">
<div data-role="popover" id="PLocation" data-popup='{"height": 140, "width": 350}'>
<ul data-role="listview" data-click="closeParentPopover">
<li><label>Sydney, Australia <input name="location" type="radio"></label></li>
<li><label>New York, USA <input name="location" type="radio"></label></li>
<li><label>Miami, USA <input name="location" type="radio"></label></li>
</ul>
</div>
</div>

<div data-role="layout" data-id="pop">
<div data-role="footer">
<div data-role="navbar">
<a data-align="right" href="#PLocation" data-role="button">Select location</a>
</div>
</div>
</div>

PopOver (Mobile)