var viewModel = kendo.observable({ selectedValue:"1", id:"radiogroup", items:[ {caption:"item_0", value:"0"}, {caption:"item_1", value:"1"}, {caption:"item_2", value:"2"} ]});and html:
<div id="test"> Selected Value: <span data-bind="text:selectedValue"></span> <div data-bind="source:items" data-template="radio-template"></div></div><script id="radio-template" type="text/x-kendo-template"> <div> <input type="radio" data-bind="attr:{name:id}, value:value, checked:selectedValue" /> <label data-bind="text:caption"></label> </div></script>Fiddle:
http://jsfiddle.net/ctbcZ/7/
It renders correctly, but if I select radio button it does not fire changing "selectedValue"
Actually, in this scenario "checked" binding should be applied to parent model, but as far as I understood, in a nested model I have both parent and child model, is this correct? If yes, this is very bad, because values from nested models overwrites parent if they have same name.
Is it possible in template refer only to current model ("data" does not work for example for "value" binding)?
Is it possible to refer parent model members, or send a link to parent model as template option? I need at least 2 things from parent model: name, which should be the same for radios and selectedValue to set.
Why selectedValue in my example does not changes?
Please help
7 Answers, 1 is accepted
Indeed, this is an issue with the current implementation of our MVVM. However, I'm happy to inform you that we were able to address it. I have also updated your telerik points.
All the best,Rosen
the Telerik team
Rank 1
Rank 1
I've checked your fiddle, binding works, but now initial binding does not work!
In this example initial value is "1", but item is not selected
The initial value is not selected in this case as the value binding is applied after all other bindings. At the point when the checked binding is executed the input element does not have it value set, thus it will not be selected. Changing the value attribute to be set through the attr binding, should correct this issue.
Rosen
the Telerik team
Rank 1
I HAVE SAME ISSUE
SEE BELOW CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js"></script>
</head>
<body>
<script type="text/x-kendo-template" id="radiosSubject">
<input data-value-primitive="true" type="radio" name="subject" data-bind="checked: group" data-value-field="Code" data-text-field="Label" value="#: Code #" />
<label for="subject#: Code #">#: Label #</label>
</script>
<div id="view">
<fieldset><legent> last two radio not working ? WHY? </legend>
<div id="mysubject" data-template="radiosSubject" data-bind="source: Subjects"></div>
</fieldset>
<input type="checkbox" name="items" data-bind="checked: items" value="bike"/>
<input type="checkbox" name="items" data-bind="checked: items" value="-1" data-type="number"/>
<input type="checkbox" name="items" data-bind="checked: items" value="true" data-type="boolean"/>
<input type="checkbox" name="items" data-bind="checked: items" value="2015-01-31" data-type="date"/>
<input type="radio" name="group" data-type="date" data-bind="checked: group" value="2015-01-31"/>
<input type="radio" name="group" data-type="datetime-local" data-bind="checked: group" value="2013-06-05T23:13:40"/>
<input type="radio" name="group" data-type="text" data-bind="checked: group" value="Hello"/>
<input type="radio" name="group" data-type="number" data-bind="checked: group" value="3.14"/>
<input type="radio" name="group" data-type="boolean" data-bind="checked: group" value="false"/>
</div>
<script>
var viewModel = kendo.observable({
items: [-1, true],
group: kendo.parseDate("2015-01-31", "yyyy-MM-dd"),
Subjects: [{
"Code": "MAT",
"Label": "Mathematics"
},
{
"Code": "RED",
"Label": "Reading"
},
{
"Code": "SCI",
"Label": "Science"
},
{
"Code": "WRI",
"Label": "Writing"
}
]
});
kendo.bind($("#view"), viewModel);
viewModel.bind("change", function(e){
console.log(e.field, "=", this.get(e.field));
});
</script>
</body>
</html>
The issue you are experiencing is caused by incorrect template. As you may know, the template should have single root element when using source binding. However, in your case this is not true as every template instance is producing two root elements. Thus the last four items are not bound at all. Changing the template to have single root element, for example by wrapping the input into the label you correct the behavior you are observing.
<script type="text/x-kendo-template" id="radiosSubject"> <label><input type="radio" name="subject" data-bind="checked: group" value="#: Code #" />#: Label #</label> </script>Regards,
Rosen
Telerik
Rank 1
Thank you Rosen
Its fixed my issue.
Appreciate your quick response .
Thank you
Nee