| title | page_title | description |
|---|---|---|
Gantt |
Configuration, methods and events of Kendo UI Gantt |
Code examples for Gantt UI widget configuration, learn how to use methods and which events to set once the gantt UI widget detail is initialized. |
Represents the Kendo UI Gantt widget. Inherits from Widget.
The configuration of the assignments of the gantt resources. An assignment is a one-to-one mapping between a gantt task and a gantt resource containing the number of units for which a resource is assigned to a task.
The data source which contains assignment data items. Can be a JavaScript object which represents a valid data source configuration, a JavaScript array or an existing kendo.data.DataSource instance.
If the dataSource option is set to a JavaScript object or array the widget will initialize a new kendo.data.DataSource instance using that value as data source configuration.
If the dataSource option is an existing kendo.data.DataSource instance the widget will use that instance and will not initialize a new one.
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
dataSource: [
{
id: 0,
orderId: 0,
parentId: null,
title: "Task1",
start: new Date("2014/6/17 9:00"),
end: new Date("2014/7/01 11:00")
},
{
id: 1,
orderId: 1,
parentId: null,
title: "Task2",
start: new Date("2014/6/20 12:00"),
end: new Date("2014/7/02 14:00")
}],
resources: {
dataSource: [
{ id: 0, name: "Resource 1", color: "green", format: "p0" },
{ id: 1, name: "Resource 2", color: "#32cd32", format: "p0" }
]
},
assignments: {
dataSource: [
{ taskId: 0, resourceId: 0, value: 1 },
{ taskId: 0, resourceId: 1, value: 1 },
{ taskId: 1, resourceId: 1, value: 1 }
]
},
views: ["week"],
columns: [
{ field: "title", title: "Title" },
{ field: "resources", title: "Task Resources" }
]
});
</script>
The field of the assignment data item which represents the resource id.
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
dataSource: [
{
id: 0,
orderId: 0,
parentId: null,
title: "Task1",
start: new Date("2014/6/17 9:00"),
end: new Date("2014/7/01 11:00")
},
{
id: 1,
orderId: 1,
parentId: null,
title: "Task2",
start: new Date("2014/6/20 12:00"),
end: new Date("2014/7/02 14:00")
}],
resources: {
dataSource: [
{ id: 0, name: "Resource 1", color: "green", format: "p0" },
{ id: 1, name: "Resource 2", color: "#32cd32", format: "p0" }
]
},
assignments: {
dataResourceIdField: "resource",
dataSource: [
{ taskId: 0, resource: 0, value: 1 },
{ taskId: 0, resource: 1, value: 1 },
{ taskId: 1, resource: 1, value: 1 }
]
},
views: ["week"],
columns: [
{ field: "title", title: "Title" },
{ field: "resources", title: "Task Resources" }
]
});
</script>
The field of the assignment data item which represents the task id.
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
dataSource: [
{
id: 0,
orderId: 0,
parentId: null,
title: "Task1",
start: new Date("2014/6/17 9:00"),
end: new Date("2014/7/01 11:00")
},
{
id: 1,
orderId: 1,
parentId: null,
title: "Task2",
start: new Date("2014/6/20 12:00"),
end: new Date("2014/7/02 14:00")
}],
resources: {
dataSource: [
{ id: 0, name: "Resource 1", color: "green", format: "p0" },
{ id: 1, name: "Resource 2", color: "#32cd32", format: "p0" }
]
},
assignments: {
dataTaskIdField: "id",
dataSource: [
{ id: 0, resourceId: 0, value: 1 },
{ id: 0, resourceId: 1, value: 1 },
{ id: 1, resourceId: 1, value: 1 }
]
},
views: ["week"],
columns: [
{ field: "title", title: "Title" },
{ field: "resources", title: "Task Resources" }
]
});
</script>
The field of the assignment data item which represents the amount of the assigned resource.
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
dataSource: [
{
id: 0,
orderId: 0,
parentId: null,
title: "Task1",
start: new Date("2014/6/17 9:00"),
end: new Date("2014/7/01 11:00")
},
{
id: 1,
orderId: 1,
parentId: null,
title: "Task2",
start: new Date("2014/6/20 12:00"),
end: new Date("2014/7/02 14:00")
}],
resources: {
dataSource: [
{ id: 0, name: "Resource 1", color: "green", format: "p0" },
{ id: 1, name: "Resource 2", color: "#32cd32", format: "p0" }
]
},
assignments: {
dataValueField: "assignedValue",
dataSource: [
{ taskId: 0, resourceId: 0, assignedValue: 1 },
{ taskId: 0, resourceId: 1, assignedValue: 1 },
{ taskId: 1, resourceId: 1, assignedValue: 1 }
]
},
views: ["week"],
columns: [
{ field: "title", title: "Title" },
{ field: "resources", title: "Task Resources" }
]
});
</script>
If set to false the widget will not bind to the data source during initialization. In this case data binding will occur when the change event of the
data source is fired. By default the widget will bind to the data source specified in the configuration.
Setting
autoBindtofalseis useful when multiple widgets are bound to the same data source. Disabling automatic binding ensures that the shared data source doesn't make more than one request to the remote service.
<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")
}
],
autoBind: false
});
</script>
Defines the width of the column resize handle in pixels. Apply a larger value for easier grasping.
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
columns: ["title", "start", "end"],
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")
}],
resizable: true,
columnResizeHandleWidth: 6
});
</script>
The configuration of the Gantt columns. An array of JavaScript objects or strings. A JavaScript objects are interpreted as column configurations. Strings are interpreted as the field to which the column is bound. The Gantt will create a column for every item of the array.
If this setting is not specified the Gantt will create a single column for the task title.
<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
}
],
columns: ["title" , "start"]
});
</script>
The field to which the column is bound. The value of this field is displayed by the column during data binding. The field name should be a valid Javascript identifier and should contain no spaces, no special characters, and the first character should be a letter.
<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
}
],
columns: ["title" , "start", "end"]
});
</script>
The text that is displayed in the column header cell. If not set the field is used.
<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
}
],
columns: [ { field: "title", title: "Task Title" } ]
});
</script>
The format that is applied to the value before it is displayed. Takes the form "{0:format}" where "format" is a standard number format, custom number format, standard date format or a custom date format.
The kendo.format function is used to format the value.
<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")
}
],
dependencies: [
{
predecessorId: 1,
successorId: 2,
type: 1
}
],
columns: [
{ field: "start", title: "Start Time", format: "{0:MM/dd hh:mm}" },
{ field: "end", title: "End Time", format: "{0:MM/dd hh:mm}" }
]
});
</script>
The width of the column. Numeric values are treated as pixels.
<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
}
],
columns: [
{ field: "title", title: "Title", width: "200px" },
{ field: "start", title: "Task Start Time", width: "200px" },
{ field: "end", title: "Task End Time", width: "200px" }
]
});
</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
}
],
columns: [
{ field: "title", title: "Title", width: 200 },
{ field: "start", title: "Task Start Time", width: 200 },
{ field: "end", title: "Task End Time", width: 200 }
]
});
</script>
Specifies whether this column can be edited by the user.
<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
}
],
columns: [
{ field: "title", title: "Title", editable: true }
]
});
</script>
If set to true the user could sort this column by clicking its header cells. By default sorting is disabled.
<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")
}
],
dependencies: [
{
predecessorId: 1,
successorId: 2,
type: 1
}
],
columns: [
{ field: "title", title: "Title", sortable: true }
]
});
</script>
If set to false the "current time" marker of the Gantt would not be displayed.
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
dataSource: [{
id: 1,
orderId: 0,
parentId: null,
title: "Task1",
start: new Date(),
end: kendo.date.addDays(new Date(), 1)
}],
currentTimeMarker: false,
views: [ "day", "week", "month" ]
});
</script>
The update interval of the "current time" marker, in milliseconds.
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
dataSource: [{
id: 1,
orderId: 0,
parentId: null,
title: "Task1",
start: new Date(),
end: kendo.date.addDays(new Date(), 1)
}],
currentTimeMarker: {
updateInterval: 100
},
views: [ "day", "week", "month" ]
});
</script>
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 thedataSourceoption is set to akendo.data.DataSourceinstance.
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
dataSource: {
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/gantttasks",
dataType: "jsonp"
}
},
schema: {
model: {
id: "id",
fields: {
id: { from: "ID", type: "number" },
orderId: { from: "OrderID", type: "number", validation: { required: true } },
parentId: { from: "ParentID", type: "number", 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" },
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: "http://demos.telerik.com/kendo-ui/service/gantttasks",
dataType: "jsonp"
}
},
schema: {
model: {
id: "id",
fields: {
id: { from: "ID", type: "number" },
orderId: { from: "OrderID", type: "number", validation: { required: true } },
parentId: { from: "ParentID", type: "number", 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" },
expanded: { from: "Expanded" }
}
}
}
});
$("#gantt").kendoGantt({
dataSource:dataSource,
editable: false
});
</script>
If set to some date and it is between the range start and range end of the selected view, the timeline of the currently selected view is scrolled to start from this date.
<div id="gantt1"></div>
<script>
$("#gantt1").kendoGantt({
dataSource: [{
id: 1,
orderId: 0,
parentId: null,
title: "Task1",
start: new Date("2016/09/20 09:00"),
end: new Date("2016/09/20 10:00")
}],
date: new Date("2016/09/20"),
views: [
{
type: "day", selected: true,
range: {
start: new Date("2016/09/1"),
end: new Date("2016/10/15")
},
}
]
});
</script>
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 thedataSourceoption is set to akendo.data.DataSourceinstance.
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
dataSource: {
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/gantttasks",
dataType: "jsonp"
}
},
schema: {
model: {
id: "id",
fields: {
id: { from: "ID", type: "number" },
orderId: { from: "OrderID", type: "number", validation: { required: true } },
parentId: { from: "ParentID", type: "number", 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" },
expanded: { from: "Expanded" }
}
}
}
},
dependencies: {
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/ganttdependencies",
dataType: "jsonp"
}
},
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: "http://demos.telerik.com/kendo-ui/service/gantttasks",
dataType: "jsonp"
}
},
schema: {
model: {
id: "id",
fields: {
id: { from: "ID", type: "number" },
orderId: { from: "OrderID", type: "number", validation: { required: true } },
parentId: { from: "ParentID", type: "number", 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" },
expanded: { from: "Expanded" }
}
}
}
});
var dependencyDataSource = new kendo.data.GanttDependencyDataSource({
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/ganttdependencies",
dataType: "jsonp"
}
},
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>
If set to false the user won't be able to create, modify or delete tasks and dependencies.
<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>
If set to true the Gantt will display a confirmation dialog when the user deletes a task or a dependency.
<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: {
confirmation: false
}
});
</script>
If set to false the user won't be able to create tasks.
<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: {
create: false
}
});
</script>
If set to false the user won't be able to create dependencies.
<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: {
dependencyCreate: false
}
});
</script>
If set to false the user won't be able to delete dependencies.
<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: {
dependencyDestroy: false
}
});
</script>
If set to false the user won't be able to edit the percentComplete of the tasks.
<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: {
dragPercentComplete: false
}
});
</script>
If set to false the user won't be able to delete tasks.
<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: {
destroy: false
}
});
</script>
If set to false the user won't be able to move tasks.
<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: {
move: false
}
});
</script>
If set to false the user won't be able to reorder tasks in the task list.
<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: {
reorder: false
}
});
</script>
If set to false the user won't be able to resize tasks.
<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: {
resize: false
}
});
</script>
The template which renders the editor.
The template should contain elements whose name HTML attributes are set as the editable fields. This is how the Gantt will know
which field to update. The other option is to use MVVM bindings in order to bind HTML elements to data item fields.
Use the
roledata attribute to initialize Kendo UI widgets in the template. Check data attribute initialization for more info.
<script id="editor" type="text/x-kendo-template">
<h3>Edit meeting</h3>
<p>
<label>Title: <input name="title" /></label>
</p>
<p>
<label>Start: <input data-role="datetimepicker" name="start" /></label>
</p>
<p>
<label>End: <input data-role="datetimepicker" name="end" /></label>
</p>
</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")
}
],
editable: {
template: $("#editor").html()
}
});
</script>
If set to false the user won't be able to update tasks.
<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: {
update: false
}
});
</script>
<script id="editor" type="text/x-kendo-template">
<h3>Edit meeting</h3>
<p>
<label>Title: <input data-bind="value: title" /></label>
</p>
<p>
<label>Start: <input data-role="datetimepicker" data-bind="value: start" /></label>
</p>
<p>
<label>End: <input data-role="datetimepicker" data-bind="value: end" /></label>
</p>
</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")
}
],
editable: {
template: $("#editor").html()
}
});
</script>
If set to true the user could navigate the widget using the keyboard. By default keyboard navigation is disabled.
Even when the keyboard navigation is disabled the user could delete selected tasks or dependencies with the
Delkey.
<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
}
],
navigatable: true
});
</script>
Sets the start of the work day.
<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")
}
],
workDayStart: new Date("2014/6/17 10:00")
});
</script>
Sets the end of the work day.
<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")
}
],
workDayEnd: new Date("2014/6/17 15:00")
});
</script>
The start of working week (index based).
The
workWeekEndoption is supported when showWorkDays istrue.
<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/24 11:00")
}
],
workWeekStart: 2
});
</script>
The end of working week (index based).
The
workWeekEndoption is supported when showWorkDays istrue.
<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/24 11:00")
}
],
workWeekEnd: 4
});
</script>
The span of an hour slot.
<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 15:00")
}
],
hourSpan: 2
});
</script>
If set to true the Gantt will snap tasks to the nearest slot during dragging (resizing or moving). Set it to false to allow free moving and resizing of tasks.
<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")
}],
snap: false
});
</script>
The height of the widget. Numeric values are treated as pixels.
<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")
}],
height: 400
});
</script>
The width of the task list. Numeric values are treated as pixels.
<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")
}],
listWidth: 400
});
</script>
The configuration of the Gantt messages. Use this option to customize or localize the Gantt messages.
The configuration of the Gantt action messages. Use this option to customize or localize the Gantt action messages.
The text similar to "Add child" displayed as Gantt "add child" buttons.
<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")
}],
messages: {
actions: {
addChild: "Add new Child"
}
}
});
</script>
The text similar to "Append" displayed as Gantt "append" buttons.
<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")
}],
messages: {
actions: {
append: "Add new Task"
}
}
});
</script>
The text similar to "Add below" displayed as Gantt "add below" buttons.
<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")
}],
messages: {
actions: {
insertAfter: "Add Task Below"
}
}
});
</script>
The text similar to "Add above" displayed as Gantt "add above" buttons.
<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")
}],
messages: {
actions: {
insertBefore: "Add Task Above"
}
}
});
</script>
The text of "Export to PDF" button of the Gantt toolbar.
<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")
}],
toolbar: [ "pdf" ],
messages: {
actions: {
pdf: "PDF Export"
}
}
});
</script>
The text similar to "Cancel" displayed in Gantt.
<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")
}],
messages: {
cancel: "Undo"
}
});
</script>
messages.deleteDependencyConfirmation String (default: "Are you sure you want to delete this dependency?")
The text similar to "Are you sure you want to delete this dependency?" displayed in Gantt dependency delete dialog.
<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 10:00")
}, {
id: 2,
orderId: 0,
parentId: null,
title: "Task2",
start: new Date("2014/6/17 11:00"),
end: new Date("2014/6/17 12:00")
}],
dependencies: [{
id: 1,
type: 1,
predecessorId: 1,
successorId: 2
}],
messages: {
deleteDependencyConfirmation: "Proceed with dependency deletion?"
}
});
</script>
The text similar to "Delete dependency" displayed in Gantt dependency delete dialog title.
<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 10:00")
}, {
id: 2,
orderId: 0,
parentId: null,
title: "Task2",
start: new Date("2014/6/17 11:00"),
end: new Date("2014/6/17 12:00")
}],
dependencies: [{
id: 1,
type: 1,
predecessorId: 1,
successorId: 2
}],
messages: {
deleteDependencyWindowTitle: "Delete dependency?"
}
});
</script>
The text similar to "Are you sure you want to delete this task?" displayed in Gantt task delete dialog.
<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")
}],
messages: {
deleteTaskConfirmation: "Proceed with task deletion?"
}
});
</script>
The text similar to "Delete task" displayed in Gantt task delete dialog title.
<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")
}],
messages: {
deleteTaskWindowTitle: "Delete task?"
}
});
</script>
The text similar to "Delete" displayed in Gantt.
<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")
}],
messages: {
destroy: "Destroy"
}
});
</script>
The configuration of the Gantt editor messages. Use this option to customize or localize the Gantt editor messages.
The text similar to "Assign" displayed in Gantt task editor.
<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")
}],
resources: {
dataColorField: "key",
dataSource: [
{ id: 0, name: "Resource 1", key: "green" },
{ id: 1, name: "Resource 2", key: "#32cd32" }
]
},
assignments: {
dataSource: [
{ taskId: 0, resourceId: 1, value: 1 }
]
},
messages: {
editor: {
assignButton:"Assign Resources"
}
}
});
</script>
The text similar to "Task" displayed in Gantt task editor.
<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")
}],
messages: {
editor: {
editorTitle:"Edit Task"
}
}
});
</script>
The text similar to "End" displayed in Gantt task editor.
<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")
}],
messages: {
editor: {
end:"Task End"
}
}
});
</script>
The text similar to "Complete" displayed in Gantt task editor.
<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")
}],
messages: {
editor: {
percentComplete:"Task Progress"
}
}
});
</script>
The text similar to "Resources" displayed in Gantt task editor.
<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")
}],
resources: {
dataColorField: "key",
dataSource: [
{ id: 0, name: "Resource 1", key: "green" },
{ id: 1, name: "Resource 2", key: "#32cd32" }
]
},
assignments: {
dataSource: [
{ taskId: 0, resourceId: 1, value: 1 }
]
},
messages: {
editor: {
resources:"Task Resources"
}
}
});
</script>
The text similar to "Resources" displayed in Gantt task editor.
<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")
}],
resources: {
dataColorField: "key",
dataSource: [
{ id: 0, name: "Resource 1", key: "green" },
{ id: 1, name: "Resource 2", key: "#32cd32" }
]
},
assignments: {
dataSource: [
{ taskId: 0, resourceId: 1, value: 1 }
]
},
messages: {
editor: {
resourcesEditorTitle:"Assign Task Resources"
}
}
});
</script>
The text similar to "Resources" displayed in Gantt task editor.
<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")
}],
resources: {
dataColorField: "key",
dataSource: [
{ id: 0, name: "Resource 1", key: "green" },
{ id: 1, name: "Resource 2", key: "#32cd32" }
]
},
assignments: {
dataSource: [
{ taskId: 0, resourceId: 1, value: 1 }
]
},
messages: {
editor: {
resourcesHeader:"Available Resources"
}
}
});
</script>
The text similar to "Start" displayed in Gantt task editor.
<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")
}],
messages: {
editor: {
start:"Task Start"
}
}
});
</script>
The text similar to "Title" displayed in Gantt task editor.
<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")
}],
messages: {
editor: {
title:"Task Title"
}
}
});
</script>
The text similar to "Units" displayed in Gantt task editor.
<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")
}],
resources: {
dataColorField: "key",
dataSource: [
{ id: 0, name: "Resource 1", key: "green" },
{ id: 1, name: "Resource 2", key: "#32cd32" }
]
},
assignments: {
dataSource: [
{ taskId: 0, resourceId: 1, value: 1 }
]
},
messages: {
editor: {
unitsHeader:"Resource Units"
}
}
});
</script>
The text similar to "Save" displayed in Gantt.
<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")
}],
messages: {
save: "Update"
}
});
</script>
The configuration of the Gantt view messages. Use this option to customize or localize the Gantt view messages.
The text similar to "Day" displayed as Gantt "day" view title.
<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")
}],
messages: {
views: {
day: "Day view"
}
}
});
</script>
The text similar to "End" displayed in Gantt resize hint.
<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")
}],
messages: {
views: {
end: "Task End"
}
}
});
</script>
The text similar to "Month" displayed as Gantt "month" view title.
<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")
}],
messages: {
views: {
month: "Month view"
}
}
});
</script>
The text similar to "Start" displayed in Gantt resize hint.
<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")
}],
messages: {
views: {
start: "Task Start"
}
}
});
</script>
The text similar to "Week" displayed as Gantt "week" view title.
<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")
}],
messages: {
views: {
week: "Week view"
}
}
});
</script>
The text similar to "Year" displayed as Gantt "year" view title.
<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")
}],
messages: {
views: {
Year: "Year view"
}
}
});
</script>
Configures the Kendo UI Gantt PDF export settings.
The author of the PDF document.
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
toolbar: ["pdf"],
pdf: {
author: "John Doe"
},
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")
}
]
});
</script>
A flag indicating whether to produce actual hyperlinks in the exported PDF file.
It's also possible to pass a CSS selector as argument. All matching links will be ignored.
Available in versions 2015.3.1020 and later
The creator of the PDF document.
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
toolbar: ["pdf"],
pdf: {
creator: "John Doe"
},
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")
}
]
});
</script>
The date when the PDF document is created. Defaults to new Date().
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
toolbar: ["pdf"],
pdf: {
date: new Date("2014/11/03")
},
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")
}
]
});
</script>
Specifies the file name of the exported PDF file.
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
toolbar: ["pdf"],
pdf: {
fileName: "Tasks.pdf"
},
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")
}
]
});
</script>
If set to true, the content will be forwarded to proxyURL even if the browser supports saving files locally.
Specifies the keywords of the exported PDF file.
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
toolbar: ["pdf"],
pdf: {
keywords: "project tasks"
},
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")
}
]
});
</script>
Set to true to reverse the paper dimensions if needed such that width is the larger edge.
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
toolbar: ["pdf"],
pdf: {
landscape: true
},
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")
}
]
});
</script>
Specifies the margins of the page (numbers or strings with units). Supported units are "mm", "cm", "in" and "pt" (default).
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
toolbar: ["pdf"],
pdf: {
margin: {
left: 10,
right: "10pt",
top: "10mm",
bottom: "1in"
}
},
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")
}
]
});
</script>
The bottom margin. Numbers are considered as "pt" units.
The left margin. Numbers are considered as "pt" units.
The right margin. Numbers are considered as "pt" units.
The top margin. Numbers are considered as "pt" units.
Specifies the paper size of the PDF document. The default "auto" means paper size is determined by content.
The size of the content in pixels will match the size of the output in points (1 pixel = 1/72 inch).
Supported values:
- A predefined size: "A4", "A3" etc
- An array of two numbers specifying the width and height in points (1pt = 1/72in)
- An array of two strings specifying the width and height in units. Supported units are "mm", "cm", "in" and "pt".
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
toolbar: ["pdf"],
pdf: {
paperSize: ["20mm", "20mm"]
},
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")
}
]
});
</script>
The URL of the server side proxy which will stream the file to the end user.
A proxy will be used when the browser isn't capable of saving files locally. Such browsers are IE version 9 and lower and Safari.
The developer is responsible for implementing the server-side proxy.
The proxy will receive a POST request with the following parameters in the request body:
- contentType: The MIME type of the file
- base64: The base-64 encoded file content
- fileName: The file name, as requested by the caller.
The proxy should return the decoded file with set "Content-Disposition" header.
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
toolbar: ["pdf"],
pdf: {
proxyURL: "/save"
},
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")
}
]
});
</script>
A name or keyword indicating where to display the document returned from the proxy.
If you want to display the document in a new window or iframe,
the proxy should set the "Content-Disposition" header to inline; filename="<fileName.pdf>".
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
toolbar: ["pdf"],
pdf: {
forceProxy: true,
proxyURL: "/save",
proxyTarget: "_blank"
},
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")
}
]
});
</script>
Sets the subject of the PDF file.
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
toolbar: ["pdf"],
pdf: {
subject: "Tasks"
},
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")
}
]
});
</script>
Sets the title of the PDF file.
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
toolbar: ["pdf"],
pdf: {
title: "Tasks"
},
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")
}
]
});
</script>
Configures the Kendo UI Gantt range settings.
If set to some date the timeline of all views will start from this date.
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
dataSource: [{
id: 1,
orderId: 0,
parentId: null,
title: "Task1",
start: new Date("2016/6/17 9:00"),
end: new Date("2016/6/20 11:00")
}],
range: {
start: new Date("2016/06/2")
},
views: [
{ type: "day" },
{ type: "week", selected: true },
{ type: "month" }
]
});
</script>
If set to some date the timeline of all views will end to this date.
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
dataSource: [{
id: 1,
orderId: 0,
parentId: null,
title: "Task1",
start: new Date("2016/6/17 9:00"),
end: new Date("2016/6/20 11:00")
}],
range: {
end: new Date("2016/06/29")
},
views: [
{ type: "day" },
{ type: "week", selected: true },
{ type: "month" }
]
});
</script>
If set to true allows users to resize columns by dragging their header borders. By default resizing is disabled.
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
columns: ["title", "start", "end"],
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")
}],
resizable: true
});
</script>
If set to false the user won't be able to select tasks in the Gantt. By default selection is enabled and triggers the change event.
<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")
}],
selectable: false
});
</script>
If set to false, Gantt views will show all days of the week. By default the views display only business days.
<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/23 11:00")
}],
showWorkDays: false
});
</script>
If set to false, the day view will show all hours of the day. By default the view displays only business hours.
<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 18:00")
}],
showWorkHours: false
});
</script>
The template used to render the gantt tasks.
The fields which can be used in the template are the task fields
<script id="task-template" type="text/x-kendo-template">
<div> #= title # </div>
<div>
Start at #: start.toLocaleTimeString() #
<br />
End at #: end.toLocaleTimeString() #
</div>
</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 12:00")
}, {
id: 2,
orderId: 0,
parentId: null,
title: "Task2",
start: new Date("2014/6/17 11:00"),
end: new Date("2014/6/17 14:00")
}],
showWorkHours: false,
rowHeight: 70,
taskTemplate: $("#task-template").html()
});
</script>
If a String value is assigned to the toolbar configuration option, it will be treated as a single string template for the whole Gantt Toolbar,
and the string value will be passed as an argument to a kendo.template() function.
If a Function value is assigned (it may be a kendo.template() function call or a generic function reference), then the return value of the function will be used to render the Gantt Toolbar contents.
If an Array value is assigned, it will be treated as the list of commands displayed in the Gantt Toolbar. Commands can be custom or built-in ("append", "pdf").
The "append" command adds a new task to the gantt.
The "pdf" command exports the gantt in PDF format.
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
toolbar: "<p>My string template in a paragraph.</p>",
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")
}
]
});
</script>
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
toolbar: kendo.template("<p>My function template.</p>"),
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")
}
]
});
</script>
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
toolbar: [
{ name: "append" },
{ name: "pdf" }
],
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")
}
]
});
</script>
The name of the toolbar command. Either a built-in ("append" and "pdf") or custom. The name is reflected in one of the CSS classes, which is applied to the button - k-gantt-name.
This class can be used to obtain reference to the button after Gantt initialization and attach click handlers.
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
toolbar: [
{ name: "append" },
{ name: "pdf" },
{ name: "custom" }
],
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")
}
]
});
$(".k-gantt-custom").click(function(e){
// handler body
});
</script>
The template which renders the command. By default renders a button.
<div id="gantt"></div>
<script id="template" type="text/x-kendo-template">
<a class="k-button" href="\#" onclick="return toolbar_click()">Command</a>
</script>
<script>
function toolbar_click() {
console.log("Toolbar command is clicked!");
return false;
}
$("#gantt").kendoGantt({
toolbar: [
{ template: kendo.template($("#template").html()) }
],
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")
}
]
});
</script>
<div id="gantt"></div>
<script>
function toolbar_click() {
console.log("Toolbar command is clicked!");
return false;
}
$("#gantt").kendoGantt({
toolbar: [
{
template: '<a class="k-button" href="\\#" onclick="return toolbar_click()">Command</a>'
}
],
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")
}
]
});
</script>
The text displayed by the command button. If not set the name` option would be used as the button text instead.
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
toolbar: [
{ name: "append", text: "Add new" }
],
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")
}
]
});
</script>
The task tooltip configuration options.
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
tooltip: {
visible: true
},
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")
}
]
});
</script>
The template which renders the tooltip.
The fields which can be used in the template are:
- task - the gantt task, for which the template is shown
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
tooltip: {
visible: true,
template: "Title: #= task.title #"
},
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")
}
]
});
</script>
If set to false the gantt will not display the task tooltip. By default the task tooltip is displayed.
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
tooltip: {
visible: false
},
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")
}
]
});
</script>
The views displayed by the Gantt and their configuration. The array items can be either objects specifying the view configuration or strings representing the view types (assuming default configuration). By default the Kendo UI Gantt widget displays "day", "week", and "month" views.
If set to some date and it is between the range start and range end of the selected view, the timeline of the currently selected view is scrolled to start from this date.
Overrides the date option of the gantt.
<div id="gantt1"></div>
<script>
$("#gantt1").kendoGantt({
dataSource: [{
id: 1,
orderId: 0,
parentId: null,
title: "Task1",
start: new Date("2016/09/20 09:00"),
end: new Date("2016/09/20 10:00")
}],
views: [
{
type: "day", selected: true,
date: new Date("2016/09/20"),
range: {
start: new Date("2016/09/1"),
end: new Date("2016/10/15")
},
}
]
});
</script>
Configures the view range settings.
If set to some date the timeline of the view will start from this date.
Overrides the range.start option of the gantt.
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
dataSource: [{
id: 1,
orderId: 0,
parentId: null,
title: "Task1",
start: new Date("2016/6/17 9:00"),
end: new Date("2016/6/20 11:00")
}],
views: [
{ type: "day" },
{ type: "week", selected: true,
range: {
start: new Date("2016/06/2")
}},
{ type: "month" }
]
});
</script>
If set to some date the timeline of the view will end to this date.
Overrides the range.end option of the gantt.
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
dataSource: [{
id: 1,
orderId: 0,
parentId: null,
title: "Task1",
start: new Date("2016/6/17 9:00"),
end: new Date("2016/6/20 11:00")
}],
views: [
{ type: "day" },
{ type: "week", selected: true,
range: {
end: new Date("2016/06/29")
}},
{ type: "month" }
]
});
</script>
The type of the view. The built-in views are: "day", "week", "month" and "year".
If set to true the view will be initially selected by the Gantt widget. The default selected view is "day".
If more than one view is selected then last of them will prevail.
<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/20 11:00")
}],
views: [
{ type: "day" },
{ type: "week", selected: true },
{ type: "month" }
]
});
</script>
The size of the time slot headers. Values are treated as pixels.
<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/20 11:00")
}],
views: [
{ type: "day" },
{ type: "week", selected: true, slotSize: 130 },
{ type: "month" }
]
});
</script>
The template used to render the time slots in "day" view
<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")
}],
views: [
{ type: "day", timeHeaderTemplate: kendo.template("#=kendo.toString(start, 'T')#") },
{ type: "week" },
{ type: "month" }
]
});
</script>
The template used to render the day slots in "day" and "week" views.
<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")
}],
views: [
{
type: "day",
dayHeaderTemplate: kendo.template("#=kendo.toString(start, 'D')#")
},
{ type: "week" },
{ type: "month" }
]
});
</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/22 11:00")
}],
views: [
{ type: "day"},
{ type: "week",
dayHeaderTemplate: kendo.template("#=kendo.toString(start, 'd')#"),
selected: true
},
{ type: "month" }
]
});
</script>
The template used to render the week slots in "week" and "month" views.
<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/22 11:00")
}],
views: [
{ type: "day"},
{ type: "week",
weekHeaderTemplate: "#=kendo.toString(start, 'D')# - #=kendo.toString(kendo.date.addDays(end, -1), 'D')#",
selected: true
},
{ type: "month" }
]
});
</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/7/01 11:00")
}],
views: [
{ type: "day"},
{ type: "week"},
{
type: "month",
weekHeaderTemplate: "#=kendo.toString(start, 'M/dd')# - #=kendo.toString(kendo.date.addDays(end, -1), 'M/dd')#",
selected: true
}
]
});
</script>
The template used to render the month slots in "month" and "year" views.
<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/7/01 11:00")
}],
views: [
{ type: "day"},
{ type: "week"},
{
type: "month",
monthHeaderTemplate: "#=kendo.toString(start, 'MMMM, yyyy')#",
selected: true
}
]
});
</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/7/01 11:00")
}],
views: [
{ type: "day"},
{ type: "week"},
{ type: "month"},
{
type: "year",
monthHeaderTemplate: "#=kendo.toString(start, 'MMMM, yyyy')#",
selected: true
}
]
});
</script>
The template used to render the year slots in "year" view.
<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/7/01 11:00")
}],
views: [
{ type: "day"},
{ type: "week"},
{ type: "month"},
{
type: "year",
yearHeaderTemplate: "#=kendo.toString(start, 'yyyy')#",
selected: true
}
]
});
</script>
The format used to display the start and end dates in the resize tooltip.
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
dataSource: [{
id: 1,
orderId: 0,
parentId: null,
title: "Task1",
start: new Date("2014/6/17"),
end: new Date("2014/6/18")
}],
snap: false,
views: [
{
type: "week",
resizeTooltipFormat: "yyyy/M/dd h:mm"
},
]
});
</script>
The configuration of the gantt resource(s). A gantt resource is optional metadata that can be associated with a gantt task.
The field of the resource data item containing the format of the resource value, which could be assigned to a gantt task. The data item format value could be any valid kendo format.
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
dataSource: [{
id: 0,
orderId: 0,
parentId: null,
title: "Task1",
start: new Date("2014/6/17 9:00"),
end: new Date("2014/7/01 11:00")
}],
resources: {
dataFormatField: "unit",
dataSource: [
{ id: 0, name: "Resource 1", color: "green", unit: "p0" },
{ id: 1, name: "Resource 2", color: "#32cd32", unit: "p0" }
]
},
assignments: {
dataSource: [
{ taskId: 0, resourceId: 1, value: 1 }
]
},
views: ["week"],
columns: [
{ field: "title", title: "Title" },
{ field: "resources", title: "Task Resources" }
]
});
</script>
The field of the resource data item which contains the resource color.
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
dataSource: [{
id: 0,
orderId: 0,
parentId: null,
title: "Task1",
start: new Date("2014/6/17 9:00"),
end: new Date("2014/7/01 11:00")
}],
resources: {
dataColorField: "key",
dataSource: [
{ id: 0, name: "Resource 1", key: "green" },
{ id: 1, name: "Resource 2", key: "#32cd32" }
]
},
assignments: {
dataSource: [
{ taskId: 0, resourceId: 1, value: 1 }
]
},
views: ["week"]
});
</script>
The data source which contains resource data items. Can be a JavaScript object which represents a valid data source configuration, a JavaScript array or an existing kendo.data.DataSource instance.
If the dataSource option is set to a JavaScript object or array the widget will initialize a new kendo.data.DataSource instance using that value as data source configuration.
If the dataSource option is an existing kendo.data.DataSource instance the widget will use that instance and will not initialize a new one.
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
dataSource: [{
id: 0,
orderId: 0,
parentId: null,
title: "Task1",
start: new Date("2014/6/17 9:00"),
end: new Date("2014/7/01 11:00")
}],
resources: {
dataSource: [
{ id: 0, name: "Resource 1", color: "green" },
{ id: 1, name: "Resource 2", color: "#32cd32" }
]
},
assignments: {
dataSource: [
{ taskId: 0, resourceId: 1, value: 1 }
]
},
views: ["week"]
});
</script>
The field of the resource data item which represents the resource text.
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
dataSource: [{
id: 0,
orderId: 0,
parentId: null,
title: "Task1",
start: new Date("2014/6/17 9:00"),
end: new Date("2014/7/01 11:00")
}],
resources: {
dataTextField: "resource",
dataSource: [
{ id: 0, resource: "Resource 1", color: "green" },
{ id: 1, resource: "Resource 2", color: "#32cd32" }
]
},
assignments: {
dataSource: [
{ taskId: 0, resourceId: 1, value: 1 }
]
},
views: ["week"]
});
</script>
The field of the gantt task which contains the assigned resource objects.
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
dataSource: [{
id: 0,
orderId: 0,
parentId: null,
title: "Task1",
start: new Date("2014/6/17 9:00"),
end: new Date("2014/7/01 11:00")
}],
resources: {
field: "taskResources",
dataSource: [
{ id: 0, name: "Resource 1", color: "green", format: "p0" },
{ id: 1, name: "Resource 2", color: "#32cd32", format: "p0" }
]
},
assignments: {
dataSource: [
{ taskId: 0, resourceId: 1, value: 1 }
]
},
views: ["week"],
columns: [
{ field: "title", title: "Title" },
{ field: "taskResources", title: "Task Resources" }
]
});
</script>
The height of the table rows. Numeric values are treated as pixels.
<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 10:00")
}, {
id: 2,
orderId: 0,
parentId: null,
title: "Task2",
start: new Date("2014/6/17 11:00"),
end: new Date("2014/6/17 12:00")
}],
dependencies: [{
id: 1,
type: 1,
predecessorId: 1,
successorId: 2
}],
rowHeight: 100
});
</script>
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.
<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>
<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>
<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>
<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>
The dependencies data source of the widget. Configured via the dependencies option.
Changes of the data source will be reflected in the widget.
Assigning a new data source would have no effect. Use the setDependenciesDataSource method instead.
<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");
gantt.dependencies.add({
predecessorId: 1,
successorId: 2,
type: 1
});
</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
}
]
});
var gantt = $("#gantt").data("kendoGantt");
var dependency = gantt.dependencies.at(0);
gantt.dependencies.remove(dependency);
</script>
Clears the currently selected task or dependency.
<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");
// select the first task
gantt.select("tr:eq(0)");
gantt.clearSelection();
</script>
Returns the data item to which the specified table row from the TreeList is bound
A string, DOM element or jQuery object which represents the table row. A string is treated as a jQuery selector.
kendo.data.GanttTask the task data item to which the specified table row is bound.
<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.dataItem("tr:eq(0)");
console.log(task.title); // displays "Task1"
</script>
Sets date to the widget that will scroll the timeline of the current view to this date.
A Date that will be set to the currently selected view.
Date that is set to the currently seleted view.
<div id="gantt1"></div>
<script>
$("#gantt1").kendoGantt({
dataSource: [{
id: 1,
orderId: 0,
parentId: null,
title: "Task1",
start: new Date("2016/09/20 09:00"),
end: new Date("2016/09/20 10:00")
}],
views: [
{
type: "day", selected: true,
range: {
start: new Date("2016/09/1"),
end: new Date("2016/10/15")
}
}
]
});
var gantt = $("#gantt1").data("kendoGantt");
gantt.date(new Date("2016/09/20"));
</script>
Prepares the widget for safe removal from DOM. Detaches all event handlers and removes jQuery.data attributes to avoid memory leaks. Calls destroy method of any child Kendo widgets.
This method does not remove the widget element from DOM.
<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.destroy();
</script>
Sets range to the widget.
An Object that have start and end parameters of type Date.
Object the object with start and end values of the selected view.
<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 range = {
start: new Date("2014/06/2"),
end: new Date("2014/06/23")
};
gantt.range(range);
</script>
Renders all tasks and dependencies using the current data items.
<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.refresh();
</script>
Renders all dependencies using the current data items.
<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
}
]
});
var gantt = $("#gantt").data("kendoGantt");
gantt.refreshDependencies();
</script>
Removes the specified Gantt dependency.
The dependency which should be removed. Also accepts a string which is the uid of the dependency which should be removed.
<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
}
]
});
var gantt = $("#gantt").data("kendoGantt");
var dependency = gantt.dependencies.at(0);
gantt.removeDependency(dependency);
</script>
Removes the specified Gantt task.
The task which should be removed. Also accepts a string which is the uid of the task which should be removed.
<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.removeTask(task);
</script>
Initiates the PDF export and returns a promise. Also triggers the pdfExport event.
Calling this method may trip the built-in browser pop-up blocker. To avoid that, call this method as a response to an end-user action, e.g. a button click.
Promise A promise that will be resolved when the export completes. The same promise is available in the pdfExport event arguments.
<button id="export">Export to PDF</button>
<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")
}
]
});
$("#export").click(function(e) {
var gantt = $("#gantt").data("kendoGantt");
gantt.saveAsPDF();
});
</script>
Gets or sets the table row which is selected.
A string, DOM element or jQuery object which represents the table row. A string is treated as a jQuery selector.
jQuery the selected table row.
<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.select("tr:first");
</script>
Sets the tasks data source of the widget.
The tasks data source to which the widget should be bound.
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt();
var gantt = $("#gantt").data("kendoGantt");
var dataSource = new kendo.data.GanttDataSource({
data: [
{
id: 1,
orderId: 0,
parentId: null,
title: "Task1",
start: new Date("2014/6/17 9:00"),
end: new Date("2014/6/17 11:00")
}
]
});
gantt.setDataSource(dataSource);
</script>
Sets the dependencies data source of the widget.
The dependencies data source to which the widget should be bound.
<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 dependenciesDataSource = new kendo.data.GanttDependencyDataSource({
data: [
{
predecessorId: 1,
successorId: 2,
type: 1
}
]
});
gantt.setDependenciesDataSource(dependenciesDataSource);
</script>
Gets or sets the current Gantt view.
The view type to select.
kendo.ui.GanttView the current Gantt view.
<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.view("month");
</script>
Fired before the widget binds to its data source.
The event handler function context (available via the this keyword) will be set to the widget instance.
The widget instance which fired the event.
If invoked prevents the data bind action and dataBound event will not fire.
<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")
}
],
dataBinding: function(e) {
console.log("dataBinding");
}
});
</script>
<div id="gantt"></div>
<script>
function gantt_dataBinding(e) {
console.log("dataBinding");
}
$("#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.bind("dataBinding", gantt_dataBinding);
</script>
Fired when the widget is bound to data from its data source.
The event handler function context (available via the this keyword) will be set to the widget instance.
The widget instance which fired the event.
<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")
}
],
dataBound: function(e) {
console.log("dataBound");
}
});
</script>
<div id="gantt"></div>
<script>
function gantt_dataBound(e) {
console.log("dataBound");
}
$("#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.bind("dataBound", gantt_dataBound);
</script>
Fired when a new task or a new dependency is about to be added.
The event handler function context (available via the this keyword) will be set to the widget instance.
The GanttTask instance which will be added to the DataSource.
The GanttDependency instance which will be added to the DataSource.
If invoked prevents the add action.
<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")
}
],
add: function(e) {
console.log("Add", e.task.title);
}
});
</script>
<div id="gantt"></div>
<script>
function gantt_add(e) {
console.log("Add", e.task.title);
}
$("#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.bind("add", gantt_add);
</script>
Fired when the user starts task edit upon double click on a cell.
The event handler function context (available via the this keyword) will be set to the widget instance.
The jQuery object representing the wrapping cell element. That element contains the editing UI.
The GanttTask which is being edited.
If invoked prevents the edit action.
The widget instance which fired the event.
<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")
}
],
columns: [ { field: "title", title: "Title", editable: true } ],
edit: function(e) {
console.log("Editing task: ", e.task.title);
}
});
</script>
<div id="gantt"></div>
<script>
function gantt_edit(e) {
console.log("Editing task: ", e.task.title)
}
$("#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")
}
],
columns: [ { field: "title", title: "Title", editable: true } ]
});
var gantt = $("#gantt").data("kendoGantt");
gantt.bind("edit", gantt_edit);
</script>
Fired when a task or a dependency is about to be removed.
The event handler function context (available via the this keyword) will be set to the widget instance.
The GanttTask instance which is being removed the DataSource.
An array of GanttDependency instances which are associated with the task being removed, or an array with a single dependency which is being removed.
If invoked prevents the remove action.
The widget instance which fired the event.
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
dataSource: [
{
id: 1,
orderId: 0,
parentId: null,
title: "Task1",
start: new Date("2014/6/17 11:00"),
end: new Date("2014/6/17 14:00")
},
{
id: 2,
orderId: 1,
parentId: null,
title: "Task2",
start: new Date("2014/6/17 15:00"),
end: new Date("2014/6/17 16:00")
}
],
dependencies: [
{
predecessorId: 1,
successorId: 2,
type: 1,
id: 0
}
],
remove: function(e) {
if (e.task) {
console.log("Removing task:", e.task.title);
console.log(kendo.format("Removing {0} related dependencies", e.dependencies.length));
} else {
console.log("Removing dependency with id:", e.dependencies[0].id);
}
}
});
</script>
<div id="gantt"></div>
<script>
function gantt_remove(e) {
if (e.task) {
console.log("Removing task:", e.task.title);
console.log(kendo.format("Removing {0} related dependencies", e.dependencies.length));
} else {
console.log("Removing dependency with id:", e.dependencies[0].id);
}
}
$("#gantt").kendoGantt({
dataSource: [
{
id: 1,
orderId: 0,
parentId: null,
title: "Task1",
start: new Date("2014/6/17 11:00"),
end: new Date("2014/6/17 14:00")
},
{
id: 2,
orderId: 1,
parentId: null,
title: "Task2",
start: new Date("2014/6/17 15:00"),
end: new Date("2014/6/17 16:00")
}
],
dependencies: [
{
predecessorId: 1,
successorId: 2,
type: 1,
id: 0
}
]
});
var gantt = $("#gantt").data("kendoGantt");
gantt.bind("remove", gantt_remove);
</script>
Fired when the user cancels tasks's cell editing by pressing the 'Esc' key.
The event handler function context (available via the this keyword) will be set to the widget instance.
The jQuery object representing the wrapping cell element. That element contains the editing UI.
The GanttTask which has been edited.
If invoked prevents the cancel action and keeps the cell in edit mode.
The widget instance which fired the event.
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
dataSource: [
{
id: 1,
orderId: 0,
parentId: null,
title: "Task1",
start: new Date("2014/6/17 11:00"),
end: new Date("2014/6/17 14:00")
}
],
columns: [ { field: "title", title: "Title", editable: true } ],
cancel: function(e) {
console.log("Cancel editing task: ", e.task.title);
}
});
</script>
<div id="gantt"></div>
<script>
function gantt_cancel(e) {
console.log("Cancel editing task: ", e.task.title)
}
$("#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")
}
],
columns: [ { field: "title", title: "Title", editable: true } ]
});
var gantt = $("#gantt").data("kendoGantt");
gantt.bind("cancel", gantt_edit);
</script>
Fired when a task field is updated upon user interaction.
The event handler function context (available via the this keyword) will be set to the widget instance.
The GanttTask which has been edited.
The GantTask fields being updated with new values.
If invoked prevents the save action and prevents the task from being edited.
The widget instance which fired the event.
<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")
}
],
save: function(e) {
console.log("Save task:", e.task.title);
}
});
</script>
<div id="gantt"></div>
<script>
function gantt_save(e) {
console.log("Save task:", e.task.title);
}
$("#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.bind("save", gantt_save);
</script>
Fired when the user selects a task in the Gantt.
The event handler function context (available via the this keyword) will be set to the widget instance.
The widget instance which fired the event.
<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")
}
],
change: function(e) {
var selection = this.select();
var task;
if (selection) {
task = this.dataItem(selection);
console.log(kendo.format("{0} is selected", task.title));
}
}
});
</script>
<div id="gantt"></div>
<script>
function gantt_change(e) {
var selection = this.select();
var task;
if (selection) {
task = this.dataItem(selection);
console.log(kendo.format("{0} is selected", task.title));
}
}
$("#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");
gantt.bind("change", gantt_change);
</script>
Fired when the user resizes a column.
The event handler function context (available via the this keyword) will be set to the widget instance.
A JavaScript object which represents the column configuration.
The new column width.
The previous column width.
The widget instance which fired the event.
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
columns: ["title", "start", "end"],
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")
}],
resizable: true,
columnResize: function(e) {
console.log(e.column.field, e.newWidth, e.oldWidth);
}
});
</script>
<div id="gantt"></div>
<script>
function gantt_columnResize(e) {
console.log(e.column.field, e.newWidth, e.oldWidth);
}
$("#gantt").kendoGantt({
columns: ["title", "start", "end"],
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")
}],
resizable: true
});
var gantt = $("#gantt").data("kendoGantt");
gantt.bind("columnResize", gantt_columnResize);
</script>
Fired when the user changes the selected view of the Gantt.
The event handler function context (available via the this keyword) will be set to the widget instance.
The name of the view which is about to be selected. The possible values are:
- day
- week
- month
- year
If invoked prevents the action.
The widget instance which fired the event.
<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")
}
],
navigate: function(e) {
console.log(kendo.format("Navigate to {0} view", e.view.charAt(0).toUpperCase() + e.view.slice(1)));
}
});
</script>
<div id="gantt"></div>
<script>
function gantt_navigate(e) {
console.log(kendo.format("Navigate to {0} view", e.view.charAt(0).toUpperCase() + e.view.slice(1)));
}
$("#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");
gantt.bind("navigate", gantt_navigate);
</script>
Fired when the user starts to drag a task.
The event handler function context (available via the this keyword) will be set to the widget instance.
The task which is being moved.
If invoked prevents the action.
The widget instance which fired the event.
<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")
}
],
moveStart: function(e) {
console.log("Move start ", e.task.title);
}
});
</script>
<div id="gantt"></div>
<script>
function gantt_moveStart(e) {
console.log("Move start ", e.task.title);
}
$("#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.bind("moveStart", gantt_moveStart);
</script>
Fired when the user is moving a task.
The event handler function context (available via the this keyword) will be set to the widget instance.
The task which is being moved.
The current task start date.
The current task end date.
If invoked prevents the action.
The widget instance which fired the event.
<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")
}
],
move: function(e) {
console.log(kendo.format("task's curren Start {0:g}", e.start));
console.log(kendo.format("task's curren End {0:g}", e.end));
}
});
</script>
<div id="gantt"></div>
<script>
function gantt_move(e) {
console.log(kendo.format("task's curren Start {0:g}", e.start));
console.log(kendo.format("task's curren End {0:g}", e.end));
}
$("#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.bind("move", gantt_move);
</script>
Fired when the user stops moving a task.
The event handler function context (available via the this keyword) will be set to the widget instance.
The task which is being moved.
The new task start date.
The new task end date.
If invoked prevents the action.
The widget instance which fired the event.
<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")
}
],
moveEnd: function(e) {
console.log(kendo.format("task's new Start {0:g}", e.start));
console.log(kendo.format("task's new End {0:g}", e.end));
}
});
</script>
<div id="gantt"></div>
<script>
function moveEnd(e) {
console.log(kendo.format("task's new Start {0:g}", e.start));
console.log(kendo.format("task's new End {0:g}", e.end));
}
$("#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.bind("moveEnd", moveEnd);
</script>
Fired when the user clicks the "Export to PDF" toolbar button.
The widget instance which fired the event.
If invoked the gantt will not save the generated file.
A promise that will be resolved when the export completes.
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
toolbar: ["pdf"],
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")
}
],
pdfExport: function(e) {
}
});
var gantt = $("#gantt").data("kendoGantt");
gantt.saveAsPDF();
</script>
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
toolbar: ["pdf"],
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.bind("pdfExport", function(e) {
});
gantt.saveAsPDF();
</script>
Fired when the user starts to resize a task.
The event handler function context (available via the this keyword) will be set to the widget instance.
The task which is being resized.
If invoked prevents the action.
The widget instance which fired the event.
<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")
}
],
resizeStart: function(e) {
console.log("Resize start ", e.task.title);
}
});
</script>
<div id="gantt"></div>
<script>
function resizeStart(e) {
console.log("Resize start ", e.task.title);
}
$("#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.bind("resizeStart", resizeStart);
</script>
Fired when the user is resizing a task.
The event handler function context (available via the this keyword) will be set to the widget instance.
The task which is being moved.
The current task start date.
The current task end date.
If invoked prevents the action.
The widget instance which fired the event.
<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")
}
],
resize: function(e) {
console.log(kendo.format("task's curren Start {0:g}", e.start));
console.log(kendo.format("task's curren End {0:g}", e.end));
}
});
</script>
<div id="gantt"></div>
<script>
function gantt_resize(e) {
console.log(kendo.format("task's curren Start {0:g}", e.start));
console.log(kendo.format("task's current End {0:g}", e.end));
}
$("#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.bind("resize", gantt_resize);
</script>
Fired when the user releases the mouse after resizing a task.
The event handler function context (available via the this keyword) will be set to the widget instance.
The task which is being resized.
The new task start date.
The new task end date.
If invoked prevents the action.
The widget instance which fired the event.
<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")
}
],
resizeEnd: function(e) {
console.log(kendo.format("task's new Start {0:g}", e.start));
console.log(kendo.format("task's new End {0:g}", e.end));
}
});
</script>
<div id="gantt"></div>
<script>
function gantt_resizeEnd(e) {
console.log(kendo.format("task's new Start {0:g}", e.start));
console.log(kendo.format("task's new End {0:g}", e.end));
}
$("#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.bind("resizeEnd", gantt_resizeEnd);
</script>