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>