adriatic/app.html

## app.html
<template>
    <div id="example">

        <div class="box wide">
            <div class="box-col">
                <h4>Expand / Collapse</h4>
                <ul class="options">
                    <li>
                        <button class="k-button" id="expandAllNodes" click.delegate="expandAllNodes()">Expand all nodes</button>
                    </li>
                    <li>
                        <button class="k-button" id="collapseAllNodes" click.delegate="collapseAllNodes()">Collapse all nodes</button>
                    </li>
                </ul>
            </div>
            <div class="box-col">
                <h4>Enable / Disable</h4>
                <ul class="options">
                    <li>
                        <button class="k-button" id="disableNode" click.delegate="disableNode()">Disable node</button>
                    </li>
                    <li>
                        <button class="k-button" id="enableAllNodes" click.delegate="enableAllNodes()">Enable all nodes</button>
                    </li>
                </ul>
            </div>
            <div class="box-col">
                <h4>Add / Remove</h4>
                <ul class="options">
                    <li>
                        <input id="appendNodeText" value="Node" class="k-textbox" value.bind="appendNodeText" />
                        <button class="k-button" id="appendNodeToSelected" click.delegate="appendNodeToSelected()">Append node</button>
                    </li>
                    <li>
                        <button class="k-button" id="removeNode" click.delegate="removeNode()">Remove node</button>
                    </li>

                </ul>
            </div>

            <div class="box-col">
                <h4>DataSource interaction</h4>
                <ul class="options">
                    <li>
                        <button class="k-button" id="sortDataSource" click.delegate="sort()">Sort</button>
                    </li>
                    <li>
                        <input id="filterText" value="Item 1" class="k-textbox" value.bind="filterText" />
                        <button class="k-button" id="filterDataSource" click.delegate="filterByText()">Filter by text</button>
                    </li>
                </ul>
            </div>
        </div>

        <div class="demo-section k-content">
            <div ak-treeview="k-data-source.bind:data; k-widget.bind: treeview" id="treeview"></div>
        </div>
    </div>
</template>

## app.js
export class API {
  constructor() {
    this.data = [
      { text: 'Item 1', expanded: true, items: [
        { text: 'Item 1.1' },
        { text: 'Item 1.2' },
        { text: 'Item 1.3' }]
      },
      { text: 'Item 2', items: [
        { text: 'Item 2.1' },
        { text: 'Item 2.2' },
        { text: 'Item 2.3' }]
      },
      { text: 'Item 3' }
    ];

    this.appendNodeText = '';
    this.filterText = '';
    this.ascending = false;
  }

  expandAllNodes() {
    this.treeview.expand('.k-item');
  }

  collapseAllNodes() {
    this.treeview.collapse('.k-item');
  }

  disableNode() {
    let selectedNode = this.treeview.select();
    this.treeview.enable(selectedNode, false);
  }

  enableAllNodes() {
    this.treeview.select();
    this.treeview.enable('.k-item');
  }

  appendNodeToSelected() {
    let selectedNode = this.treeview.select();
    this.treeview.append({ text: this.appendNodeText }, selectedNode);
  }

  removeNode() {
    let selectedNode = this.treeview.select();
    this.treeview.remove(selectedNode);
  }

  sort() {
    this.treeview.dataSource.sort({
      field: 'text',
      dir: this.ascending ? 'asc' : 'desc'
    });

    this.ascending = !this.ascending;
  }

  filterByText() {
    if (this.filterText !== '') {
      this.treeview.dataSource.filter({
        field: 'text',
        operator: 'contains',
        value: this.filterText
      });
    } else {
      this.treeview.dataSource.filter({});
    }
  }
}

## 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>
	<div id="example">

	<div class="box wide">
	<div class="box-col">
	<h4>Expand / Collapse</h4>
	<ul class="options">
	<li>
	<button class="k-button" id="expandAllNodes" click.delegate="expandAllNodes()">Expand all nodes</button>
	</li>
	<li>
	<button class="k-button" id="collapseAllNodes" click.delegate="collapseAllNodes()">Collapse all nodes</button>
	</li>
	</ul>
	</div>
	<div class="box-col">
	<h4>Enable / Disable</h4>
	<ul class="options">
	<li>
	<button class="k-button" id="disableNode" click.delegate="disableNode()">Disable node</button>
	</li>
	<li>
	<button class="k-button" id="enableAllNodes" click.delegate="enableAllNodes()">Enable all nodes</button>
	</li>
	</ul>
	</div>
	<div class="box-col">
	<h4>Add / Remove</h4>
	<ul class="options">
	<li>
	<input id="appendNodeText" value="Node" class="k-textbox" value.bind="appendNodeText" />
	<button class="k-button" id="appendNodeToSelected" click.delegate="appendNodeToSelected()">Append node</button>
	</li>
	<li>
	<button class="k-button" id="removeNode" click.delegate="removeNode()">Remove node</button>
	</li>

	</ul>
	</div>

	<div class="box-col">
	<h4>DataSource interaction</h4>
	<ul class="options">
	<li>
	<button class="k-button" id="sortDataSource" click.delegate="sort()">Sort</button>
	</li>
	<li>
	<input id="filterText" value="Item 1" class="k-textbox" value.bind="filterText" />
	<button class="k-button" id="filterDataSource" click.delegate="filterByText()">Filter by text</button>
	</li>
	</ul>
	</div>
	</div>

	<div class="demo-section k-content">
	<div ak-treeview="k-data-source.bind:data; k-widget.bind: treeview" id="treeview"></div>
	</div>
	</div>
	</template>
	export class API {
	constructor() {
	this.data = [
	{ text: 'Item 1', expanded: true, items: [
	{ text: 'Item 1.1' },
	{ text: 'Item 1.2' },
	{ text: 'Item 1.3' }]
	},
	{ text: 'Item 2', items: [
	{ text: 'Item 2.1' },
	{ text: 'Item 2.2' },
	{ text: 'Item 2.3' }]
	},
	{ text: 'Item 3' }
	];

	this.appendNodeText = '';
	this.filterText = '';
	this.ascending = false;
	}

	expandAllNodes() {
	this.treeview.expand('.k-item');
	}

	collapseAllNodes() {
	this.treeview.collapse('.k-item');
	}

	disableNode() {
	let selectedNode = this.treeview.select();
	this.treeview.enable(selectedNode, false);
	}

	enableAllNodes() {
	this.treeview.select();
	this.treeview.enable('.k-item');
	}

	appendNodeToSelected() {
	let selectedNode = this.treeview.select();
	this.treeview.append({ text: this.appendNodeText }, selectedNode);
	}

	removeNode() {
	let selectedNode = this.treeview.select();
	this.treeview.remove(selectedNode);
	}

	sort() {
	this.treeview.dataSource.sort({
	field: 'text',
	dir: this.ascending ? 'asc' : 'desc'
	});

	this.ascending = !this.ascending;
	}

	filterByText() {
	if (this.filterText !== '') {
	this.treeview.dataSource.filter({
	field: 'text',
	operator: 'contains',
	value: this.filterText
	});
	} else {
	this.treeview.dataSource.filter({});
	}
	}
	}
	<!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());
	}