Gantt: resources

app.html

<template>
  <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', 'week', {type:'month', selected: true}]"
             k-height.bind="700"
             k-show-work-hours.bind="false"
             k-show-work-days.bind="false"
             k-snap.bind="false">
      <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 Resources {
  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());
}