<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://kendo.cdn.telerik.com/themes/10.2.0/default/default-main.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="gantt"></div>
</div>
<style>
/*
Use the DejaVu Sans font for display and embedding in the PDF file.
The standard PDF fonts have no support for Unicode characters.
*/
.k-gantt {
font-family: "DejaVu Sans", "Arial", sans-serif;
}
/* Hide toolbars during export */
.k-pdf-export .k-gantt-toolbar
{
display: none;
}
</style>
<script>
// Import DejaVu Sans font for embedding
// NOTE: Only required if the Kendo UI stylesheets are loaded
// from a different origin, e.g. cdn.kendostatic.com
kendo.pdf.defineFont({
"DejaVu Sans" : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans.ttf",
"DejaVu Sans|Bold" : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Bold.ttf",
"DejaVu Sans|Bold|Italic" : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",
"DejaVu Sans|Italic" : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",
"WebComponentsIcons" : "https://kendo.cdn.telerik.com/2017.1.223/styles/fonts/glyphs/WebComponentsIcons.ttf"
});
</script>
<!-- Load Pako ZLIB library to enable PDF compression -->
<script src="https://unpkg.com/pako/dist/pako_deflate.min.js"></script>
<script>
$(document).ready(function() {
var serviceRoot = "https://demos.telerik.com/kendo-ui/service";
var tasksDataSource = new kendo.data.GanttDataSource({
batch: false,
transport: {
read: {
url: serviceRoot + "/GanttTasks",
dataType: "jsonp"
},
update: {
url: serviceRoot + "/GanttTasks/Update",
dataType: "jsonp",
timeout: 5000
},
destroy: {
url: serviceRoot + "/GanttTasks/Destroy",
dataType: "jsonp",
timeout: 5000
},
create: {
url: serviceRoot + "/GanttTasks/Create",
dataType: "jsonp",
timeout: 5000
},
parameterMap: function(options, operation) {
if (operation !== "read") {
return { models: kendo.stringify(options.models || [options]) };
}
}
},
schema: {
model: {
id: "id",
fields: {
id: { from: "ID", type: "number" },
orderId: { from: "OrderID", type: "number", validation: { required: true } },
parentId: { from: "ParentID", type: "number", defaultValue: null, nullable: true },
start: { from: "Start", type: "date" },
end: { from: "End", type: "date" },
title: { from: "Title", defaultValue: "", type: "string" },
percentComplete: { from: "PercentComplete", type: "number" },
summary: { from: "Summary", type: "boolean" },
expanded: { from: "Expanded", type: "boolean", defaultValue: true }
}
}
},
error: function (ev) {
ev.sender.cancelChanges();
kendo.alert("Task was not Created, Updated or Destroyed properly!</br></br>" +
"If you are using this service for local demo or in dojo consider <a href='https://github.com/telerik/kendo-ui-demos-service/tree/master/demos-and-odata-v3'>downloading and running the service locally</a>.</br>" +
"And make sure to set the <a href='https://github.com/telerik/kendo-ui-demos-service/blob/master/demos-and-odata-v3/KendoCRUDService/Models/Gantt/GanttTaskRepository.cs#L12'>UpdateDatabase</a> flag to true.");
}
});
var dependenciesDataSource = new kendo.data.GanttDependencyDataSource({
transport: {
read: {
url: serviceRoot + "/GanttDependencies",
dataType: "jsonp"
},
update: {
url: serviceRoot + "/GanttDependencies/Update",
dataType: "jsonp"
},
destroy: {
url: serviceRoot + "/GanttDependencies/Destroy",
dataType: "jsonp"
},
create: {
url: serviceRoot + "/GanttDependencies/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
schema: {
model: {
id: "id",
fields: {
id: { from: "ID", type: "number" },
predecessorId: { from: "PredecessorID", type: "number" },
successorId: { from: "SuccessorID", type: "number" },
type: { from: "Type", type: "number" }
}
}
}
});
var gantt = $("#gantt").kendoGantt({
dataSource: tasksDataSource,
dependencies: dependenciesDataSource,
views: [
{ type: "week", selected: true },
"month"
],
columns: [
{ field: "id", title: "ID", width: 60 },
{ field: "title", title: "Title", editable: true, sortable: true },
{ field: "start", title: "Start Time", format: "{0:MM/dd/yyyy}", width: 100, editable: true, sortable: true },
{ field: "end", title: "End Time", format: "{0:MM/dd/yyyy}", width: 100, editable: true, sortable: true }
],
toolbar: ["append", "pdf"],
pdf: {
fileName: "Kendo UI Gantt Export.pdf",
proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
},
height: 700,
showWorkHours: false,
showWorkDays: false,
snap: false
}).data("kendoGantt");
$(document).bind("kendo:skinChange", function() {
gantt.refresh();
});
});
</script>
</body>
</html>