javascript - Bind input checkbox's property checked to a field -
i need prepare kendo listview in each item input checkbox shown in image.
this listview bound a list of objects having 2 properties: "title" & "ischecked"
i have used following template prepare listview:
<script type="text/x-kendo-tmpl" id="checkboxlisttemplate"> <div style='margin-left:5px;'> <label style='font-weight: normal;'> <input type="checkbox" />#: title# </label> </div> </script> var _data = []; _data.push({"title" : "123", "ischecked" : true}); _data.push({"title" : "abcd", "ischecked" : false}); var _datasource = new kendo.data.datasource({ data: _data }); $("#lstview").kendolistview({ datasource: _datasource, template: kendo.template($("#checkboxlisttemplate").html()) });
as can seen in template, "title" property bound display content of checkbox need bind checked property of input "ischecked" field if true, checkbox should appear checked or unchecked if false depending on value of property.
how can checkbox's checked property bound "ischecked" field?
one more question.. possible have 2 way binding such if manually check/uncheck checkbox, value changed "ischecked" property in datasource ?
you can use conditions inside kendo template this:
<input type="checkbox" #if(ischecked){# checked="checked" #}# />
here working code snippet.
var _data = []; _data.push({ "title": "123", "ischecked": true }); _data.push({ "title": "abcd", "ischecked": false }); var _datasource = new kendo.data.datasource({ data: _data }); $("#lstview").kendolistview({ datasource: _datasource, template: kendo.template($("#checkboxlisttemplate").html()) });
<!doctype html> <html> <head> <script src="https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js"></script> <script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js"></script> </head> <body> <div id="lstview"> <script type="text/x-kendo-tmpl" id="checkboxlisttemplate"> <div style='margin-left:5px;'> <label style='font-weight: normal;'> <input type="checkbox" #if(ischecked){# checked="checked" #}# />#: title# </label> </div> </script> </div> </body> </html>
Comments
Post a Comment