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

DataSource

configuration

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

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

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

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

dataSource

Object|Array|kendo.data.GanttDataSource

<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", 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" }
        }
      }
    }
  },
  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")
    },
    {
      id: 3,
      orderId: 2,
      parentId: null,
      title: "Task3",
      start: new Date("2014/6/17 13:00"),
      end: new Date("2014/6/17 15:00")
    }
  ],
  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", 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" }
      }
    }
  }
});
$("#gantt").kendoGantt({
  dataSource:dataSource,
  editable: false
});
</script>