This is the HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="scripts/hello-world.js"></script>
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
</head>
<body>
<div data-role="view" id="tabstrip-home" data-title="Hello World!">
<ul id="categoriesList" data-role="listview" data-style="inset">
<li class="categoryLink" data-entryid="1">Category 1</li>
<li class="categoryLink" data-entryid="2">Category 2</li>
<li class="categoryLink" data-entryid="3">Category 3</li>
<li class="categoryLink" data-entryid="4">Category 4</li>
</ul>
</div>
<div data-role="layout" data-id="mobile-tabstrip">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</header>
<div data-role="footer">
<div data-role="tabstrip">
<a href="#tabstrip-home" data-icon="home">Home</a>
</div>
</div>
</div>
<script>
var app = new kendo.mobile.Application(document.body, { transition: "slide", layout: "mobile-tabstrip" });
</script>
</body>
</html>
This is the JavaScript
// Wait for PhoneGap to load
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is ready
function onDeviceReady() {
}
$(document).ready(function() {
$(".categoryLink").live("click", function(e) {
alert('clicked');
selectedEntry = $(this).data("entryid");
$("#projectItems").empty();
getCategoryItems(categories[selectedEntry].categoryid, currentId);
app.navigate('#projectPage', 'slide:right');
});
});
To test, simply create a project with the Kendo UI framework and replace the contents of index.html with the html code above and the code in hello-world.js with the JavaScript code above.
I hope others can reproduce this issue and maybe someone can come up with a solution.
4 Answers, 1 is accepted
In your sample, the clickable surface is having difficulty detecting the touch events. I recommend changing a couple of things.
- Use the data binding and click capabilities of the ListView to create a clickable list.
- Avoid using $(document).ready() - use onDeviceReady instead.
I created a sample that does what you are asking (although I think there is more to what you want), which you can clone in Icenium. In the sample I set up the ListView with a Kendo DataSource with the values you used, and that is bound to the ListView. In the ListView configuration I defined a click function to handle any item click event. Within that function you can access e.dataItem to get values from the bound data item. I tested this on nine (9) different Android devices (v2.3.5 through 4.1.1), including a Samsung Galaxy SII Skyrocket (v2.3.5) and it worked fine (note: in the Graphite device simulator the click event fires twice, as indicated by the repeat alert event. On the devices, the click event only fires once, as expected - we will research this odd behavior).
Clone the project using these steps.
- Choose Clone from the Dashboard
- Enter the following GitHub URL:
https://github.com/dougseven/customer-JD-Click-Test - Click OK
- You can modify the cloned project anyway you'd like.
I set up the project a little differently than our Hello World projects, to use an application namespace. If you need to access the "app" object, do so with "APP.app". e.g. APP.app.navigate("#foo", "slide: right");
Greetings,Doug Seven
the Telerik team
Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.
Rank 1
I am going to use your example as a start to the project I was working on.
However, I found one issue with the example. If you run it in the simulator, the click event is fired twice (two alerts). I also see that in the log. On my phone (Android) I get only 1 alert, but wondering what happens on other (Android) phones and iOS.
Can you replicate this behaviour in the simulator?
In my original reply I mention this odd click behavior. I think it is a bug in the device simulator, as the click event is only firing once (the expected behavior) on all nine of my Android devices.
I've asked the dev team to look into this.
All the best,
Doug Seven
the Telerik team
Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.
Rank 1
Edit: I have removed a lot of text here that described a problem that I had putting text on a follow up page. I found what was wrong.