adriatic/app.html

## app.html
<template>
        <require from="./checkboxes.css"></require>
    <div id="example">

        <div class="demo-section k-content">
            <div>
                <h4>Check nodes</h4>
                <div ak-treeview="k-data-source.bind: data;
                                 k-checkboxes.bind: { checkChildren : true};
                                 k-widget.bind: treeview"
                     k-on-check.delegate="onCheck()"
                     id="treeview" >
                </div>
            </div>
            <div style="padding-top: 2em;">
                <h4>Status</h4>
                <logger view-model.ref="logger"></logger>
            </div>
        </div>
    </div>
</template>

## app.js
export class Checkboxes {
    constructor() {
      this.data = [{
        id: 1, text: 'My Documents', expanded: true, spriteCssClass: 'rootfolder', items: [
          {
            id: 2, text: 'Kendo UI Project', expanded: true, spriteCssClass: 'folder', items: [
                        { id: 3, text: 'about.html', spriteCssClass: 'html' },
                        { id: 4, text: 'index.html', spriteCssClass: 'html' },
                        { id: 5, text: 'logo.png', spriteCssClass: 'image' }
            ]
          },
          {
            id: 6, text: 'New Web Site', expanded: true, spriteCssClass: 'folder', items: [
                        { id: 7, text: 'mockup.jpg', spriteCssClass: 'image' },
                        { id: 8, text: 'Research.pdf', spriteCssClass: 'pdf' }
            ]
          },
          {
            id: 9, text: 'Reports', expanded: true, spriteCssClass: 'folder', items: [
                        { id: 10, text: 'February.pdf', spriteCssClass: 'pdf' },
                        { id: 11, text: 'March.pdf', spriteCssClass: 'pdf' },
                        { id: 12, text: 'April.pdf', spriteCssClass: 'pdf' }
            ]
          }
        ]
      }];
    }

    // function that gathers IDs of checked nodes
    checkedNodeIds(nodes, checkedNodes) {
      for (let i = 0; i < nodes.length; i++) {
        if (nodes[i].checked) {
          checkedNodes.push(nodes[i].id);
        }

        if (nodes[i].hasChildren) {
          this.checkedNodeIds(nodes[i].children.view(), checkedNodes);
        }
      }
    }

    // show checked node IDs on datasource change
    onCheck() {
      let checkedNodes = [];
      let message;

      this.checkedNodeIds(this.treeview.dataSource.view(), checkedNodes);

      if (checkedNodes.length > 0) {
        message = 'IDs of checked nodes: ' + checkedNodes.join(',');
      } else {
        message = 'No nodes checked.';
      }

      this.logger.log(message);
    }
}

## checkboxes.css
.k-sprite {
    background-image: url("https://demos.telerik.com/kendo-ui/content/web/treeview/coloricons-sprite.png");
}

.rootfolder { background-position: 0 0; }
.folder     { background-position: 0 -16px; }
.pdf        { background-position: 0 -32px; }
.html       { background-position: 0 -48px; }
.image      { background-position: 0 -64px; }

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia KendoUI bridge</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.common.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.default.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.mobile.all.min.css">
    <script src="https://kendo.cdn.telerik.com/2016.1.226/js/jszip.min.js"></script>
  </head>
  <body aurelia-app="main">
    <h1>Loading...</h1>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
    <script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/0.3.5/config2.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

## main.js
export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-kendoui-bridge', kendo => kendo.pro());

  aurelia.start().then(a => a.setRoot());
}
	<template>
	<require from="./checkboxes.css"></require>
	<div id="example">

	<div class="demo-section k-content">
	<div>
	<h4>Check nodes</h4>
	<div ak-treeview="k-data-source.bind: data;
	k-checkboxes.bind: { checkChildren : true};
	k-widget.bind: treeview"
	k-on-check.delegate="onCheck()"
	id="treeview" >
	</div>
	</div>
	<div style="padding-top: 2em;">
	<h4>Status</h4>
	<logger view-model.ref="logger"></logger>
	</div>
	</div>
	</div>
	</template>
	export class Checkboxes {
	constructor() {
	this.data = [{
	id: 1, text: 'My Documents', expanded: true, spriteCssClass: 'rootfolder', items: [
	{
	id: 2, text: 'Kendo UI Project', expanded: true, spriteCssClass: 'folder', items: [
	{ id: 3, text: 'about.html', spriteCssClass: 'html' },
	{ id: 4, text: 'index.html', spriteCssClass: 'html' },
	{ id: 5, text: 'logo.png', spriteCssClass: 'image' }
	]
	},
	{
	id: 6, text: 'New Web Site', expanded: true, spriteCssClass: 'folder', items: [
	{ id: 7, text: 'mockup.jpg', spriteCssClass: 'image' },
	{ id: 8, text: 'Research.pdf', spriteCssClass: 'pdf' }
	]
	},
	{
	id: 9, text: 'Reports', expanded: true, spriteCssClass: 'folder', items: [
	{ id: 10, text: 'February.pdf', spriteCssClass: 'pdf' },
	{ id: 11, text: 'March.pdf', spriteCssClass: 'pdf' },
	{ id: 12, text: 'April.pdf', spriteCssClass: 'pdf' }
	]
	}
	]
	}];
	}

	// function that gathers IDs of checked nodes
	checkedNodeIds(nodes, checkedNodes) {
	for (let i = 0; i < nodes.length; i++) {
	if (nodes[i].checked) {
	checkedNodes.push(nodes[i].id);
	}

	if (nodes[i].hasChildren) {
	this.checkedNodeIds(nodes[i].children.view(), checkedNodes);
	}
	}
	}

	// show checked node IDs on datasource change
	onCheck() {
	let checkedNodes = [];
	let message;

	this.checkedNodeIds(this.treeview.dataSource.view(), checkedNodes);

	if (checkedNodes.length > 0) {
	message = 'IDs of checked nodes: ' + checkedNodes.join(',');
	} else {
	message = 'No nodes checked.';
	}

	this.logger.log(message);
	}
	}
	.k-sprite {
	background-image: url("https://demos.telerik.com/kendo-ui/content/web/treeview/coloricons-sprite.png");
	}

	.rootfolder { background-position: 0 0; }
	.folder { background-position: 0 -16px; }
	.pdf { background-position: 0 -32px; }
	.html { background-position: 0 -48px; }
	.image { background-position: 0 -64px; }
	<!doctype html>
	<html>
	<head>
	<title>Aurelia KendoUI bridge</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.common.min.css">
	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.rtl.min.css">
	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.default.min.css">
	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.mobile.all.min.css">
	<script src="https://kendo.cdn.telerik.com/2016.1.226/js/jszip.min.js"></script>
	</head>
	<body aurelia-app="main">
	<h1>Loading...</h1>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
	<script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/0.3.5/config2.js"></script>
	<script>
	System.import('aurelia-bootstrapper');
	</script>
	</body>
	</html>
	export function configure(aurelia) {
	aurelia.use
	.standardConfiguration()
	.developmentLogging()
	.plugin('aurelia-kendoui-bridge', kendo => kendo.pro());

	aurelia.start().then(a => a.setRoot());
	}