In order for the HTML to be updated, you should use the observable object set method instead of direct assignment - http://docs.telerik.com/kendo-ui/api/framework/observableobject#methods-set
Editing a KendoTemplate in Jquery function
-
09-07-2023 - |
Frage
I am using Kendo Mvvm to create a template for items I am getting from a data source. What I would like to do is have a visible binding in my template that I can toggle on in off for the specific template that is being clicked on but I cant get it to work.
HTML place for Template:
<ul id="memberlistview" data-template="memberSelectTemplate" data-bind="source: allmembers" style="color: #333333; float: left; padding: 0"></ul>
HTML Template:
<script id="memberSelectTemplate" type="text/x-kendo-template">
<div style="float: left; height: 55px; width: 100%; margin-bottom: 5px; background-color: white" data-bind="click: addmember">
<div style="float: left; width: 40px; height: 55px; padding: 5px;" data-bind="visible: selecteduser">
<img src="~/Images/imgCheck-blue.png" />
</div>
<img data-bind="attr: { src: userpic}" style="float: left; width: 55px; height: 55px; border-radius: 5px;">
<h3 style="float: left" class="item-title" data-bind="text: userdisplayname"></h3>
<div style="display: none" data-bind="text: userid"></div>
<div style="display: none" data-bind="text: useradid"></div>
<div style="display: none" username></div>
</div>
</script>
Jquery to set Template:
$.ajax({
url: MobileHomePath + "GetAllUsers",
}).success(function (data) {
vm.set("allmembers", [])
if (data != null && data != "") {
var count = 0;
$.each(data, function () {
vm.get("allmembers").push({
selecteduser: false,
userpic: data[count].Pic,
userdisplayname: data[count].DisplayName,
username: data[count].UserName,
userid: data[count].Id,
useradid: data[count].AdId,
});
count = count + 1;
});
}
});
Jquery to try and change Template:
addmember: function (e) {
e.data.selecteduser = true;
},
allmembers: [
]
Lösung
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow