Bug report
When the tasks in the Gantt's TreeList are moved/dragged an item appears over them. When the visible size of the TreeList is small, dragging tasks inside it results in unavailability to understand which task is currently being dragged because the draggable item is partially hidden.
Reproduction of the problem
- Open this Dojo
- Move the Splitter in the Gantt component to the left, in a way at least half of the initially visible TreeView is hidden.
- Select Task 2 and drag it.
Current behavior
The draggable item is initialized with a negative "left" CSS style. The task name is partially visible or not visible at all.
Expected/desired behavior
The draggable item should be visible. The task name should be visible.
Environment
- Kendo UI version: 2020.1.406
- jQuery version: x.y
- Browser: [all]
Hi,
In Dojo chose Kendo UI 2020 R1 SP2 library and created a Gantt chart with two summaries and a task. Each summary has a child task.
Set rowHeight to 40px.
Expand Summary1. Summary2 changed position and moved to the top of the row.
Collapse Summary1. Summary2 still at the top of the row.
Also, tried with other libraries, the result is the same.
Noticed that if rowHeight is not set, summary doesn't change its position.
Example here: https://dojo.telerik.com/IriJegeX
Please find the screenshot attached.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.406/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.mobile.all.min.css">
<script src="https://kendo.cdn.telerik.com/2020.1.406/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.406/js/jszip.min.js"></script>
</head>
<body>
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
rowHeight: "40px",
dataSource: [{
id: 1,
orderId: 0,
summary: true,
parentId: null,
title: "Summary1",
start: new Date("2014/6/17 9:00"),
end: new Date("2014/6/17 11:00")
},
{
id: 2,
orderId: 0,
parentId: 1,
title: "Task1",
start: new Date("2014/6/17 9:00"),
end: new Date("2014/6/17 11:00")
},
{
id: 3,
orderId: 1,
summary: true,
parentId: null,
title: "Summary2",
start: new Date("2014/6/17 9:00"),
end: new Date("2014/6/17 11:00")
},
{
id: 4,
orderId: 0,
parentId: 3,
title: "Task2",
start: new Date("2014/6/17 9:00"),
end: new Date("2014/6/17 11:00")
},
{
id: 5,
orderId: 2,
parentId: null,
title: "Task3",
start: new Date("2014/6/17 9:00"),
end: new Date("2014/6/17 11:00")
}]
});
</script>
</body>
</html>
Thanks.
Hi there,
In Dojo chose Kendo UI 2020 R1 SP2 library and created a Gantt chart with one milestone and task.
Milestone's time is 9 AM but it does not line up exactly with the time block at the top of the Gantt chart (looks like 9:01 AM).
Also, tried with other libraries, the result is the same.
Example here: https://dojo.telerik.com/iPuzEcaQ
Please find the screenshot attached.
<!DOCTYPE html>
<html><head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.406/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.mobile.all.min.css">
<script src="https://kendo.cdn.telerik.com/2020.1.406/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.406/js/jszip.min.js"></script>
</head>
<body>
<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 9:00")
}]
});
var gantt = $("#gantt").data("kendoGantt");
gantt.dataSource.add({
parentId: null,
start: new Date("2014/6/17 10:00"),
end: new Date("2014/6/17 11:00"),
title: "New Task"
});
</script>
</body>
</html>
Bug report
While editing a Gantt task name navigating in the input field with a mouse click does not work. Double-clicking on a cell enters edit mode and positions the cursor at the end of the text. Moving the cursor using the mouse does not work while navigating in the input field with the keyboard works.
Reproduction of the problem
- Run this dojo
- Double-click the title of the first task
- Try to click elsewhere in the input field to move the cursor.
Current behavior
Clicking in the input field does not move the cursor to the selected position
Expected/desired behavior
Clicking in the input should move the cursor to the selected position
Environment
- Kendo UI version: 2019.2.619
- Browser: [all]
Reproduction:
- Open https://demos.telerik.com/kendo-ui/gantt/pdf-export
- Click "Export to PDF" and open file
- Actual result: there's a lot of blank space on the right
- Expected result: the margin should correspond to the pdf.margin.right option
A working example of the bug is at https://dojo.telerik.com/EPuqExOg with a simple workaround until the bug is fixed. Currently, the percentage textbox doesn't work when in the German language. The date textboxes localize ok.
Most of the time project managers would like to compare planned start & end dates vs actual start and end dates in gantt view. This feature is not supported by current Gantt chart. What I'm envisioning is something similar to the implementation of Gantt chart by Fusion Charts. (http://www.fusioncharts.com/charts/gantt-charts/). Displaying delays in actual task compared to plan would be an an added advantage. This feature may be implemented using a task template, but it's nice to have feature in the control.
Add possibility to automatically center the Gantt timeline to a given date onload.
With this customization it will be possible to use checkboxes or combo boxes and normalize the selection of data. Actually is possible to use only text and date columns.
It would be nice if tasks could be added to gantt that are missing a start date, end date or both dates. For our use case this feature is not only useful, but mandatory. We are visualising a project workflow that goes through several phases and steps. Within our application, the client fills in the dates for these tasks and milestones as the project progresses. Not all dates are filled-in at all times, however when a project manager creates a gantt chart, he wants to see all the tasks. A task without a date is an information in itself. Currently we have to create a fake date entry for tasks without dates.
In the Gantt table we would like to configure columns: - width - order - locked column - hide/unhide (columnMenu) Same as done in TreeList in Q1 2015