I have an app that has several listviews tied to remote data sources. I have tied three buttons on the main form to each display a different listview and allow the user to select an item on the list, which is populated on the main form. All three Listviews have the same code as listed below. They display the code for the selected item in a field on the form. That doesn't seem to matter. The code blow includes a section to check if there is no data item selected. This is where the problem lies.
$(document).ready(function () {
$("#proclist").kendoListView({
change: function () {
var item = this.dataItem(".k-state-selected");
if (item === undefined) {
alert("nothing selected");
return;
}
window.encounterView.setProcCode(this.dataItem(".k-state-selected").code);
}
}
When you select something on the listview the change code is fired. The third time you open a different listview and click on an item, item is always returned as undefined.
It doesn't matter what order you click on the buttons, it always fails on the third time. Is this a bug or just a limitation of the simulation environment?
Also 2 of these lists have almost 9000 items in them. I've tried limiting them to 500 items but that fails in the same way. Is there a limitation I should be aware of?
6 Answers, 1 is accepted
Hello Doug,
this does not sound like a known issue. Please replicate it in a Dojo - we will examine it further and advise you from there.
Regards,Petyo
Telerik
Rank 1
Hello Doug,
I ran the project in the icenium environment - it is not runnable anywhere else. I think that I followed the steps you have outlined, but could not reproduce any kind of error. Worth mentioning is that the approach you have taken (using desktop listview and initializing it in document.ready) is not recommended nor for that matter, supported in a mobile environment. I am not sure if the listviews are not instantiated multiple times.
I would definitely suggest that you isolate your problem further as the project setup is quite complicated. Please try abstracting the remote datasources with local data and remove the unnecessary pages, for example. Further tips on isolating Kendo UI specific issues may be found in this blog post.
Regards,
Petyo
Telerik
Rank 1
I've reworked the listview to use the mobile version properly and I've managed to get most of it working. What I'm trying to do with the list view is to have a "favourite" icon which the user can click on and have it change between two different possible values.
I've simplified this into a dojo and all I'm doing is changing the description when you click on an item, but I can't figure out how to get the listview to reflect the changes.
I need some help/direction to make this work. (Or tell me if there is another way to do this)
Here is the dojo code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.902/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.902/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.902/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.902/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.2.902/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.2.902/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.2.902/js/kendo.all.min.js"></script></head>
<body>
<script>
mobileApp = new kendo.mobile.Application();
procedureModel = new kendo.data.Model.define({
id: "code",
hasChildren: false,
fields: {
code: {
type: "string",
editable: false
},
description: {
type: "string",
editable: true
},
favourite: {
type: "boolean",
editable: true
},
index: {
type: "number",
editable: false
}
},
icon: function () {
if (this.get("favourite") == true) {
return "blue.jpg";
} else {
return "grey.jpg";
}
}
});
procArray = [];
for(i=0; i<= 100; i++) {
procArray.push({code: "a" + i.toString(), description: "desc-" + i.toString(), favourite: false, index: i});
}
localProcs = new kendo.data.DataSource({
data: procArray,
schema: {
model: procedureModel,
total: function() {
return procArray.length;
}
}
});
function change(e) {
console.log("change");
procObs.flipFav(e);
};
procObs = new kendo.observable( {
flipFav: function (e) {
console.log("flipFav");
var item = e.dataItem;
if (item.get("favourite") == true) {
item.set("favourite", false);
} else {
item.set("favourite", true);
}
item.set("description", e.dataItem.code);
$("#proclist").data("kendoMobileListView").setDataItem($("#listview li").eq(item.index), item); }
});
</script>
<script id="procTemplate" type="text/x-kendo.template">
<div>
<div style="width:85%;float:left">(#:code#) #:description#
</div>
</div>
</script>
<div id="main" data-role="view" data-model="procObs" data-layout="default">
<ul id="proclist" data-role="listview" data-source="localProcs" data-template="procTemplate" data-virtual-view-size=150 data-endless-scroll="true" data-click="change">
</ul>
</div>
</body>
</html>​
Hello Doug,
I would recommend doing something like this.
Regards,
Petyo
Telerik
Rank 1
Thanks. That helped a whole lot. I've taken the simplified code and made it so that I can change an image in the list by clicking on it. Dealing with changing an image was more complex but it's now working.