CODEWITHSUNDEEP
javascriptmvvmkendo-uitelerik
Matt
Matt

Reputation: 26971

Kendo UI - Templating a list of checkboxes and binding checked to viewModel

I have a template for a checkbox row -- I set a value when I render the template, but the MVVM checked binding throws an exception. I'm confused as to why this doesn't work as the generated code is pretty much an example given by kendo itself (http://demos.telerik.com/kendo-ui/mvvm/elements)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
  <script id="fTemplate" type="text/html">
    <div>
        <input type="checkbox" value="#=data#" data-bind="checked: selectedF"/>
        <div style="display: inline-block; margin-left: 5px;">#=data#</div>
    </div>
   </script>

   <script>
     var viewModel = window.kendo.observable({
       fSource: ["1","2","3"],
       selectedF: [],
       selectedFText: function(){
            return viewModel.get('selectedF').join(',');
       }

     });

     $(document).ready(function() {
       window.kendo.bind($('body'), viewModel);
     });


  </script>
</head>
<body>
  <ul data-bind="source: fSource" data-template="fTemplate"></ul>
  <br/>
  Selected: <div data-bind="text: selectedFText"></div>
</body>
</html>

Live example here: http://dojo.telerik.com/EMIp

Upvotes: 0

Views: 6169

Answers (1)

Hemadeus
Hemadeus

Reputation: 472

The problem is because you try to access a property of a viewModel that your template doesn't know.

Here is an example that is working. I'm pretty sure it will give you enough to help you.

<script id="fTemplate" type="text/html">
    <div>
        <input type="checkbox" value="#=data.value#" data-bind="checked: isSelected"/>
        <div style="display: inline-block; margin-left: 5px;">#=data.value#</div>
    </div>
</script>

<script>
     var viewModel = window.kendo.observable({
       fSource: [
         {
            value:"1",
            isSelected: false
         },
         {
            value:"2",
            isSelected: false
         },
         {
            value:"3",
            isSelected: false
         }],
       selectedF: [],
       selectedFText: function(){
       }
    });

    $(document).ready(function() {
       window.kendo.bind($('body'), viewModel);
    });
</script>

Html:

 <body>
  <ul data-bind="source: fSource" data-template="fTemplate"></ul>
  <br/>
  Selected: <div data-bind="text: fSource[0].isSelected"></div>
</body>

your fiddle:

http://dojo.telerik.com/EMIp/5

Upvotes: 2

Related Questions