Vue安装使用甘特图kendo-gantt

背景：

由于在使用kendo-gantt很多API的具体信息不是很清楚，在网上百度了半天也没有什么资料可以参考。于是想着写一个使用教程，供小伙伴们直接上手。

1. 安装 Kendo UI 并且添加主题

   npm install --save @progress/kendo-ui
   npm install --save @progress/kendo-theme-default

2. 安装 Kendo UI Gantt 

   npm install --save @progress/kendo-gantt-vue-wrapper

3. 引入main.js

   import '@progress/kendo-ui' // This will import the entire Kendo UI library
   // As an alternative, you could import only the scripts that are used by a specific widget:
   // import '@progress/kendo-ui/js/kendo.gantt' // Imports only the Gantt script and its dependencies
   
   import '@progress/kendo-theme-default/dist/all.css'
   
   import { Gantt, GanttInstaller} from '@progress/kendo-gantt-vue-wrapper'
   
   Vue.use(GanttInstaller)
   
   new Vue({
       el: '#app',
       components: {
           Gantt
       }
   })

4. 实例：  GanttGraph.vue

 :editable-create='false'时是没有添加任务的按钮的，有自定义添加任务的需求可以设置。

相关API信息可以查阅官网：https://www.telerik.com/kendo-vue-ui/components/gantt-wrapper/api/Gantt/

<template>
  <div class="container">
    <div style="vue-app">
        <kendo-gantt ref="gantt" id="gantt"
            :height = 500           
            :show-work-days="true"
            :editable-create='false'
            :tooltip="tooltip"
            :columns="columns"
            v-on:databinding="onDataBinding"
            v-on:databound="onDataBound"
            :data-source="ganttSource"
            >
          <kendo-gantt-view :type="'day'"></kendo-gantt-view>
          <kendo-gantt-view :type="'week' :selected="true"></kendo-gantt-view>
          <kendo-gantt-view :type="'month'" "></kendo-gantt-view>
        </kendo-gantt>
    </div>
  </div>
</template>
<script>
import { Gantt, GanttView } from '@progress/kendo-gantt-vue-wrapper';

export default {
    name: 'App',
    components: {
      'gantt': Gantt      
    },
    methods: {
        onDataBinding: function (ev) {
            console.log("Gantt is about to be bound!");
        },
        onDataBound: function (ev) {
            console.log("Gantt is now bound!");
        }
    },
    data: function() {
        return {
            localdatasource: [{
                id: 0,
                orderId: 0,
                parentId: null,
                title: "Main Project",
                summary: true,
                expanded: true,
                start: new Date("2014/6/17 9:00"),
                end: new Date("2014/6/17 15:00")
            },
            {
                id: 1,
                orderId: 1,
                parentId: 0,
                title: "Task1",
                percentComplete: 0.47,
                start: new Date("2014/6/17 09:00"),
                end: new Date("2014/6/17 12:00")
            },
                {
                id: 2,
                orderId: 2,
                parentId: 0,
                title: "Task2",
                percentComplete: 0.5,
                start: new Date("2014/6/17 09:30"),
                end: new Date("2014/6/17 12:30")
            }]
        }
    }
}
</script>