container test

by grippstick

HTML

<link rel="stylesheet" href="https://aligntoday.com/Kendo/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://aligntoday.com/Kendo/styles/kendo.flat.min.css">
<script src="https://aligntoday.com/Kendo/js/jquery.min.js"></script>
<script src="https://aligntoday.com/Kendo/js/kendo.all.min.js"></script>
<div class="container">
            <input name="files"
                   type="file"
                   data-role="upload"
                   data-bind="                              events: { select: onSelect }">
  <ul data-role='listview' data-template="item" data-bind='source:ds'>

  </ul>
</div>
<script id="item" type="text/x-kendo-template">
  <li>
    <div>#=id#</div>
    <div data-bind="text:complete"></div>
    <input type="checkbox" data-bind="checked: complete,events:{change:resort}" />
  </li>
</script>

JavaScript

var vm = new kendo.observable({
  onSelect: function(e) {
  	debugger;
  },
  ds: new kendo.data.DataSource({
    data: [],
    sort: [{
      field: "complete",
      dir: "asc"
    }, {
      field: "id",
      dir: "asc"
    }]
  }),
  resort: function() {
    console.warn('resort');
    vm.ds.sort();
  }
});


for (var i = 0; i <= 100; i++) {
  vm.ds.add({
    id: i,
    completed: false
  });
}

kendo.bind($('.container'), vm)