Gantt: task template

app.html

<template>
  <require from="./task-template.css"></require>
  <div id="example">
    <ak-gantt k-data-source.bind="tasksDataSource"
             k-dependencies.bind="dependenciesDataSource"
             k-assignments.bind="assignments"
             k-resources.bind="resources"
             k-views.bind="['day', {type:'week', selected: true}]"
             k-height.bind="700"
             k-row-height.bind="62"
             k-show-work-hours.bind="false"
             k-show-work-days.bind="false"
             k-snap.bind="false">
      <ak-template for="taskTemplate" kendo-template.bind="true">
        # if (resources[0]) { #
        <div class="template" style="background-color: #= resources[0].color #;">
            <img class="resource-img" src="http://demos.telerik.com/kendo-ui/content/web/gantt/resources/#:resources[0].id#.jpg" alt="#: resources[0].id #" />
            <div class="wrapper">
                <strong class="title">#= title # </strong>
                <span class="resource">#= resources[0].name #</span>
            </div>
            <div class="progress" style="width:#= (100 * parseFloat(percentComplete)) #%"> </div>
        </div>
        # } else { #
        <div class="template">
            <div class="wrapper">
                <strong class="title">#= title # </strong>
                <span class="resource">no resource assigned</span>
            </div>
            <div class="progress" style="width:#= (100 * parseFloat(percentComplete)) #%"> </div>
        </div>
        # } #
      </ak-template>
      <ak-gantt-col k-field="title" k-title="Title" k-editable.bind="true" k-sortable.bind="true" k-width.bind="200"></ak-gantt-col>
      <ak-gantt-col k-field="resources" k-title="Assigned resources" k-editable.bind="true"></ak-gantt-col>
    </ak-gantt>
  </div>
</template>

app.js

export class TaskTemplate {
  resources = {
    field: 'resources',
    dataColorField: 'Color',
    dataTextField: 'Name',
    dataSource: {
      transport: {
        read: {
          url: '//demos.telerik.com/kendo-ui/service/GanttResources',
          dataType: 'jsonp'
        }
      },
      schema: {
        model: {
          id: 'id',
          fields: {
            id: { from: 'ID', type: 'number' }
          }
        }
      }
    }
  };
  assignments = {
    dataTaskIdField: 'TaskID',
    dataResourceIdField: 'ResourceID',
    dataValueField: 'Units',
    dataSource: {
      transport: {
        read: {
          url: '//demos.telerik.com/kendo-ui/service/GanttResourceAssignments',
          dataType: 'jsonp'
        },
        update: {
          url: '//demos.telerik.com/kendo-ui/service/GanttResourceAssignments/Update',
          dataType: 'jsonp'
        },
        destroy: {
          url: '//demos.telerik.com/kendo-ui/service/GanttResourceAssignments/Destroy',
          dataType: 'jsonp'
        },
        create: {
          url: '//demos.telerik.com/kendo-ui/service/GanttResourceAssignments/Create',
          dataType: 'jsonp'
        },
        parameterMap: function(options, operation) {
          if (operation !== 'read') {
            return { models: kendo.stringify(options.models || [options]) };
          }
        }
      },
      schema: {
        model: {
          id: 'ID',
          fields: {
            ID: { type: 'number' },
            ResourceID: { type: 'number' },
            Units: { type: 'number' },
            TaskID: { type: 'number' }
          }
        }
      }
    }
  };
  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());
}

task-template.css

/*center treelist cell content vertically*/
.k-gantt .k-treelist td
{
  vertical-align: middle;
}

/*hide the resource labels, as they are present in the task template*/
.k-gantt .k-resource
{
  display: none;
}

/*style the task template*/
.k-task-template {
  height: 100%;
  padding: 0 !important;
}

.template {
  height: 100%;
  overflow: hidden;
}

.resource-img {
  float: left;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin: 8px;
}

.wrapper {
  padding: 8px;
  color: #fff;
}

.k-task-template .wrapper > * {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.title {
  font-weight: bold;
  font-size: 13px;
}

.resource {
  text-transform: uppercase;
  font-size: 9px;
  margin-top: .5em;
}

.progress
{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 4px;
  background: rgba(0, 0, 0, .3);
}