Gantt: Api

app.html

<template>
  <div id="example">
    <div class="box wide">
      <div class="box-col">
            <h4>Selection</h4>
            <ul class="options">
                <li>
                    <input type="text" value.bind="index" class="k-textbox" />
                    <button ak-button click.delegate="select()">Select task</button>
                </li>
                <li>
                    <button ak-button click.delegate="gantt.clearSelection()">Clear selected task</button>
                </li>
            </ul>
        </div>
        <div class="box-col">
            <h4>Get selected task</h4>
            <ul class="options">
                <li>
                    <button ak-button click.delegate="getData()">Get data</button>
                </li>
            </ul>
        </div>
    </div>

    <ak-gantt k-data-source.bind="tasksDataSource"
             k-dependencies.bind="dependenciesDataSource"
             k-views.bind="['day', {type:'week', selected: true}, 'month']"
             k-height.bind="700"
             k-show-work-hours.bind="false"
             k-widget.bind="gantt"
             k-show-work-days.bind="false"
             k-snap.bind="false">
      <ak-gantt-col k-field="id" k-title="ID" k-width.bind="60"></ak-gantt-col>
      <ak-gantt-col k-field="title" k-title="Title" k-editable.bind="true" k-sortable.bind="true"></ak-gantt-col>
      <ak-gantt-col k-field="start" k-title="Start Time" k-format="{0:MM/dd/yyyy}" k-width.bind="100" k-editable.bind="true" k-sortable.bind="true"></ak-gantt-col>
      <ak-gantt-col k-field="end" k-title="End Time" k-format="{0:MM/dd/yyyy}" k-width.bind="100" k-editable.bind="true" k-sortable.bind="true"></ak-gantt-col>
    </ak-gantt>
  </div>
</template>

app.js

export class Api {
  index = '0';

  select() {
    this.gantt.select(`tr:eq(${this.index})`);
  }

  getData() {
    let selection = this.gantt.select();
    if (!selection.length) {
      alert('No item selected');
    } else {
      let dataItem = this.gantt.dataItem(selection);
      alert(`${dataItem.title} is ${dataItem.percentComplete * 100}% complete`);
    }
  }

  tasksDataSource = new kendo.data.GanttDataSource({
    transport: {
      read: {
        url: '//demos.telerik.com/kendo-ui/service/GanttTasks',
        dataType: 'jsonp'
      },
      update: {
        url: '//demos.telerik.com/kendo-ui/service/GanttTasks/Update',
        dataType: 'jsonp'
      },
      destroy: {
        url: '//demos.telerik.com/kendo-ui/service/GanttTasks/Destroy',
        dataType: 'jsonp'
      },
      create: {
        url: '//demos.telerik.com/kendo-ui/service/GanttTasks/Create',
        dataType: 'jsonp'
      },
      parameterMap: function(options, operation) {
        if (operation !== 'read') {
          return { models: kendo.stringify(options.models || [options]) };
        }
      }
    },
    schema: {
      model: {
        id: 'id',
        fields: {
          id: { from: 'ID', type: 'number' },
          orderId: { from: 'OrderID', type: 'number', validation: { required: true } },
          parentId: { from: 'ParentID', type: 'number', defaultValue: null, validation: { required: true } },
          start: { from: 'Start', type: 'date' },
          end: { from: 'End', type: 'date' },
          title: { from: 'Title', defaultValue: '', type: 'string' },
          percentComplete: { from: 'PercentComplete', type: 'number' },
          summary: { from: 'Summary', type: 'boolean' },
          expanded: { from: 'Expanded', type: 'boolean', defaultValue: true }
        }
      }
    }
  });

  dependenciesDataSource = new kendo.data.GanttDependencyDataSource({
    transport: {
      read: {
        url: '//demos.telerik.com/kendo-ui/service/GanttDependencies',
        dataType: 'jsonp'
      },
      update: {
        url: '//demos.telerik.com/kendo-ui/service/GanttDependencies/Update',
        dataType: 'jsonp'
      },
      destroy: {
        url: '//demos.telerik.com/kendo-ui/service/GanttDependencies/Destroy',
        dataType: 'jsonp'
      },
      create: {
        url: '//demos.telerik.com/kendo-ui/service/GanttDependencies/Create',
        dataType: 'jsonp'
      },
      parameterMap: function(options, operation) {
        if (operation !== 'read') {
          return { models: kendo.stringify(options.models || [options]) };
        }
      }
    },
    schema: {
      model: {
        id: 'id',
        fields: {
          id: { from: 'ID', type: 'number' },
          predecessorId: { from: 'PredecessorID', type: 'number' },
          successorId: { from: 'SuccessorID', type: 'number' },
          type: { from: 'Type', type: 'number' }
        }
      }
    }
  });
}

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