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.