KendoUI Mobile switch and datasource
Posted
by
OnaBai
on Stack Overflow
See other posts from Stack Overflow
or by OnaBai
Published on 2014-06-06T10:04:35Z
Indexed on
2014/06/06
21:27 UTC
Read the original article
Hit count: 368
I'm trying to have a list of items displayed using a listview, something like:
<div data-role="view" data-model="my_model">
<ul data-role="listview" data-bind="source: ds" data-template="list-tmpl"></ul>
</div>
Where I have a view
using a model called my_model
and a listview
where the source
is bound to ds
.
My model is something like:
var my_model = kendo.observable({
ds: new kendo.data.DataSource({
transport: {
read: readData,
update: updateData,
create: updateData,
remove: updateData
},
pageSize: 10,
schema: {
model: {
id: "id",
fields: {
id: { type: "number" },
name: { type: "string" },
active: { type: "boolean" }
}
}
}
})
});
Each item includes an id
, a name
(that is a string
) and a boolean
named active
.
The template used to render each element is:
<script id="list-tmpl" type="text/kendo-tmpl">
<span>#= name # : #= active #</span>
<input data-role="switch" data-bind="checked: active"/>
</script>
Where I display the name
and (for debugging) the value of active
. In addition, I render a switch
bound to active
.
You should see something like:
The problems observed are:
- If you click on a switch you will see that the value of
active
next to thename
changes its value (as expected) but if then, you pick another switch, the value (neither next toname
nor in theDataSource
) is not updated (despite the value of the switch is correctly updated). - The
update
handler in the DataSource is never invoked (not even for the first chosen switch and despite the DataSource for that first toggled switch is updated).
You can check it in JSFiddle: http://jsfiddle.net/OnaBai/K7wEC/
How do I make that the DataSource gets updated and update
handler invoked?
© Stack Overflow or respective owner