Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>JS Bin</title>
    <meta name="description" content="Kendo example"/>
    <link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css" rel="stylesheet" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.web.min.js"></script>
  </head>
  <body>
    <script id="item-template" type="text/x-kendo-template">
      <li class='k-item'><div class='k-mid'><span class='k-checkbox'><input type='checkbox' onclick="ts(this)" #= !!data.checked ? 'checked' : '' # /><span class='k-in'>#: text #</span></div></li>
    </script>
    
    <div class='k-treeview k-wrapper'>
      <ul class='k-group' data-template="item-template" data-bind="source: items"></ul>
    </div>
    
    <script>
      var viewModel = kendo.observable({
        items: [
          { text: "foo" },
          { text: "bar", checked: true },
          { text: "baz" }
        ]
      });
      
      kendo.bind($(".k-wrapper"), viewModel);
      
      function ts(cb) {
        if (cb.readOnly) {
          cb.checked = cb.readOnly = false;
        } else if (!cb.checked) {
          cb.readOnly = cb.indeterminate = true;
        }
      }
    </script>
  </body>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
gyoshevpro
0viewers