Bind a checkbox in an item template of a ListView to a datasource property

5 posts, 1 answers
  1. rlapao
    rlapao avatar
    23 posts
    Member since:
    Oct 2006

    Posted 26 Apr 2012 Link to this post

    Is it possible to bind a checkbox in an item template of a ListView to a datasource property without using a edit template.

    For example:

    <script type="text/x-kendo-tmpl" id="template">
         <div>
           <dl>
             <dt>Name</dt> <dd>${Name}</dd>
             <dt>Age</dt> <dd>${Age}</dd>
             <dt>Checked</dt> <dd><input type="checkbox" data-bind="checked:DataSourceBooleasProperty" /></dd>
           </dl>
         </div>
     </script>

    $("#listView").kendoListView({
         dataSource: {
             data: createRandomData(50)
         },
         template: kendo.template($("#template").html())
     });

  2.
  3. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 02 May 2012 Link to this post

    Hello Ricardo,

    It is possible to display a boolean value through checked / unchecked check boxes through the template, but the inputs will not be bound (e.g. the changes will not affect the data records). 
    <dt>Checked</dt><dd><input type="checkbox" #= BoolField ? checked="checked" : "" # /></dd>

    If you want to edit the data, you have to define an edit template.
    I hope this helps.

    Kind regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. rlapao
    rlapao avatar
    23 posts
    Member since:
    Oct 2006

    Posted 02 May 2012 Link to this post

    Hi Alexander,

    Thanks for your reply.

    Ricardo
  7. Mark
    Mark avatar
    4 posts
    Member since:
    Feb 2013

    Posted 28 Apr 2014 in reply to rlapao Link to this post

    Can we similarly bind the image src and title?

    I am trying as below:
    <img id="HardWarning" #= IsHardWarning ? src="~/Images/jpgimage005.png":src="~/Images/jpgimage006.png" # style="width: 15px;height: 15px;" #= IsHardWarning? title="XXXX.": title="XXXXX."# />

    But both properties are not populating properly.

    <img id="HardWarning" ~="" images="" jpgimage006.png="" style="width: 15px;height: 15px;" this="" is="" soft="" warning.we="" can="" processed="" with="" this.="">

  8.
  9. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 29 Apr 2014 Link to this post

    Hello Mark,

    You should surround with quotes the whole string that will be returned.
    <img id="HardWarning" #= IsHardWarning ? "src=\'~/Images/jpgimage005.png\'" : "src=\'~/Images/jpgimage006.png\'" # style="width: 15px;height: 15px;" #= IsHardWarning? "title=\'XXXX.\'" : "title=\'XXXXX.\'" # />


    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top