New to Kendo UI for jQuery? Start a free 30-day trial

Dependencies

configuration

The data source of the widget which contains the dependencies. Can be a JavaScript object which represents a valid data source configuration, a JavaScript array or an existing kendo.data.GanttDependencyDataSource instance.

If the dependencies option is set to a JavaScript object or array the widget will initialize a new kendo.data.GanttDependencyDataSource instance using that value as data source configuration.

If the dependencies option is an existing kendo.data.GanttDependencyDataSource instance the widget will use that instance and will not initialize a new one.

The Kendo UI Gantt dependencies can be bound only to a kendo.data.GanttDependencyDataSource. An exception will be thrown if the dataSource option is set to a kendo.data.DataSource instance.

dependencies

Object|Array|kendo.data.GanttDependencyDataSource

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  dataSource: {
    transport: {
      read: {
        url: "https://demos.telerik.com/service/v2/core/gantttasks"
      }
    },
    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, nullable: 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" },
          expanded: { from: "Expanded" }
        }
      }
    }
  },
  dependencies: {
    transport: {
      read: {
        url: "https://demos.telerik.com/service/v2/core/ganttdependencies"
      }
    },
    schema: {
      model: {
        id: "id",
        fields: {
          predecessorId: { from: "PredecessorID", type: "number" },
          successorId: { from: "SuccessorID", type: "number" },
          type: { from: "Type", type: "number" }
        }
      }
    }
  },
  views: [{ type: "week", selected: true }],
  editable: false
});
</script>

<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  dataSource: [
    {
      id: 1,
      orderId: 0,
      parentId: null,
      title: "Task1",
      start: new Date("2014/6/17 9:00"),
      end: new Date("2014/6/17 11:00")
    },
    {
      id: 2,
      orderId: 1,
      parentId: null,
      title: "Task2",
      start: new Date("2014/6/17 12:00"),
      end: new Date("2014/6/17 14:00")
    }
  ],
  dependencies: [
    {
      predecessorId: 1,
      successorId: 2,
      type: 1
    }
  ],
  editable: false
});
</script>

<div id="gantt"></div>
<script>
var dataSource = new kendo.data.GanttDataSource({
  transport: {
    read: {
      url: "https://demos.telerik.com/service/v2/core/gantttasks"
    }
  },
  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, nullable: 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" },
        expanded: { from: "Expanded" }
      }
    }
  }
});
var dependencyDataSource = new kendo.data.GanttDependencyDataSource({
  transport: {
    read: {
      url: "https://demos.telerik.com/service/v2/core/ganttdependencies"
    }
  },
  schema: {
    model: {
      id: "id",
      fields: {
        predecessorId: { from: "PredecessorID", type: "number" },
        successorId: { from: "SuccessorID", type: "number" },
        type: { from: "Type", type: "number" }
      }
    }
  }
});
$("#gantt").kendoGantt({
  dataSource:dataSource,
  dependencies: dependencyDataSource,
  views: [{ type: "week", selected: true }],
  editable: false
});
</script>