Skip to content

Commit 20aa03a

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent faf6f8a commit 20aa03a

File tree

3 files changed

+206
-1
lines changed

3 files changed

+206
-1
lines changed

‎docs/knowledge-base/export-treeview-to-pdf-kendo-ui-jquery.md‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
---
2+
title: Exporting TreeView to PDF in Kendo UI for jQuery
3+
description: Learn how to export the Kendo UI for jQuery TreeView component data to a PDF file.
4+
type: how-to
5+
page_title: How to Export Kendo UI for jQuery TreeView Data to PDF
6+
slug: export-treeview-to-pdf-kendo-ui-jquery
7+
tags: kendo, treeview, export, pdf, drawing, drawdom
8+
res_type: kb
9+
ticketid: 1679577
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>Progress® Kendo UI® for jQuery TreeView</td>
19+
</tr>
20+
</tbody>
21+
</table>
22+
23+
## Description
24+
I want to export the data displayed in the Kendo UI for jQuery TreeView to a PDF file. However, I can't find a method or sample code in the TreeView documentation for exporting data to PDF. How can I achieve this functionality?
25+
26+
This knowledge base article also answers the following questions:
27+
- How to generate a PDF from Kendo UI for jQuery TreeView component?
28+
- What method can be used to export TreeView data to PDF in Kendo UI for jQuery?
29+
- Can the Kendo UI Drawing library be used to export TreeView content to PDF?
30+
31+
## Solution
32+
The Kendo UI for jQuery TreeView component does not have a built-in feature for exporting data to PDF directly. However, you can achieve this functionality by using the Kendo Drawing library. Follow the steps below to export the TreeView data to a PDF file:
33+
34+
1. Ensure that all nodes of the TreeView you wish to export are expanded. This is necessary because the export process requires all elements to be visible in the DOM.
35+
36+
2. Utilize the `kendo.drawing.drawDOM` method to convert the TreeView's DOM element into a drawing scene. Refer to the [Kendo Drawing documentation](https://docs.telerik.com/kendo-ui/api/javascript/drawing/methods/drawdom) for more details on this method.
37+
38+
3. Use the [`kendo.saveAs`](/api/javascript/kendo/methods/saveas) function to save the generated drawing scene as a PDF file.
39+
40+
Below is a sample runnable example demonstrating how to export the TreeView to PDF:
41+
42+
```dojo
43+
<div class="content-wrapper">
44+
<button id="btnPDF">Export PDF</button>
45+
<div id="treeview"></div>
46+
</div>
47+
48+
<script>
49+
$(document).ready(function () {
50+
var rows = [];
51+
var isPDFExport = false;
52+
53+
function onPDFExport(e) {
54+
var tree = $("#treeview").data("kendoTreeView");
55+
isPDFExport = true;
56+
tree.trigger("dataBound");
57+
58+
//Handle Exporting to PDF
59+
setTimeout(function () {
60+
// Convert the DOM element to a drawing using kendo.drawing.drawDOM
61+
kendo.drawing
62+
.drawDOM($(".content-wrapper"))
63+
.then(function (group) {
64+
// Render the result as a PDF file
65+
return kendo.drawing.exportPDF(group, {
66+
paperSize: "auto",
67+
margin: {
68+
left: "1cm",
69+
top: "1cm",
70+
right: "1cm",
71+
bottom: "1cm",
72+
},
73+
});
74+
})
75+
.done(function (data) {
76+
// Save the PDF file
77+
kendo.saveAs({
78+
dataURI: data,
79+
fileName: "TreeView.pdf",
80+
// proxyURL: "Save",
81+
//forceProxy: true, //use Server Proxy for files over 1MB
82+
});
83+
});
84+
85+
$("#treeview").data("kendoTreeView").collapse(".k-treeview-item");
86+
87+
}, 1000);
88+
}
89+
90+
$("#btnPDF").kendoButton({
91+
click: onPDFExport,
92+
themeColor: 'success'
93+
});
94+
95+
var serviceRoot = "https://demos.telerik.com/kendo-ui/service";
96+
homogeneous = new kendo.data.HierarchicalDataSource({
97+
transport: {
98+
read: {
99+
url: serviceRoot + "/Employees",
100+
dataType: "jsonp",
101+
},
102+
},
103+
schema: {
104+
model: {
105+
id: "EmployeeId",
106+
hasChildren: "HasEmployees",
107+
},
108+
},
109+
});
110+
111+
$("#treeview").kendoTreeView({
112+
dataSource: homogeneous,
113+
dataTextField: "FullName",
114+
dataBound: function (e) {
115+
if (isPDFExport) {
116+
e.sender.expand(".k-treeview-item");
117+
}
118+
},
119+
});
120+
});
121+
</script>
122+
```
123+
124+
125+
## See Also
126+
127+
- [Kendo UI for jQuery TreeView Overview](https://docs.telerik.com/kendo-ui/controls/treeview/overview)
128+
- [Kendo UI Drawing Overview](https://docs.telerik.com/kendo-ui/framework/drawing/overview)
129+
- [Kendo UI Drawing API](https://docs.telerik.com/kendo-ui/api/javascript/drawing)
130+
- [Kendo UI TreeView API](https://docs.telerik.com/kendo-ui/api/javascript/ui/treeview)

‎docs/knowledge-base/hide-time-gantt-chart-tooltip-kendo-ui-jquery.md‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
---
2+
title: Formatting Time from Gantt Chart Tooltip in Kendo UI for jQuery
3+
description: Learn how to customize the Gantt chart tooltip to display dates without time and configure the Gantt to focus on days and weeks in Kendo UI for jQuery.
4+
type: how-to
5+
page_title: Customize Gantt Chart Tooltip to Show Dates Without Time in Kendo UI for jQuery
6+
slug: hide-time-gantt-chart-tooltip-kendo-ui-jquery
7+
tags: kendo, ui, jquery, gantt, chart, tooltip, date, format
8+
res_type: kb
9+
ticketid: 1630677
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>Progress® Kendo UI® Gantt for Kendo UI for jQuery</td>
19+
</tr>
20+
<tr>
21+
<td>Version</td>
22+
<td>2025.1.211</td>
23+
</tr>
24+
</tbody>
25+
</table>
26+
27+
## Description
28+
I want to hide the timestamp from Planned Start, Planned End, Start, and End in the Kendo UI for jQuery Gantt Chart Tooltip. Additionally, I am interested in completely hiding or blocking time from the Gantt chart as my work focuses on days and weeks without considering time.
29+
30+
This knowledge base article also answers the following questions:
31+
- How can I display only the date in the Gantt chart tooltip without the time?
32+
- Is there a way to configure the Gantt chart to focus on days and weeks, omitting time?
33+
- How to format dates in the Gantt chart tooltip to exclude time information?
34+
35+
## Solution
36+
To customize the tooltip content in the Gantt chart and display dates without the time component, use a [`tooltip template`](/api/javascript/ui/gantt/configuration/tooltip#tooltiptemplate). In the template, format the dates according to your preference, excluding time. The following example demonstrates how to format the start date of a task to display only the date part:
37+
38+
```javascript
39+
template: ({ task, title }) => `Title: ${kendo.htmlEncode(task.title)}\
40+
</br>\
41+
${kendo.toString(task.start, 'D')}`
42+
```
43+
44+
This customization applies date formatting to the tooltip content, specifically to the start date, using the 'D' format specifier, which displays the date without the time.
45+
46+
For more information on date formatting options and how to apply them, refer to the [Date Formatting - Kendo UI Globalization - Kendo UI for jQuery](https://docs.telerik.com/kendo-ui/globalization/intl/dateformatting) article.
47+
48+
For a runnable demontsration, please refer to the below Dojo example:
49+
```dojo
50+
<div id="gantt"></div>
51+
<script>
52+
$("#gantt").kendoGantt({
53+
tooltip: {
54+
visible: true,
55+
template: ({ task, title }) => `Title: ${kendo.htmlEncode(task.title)}\
56+
</br>\
57+
${kendo.toString(task.start, 'D')}`
58+
},
59+
dataSource: [{
60+
id: 1,
61+
orderId: 0,
62+
parentId: null,
63+
title: "Task1",
64+
start: new Date("2014/6/17 9:00"),
65+
end: new Date("2014/6/17 11:00")
66+
}]
67+
});
68+
</script>
69+
```
70+
71+
Additionally, to focus the Gantt chart on days and weeks without time, ensure that your Gantt chart configuration and data source do not include specific time information, and adjust the Gantt's views to emphasize day or week views.
72+
73+
## See Also
74+
- [Gantt Overview - Kendo UI for jQuery](https://docs.telerik.com/kendo-ui/controls/gantt/overview)
75+
- [Globalization - Kendo UI for jQuery](https://docs.telerik.com/kendo-ui/globalization/)

‎src/kendo.toolbar.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1494,7 +1494,7 @@ export const __meta__ = {
14941494

14951495
if (!this.options.navigateOnTab && keyCode === keys.ENTER && target.hasClass(TEMPLATE_ITEM)) {
14961496
this._keyActivateTemplate(target);
1497-
} if (isInSection && keyCode === keys.ESC) {
1497+
} else if (isInSection && keyCode === keys.ESC) {
14981498
this.overflowSection.close();
14991499
this.element.trigger(FOCUS);
15001500
} else if (isOverflowAnchor && (e.altKey && keyCode === keys.DOWN || keyCode === keys.SPACEBAR)) {

0 commit comments

Comments
 (0)