TreeView: images

app.html

<template>
    <require from="./images.css"></require>
    <div id="example">
        <div class="demo-section k-content">
            <h4>TreeView with images</h4>
            <div ak-treeview="k-data-source.bind: imagesData" id="treeview-images"></div>
        </div>

        <div class="demo-section k-content">
            <h4>TreeView with sprites</h4>
            <div ak-treeview="k-data-source.bind: spritesData" id="treeview"></div>
        </div>
    </div>
</template>

app.js

export class Images {

      constructor() {
        this.imagesData = [
          {
            text: 'Inbox', imageUrl: 'https://demos.telerik.com/kendo-ui/content/web/treeview/mail.png',
            items: [
              { text: 'Read Mail', imageUrl: 'http://demos.telerik.com/kendo-ui/content/web/treeview/readmail.png' }
            ]
          },
          {
            text: 'Drafts', imageUrl: 'https://demos.telerik.com/kendo-ui/content/web/treeview/edit.png'
          },
          {
            text: 'Search Folders', expanded: true, imageUrl: 'https://demos.telerik.com/kendo-ui/content/web/treeview/search.png',
            items: [
              { text: 'Categorized Mail', imageUrl: 'https://demos.telerik.com/kendo-ui/content/web/treeview/search.png' },
              { text: 'Large Mail', imageUrl: 'https://demos.telerik.com/kendo-ui/content/web/treeview/search.png' },
              { text: 'Unread Mail', imageUrl: 'https://demos.telerik.com/kendo-ui/content/web/treeview/search.png' }
            ]
          },
          {
            text: 'Settings', imageUrl: 'https://demos.telerik.com/kendo-ui/content/web/treeview/settings.png'
          }
        ];

        this.spritesData = [{
          text: 'My Documents', expanded: true, spriteCssClass: 'rootfolder', items: [
            {
              text: 'Kendo UI Project', expanded: true, spriteCssClass: 'folder', items: [
                { text: 'about.html', spriteCssClass: 'html' },
                { text: 'index.html', spriteCssClass: 'html' },
                { text: 'logo.png', spriteCssClass: 'image' }
              ]
            },
            {
              text: 'New Web Site', expanded: true, spriteCssClass: 'folder', items: [
                { text: 'mockup.jpg', spriteCssClass: 'image' },
                { text: 'Research.pdf', spriteCssClass: 'pdf' }
              ]
            },
            {
              text: 'Reports', expanded: true, spriteCssClass: 'folder', items: [
                { text: 'February.pdf', spriteCssClass: 'pdf' },
                { text: 'March.pdf', spriteCssClass: 'pdf' },
                { text: 'April.pdf', spriteCssClass: 'pdf' }
              ]
            }
          ]
        }];

        this.spritesData1 = [{
          text: 'My Documents', expanded: true, spriteCssClass: 'rootfolder', items: [
            {
              text: 'Kendo UI Project', expanded: true, spriteCssClass: 'folder', items: [
                { text: 'about.html', spriteCssClass: 'html' },
                { text: 'index.html', spriteCssClass: 'html' },
                { text: 'logo.png', spriteCssClass: 'image' }
              ]
            },
            {
              text: 'New Web Site', expanded: true, spriteCssClass: 'folder', items: [
                { text: 'mockup.jpg', spriteCssClass: 'image' },
                { text: 'Research.pdf', spriteCssClass: 'pdf' }
              ]
            },
            {
              text: 'Reports', expanded: true, spriteCssClass: 'folder', items: [
                { text: 'February.pdf', spriteCssClass: 'pdf' },
                { text: 'March.pdf', spriteCssClass: 'pdf' },
                { text: 'April.pdf', spriteCssClass: 'pdf' }
              ]
            }
          ]
        }];
      }
}

images.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());
}