Edit this page

dataSource kendo.data.GanttDataSource

The data source of the widget. Configured via the datasource option.

Changes of the data source will be reflected in the widget.

Assigning a new data source would have no effect. Use the setDataSource method instead.

Example - add a Gantt task to the data source

<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")
  }]
});
var gantt = $("#gantt").data("kendoGantt");
gantt.dataSource.add({
  parentId: null,
  start: new Date("2014/6/17 12:00"),
  end: new Date("2014/6/17 14:00"),
  title: "New Task"
});
</script>

Example - update a Gantt task in the data source

<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")
    }
  ]
});
var gantt = $("#gantt").data("kendoGantt");
var task = gantt.dataSource.at(0);
task.set("title", "Project start");
</script>

Example - update multiple Gantt task fields with the update method

<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")
    }
  ]
});
var gantt = $("#gantt").data("kendoGantt");
var task = gantt.dataSource.at(0);
gantt.dataSource.update(task, {
  title: "Project start",
  start: new Date("2014/6/17 12:00"),
  end: new Date("2014/6/17 14:00")
});
</script>

Example - remove a Gantt task from the data source

<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")
    }
  ]
});
var gantt = $("#gantt").data("kendoGantt");
var task = gantt.dataSource.at(0);
gantt.dataSource.remove(task);
</script>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy