Exporting TreeView to PDF in Kendo UI for jQuery
Environment
Product | Progress® Kendo UI® for jQuery TreeView |
Description
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?
This knowledge base article also answers the following questions:
- How to generate a PDF from Kendo UI for jQuery TreeView component?
- What method can be used to export TreeView data to PDF in Kendo UI for jQuery?
- Can the Kendo UI Drawing library be used to export TreeView content to PDF?
Solution
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:
-
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.
-
Utilize the
kendo.drawing.drawDOM
method to convert the TreeView's DOM element into a drawing scene. Refer to the Kendo Drawing documentation for more details on this method. -
Use the
kendo.saveAs
function to save the generated drawing scene as a PDF file.
Below is a sample runnable example demonstrating how to export the TreeView to PDF:
<div class="content-wrapper">
<button id="btnPDF">Export PDF</button>
<div id="treeview"></div>
</div>
<script>
$(document).ready(function () {
var rows = [];
var isPDFExport = false;
function onPDFExport(e) {
var tree = $("#treeview").data("kendoTreeView");
isPDFExport = true;
tree.trigger("dataBound");
//Handle Exporting to PDF
setTimeout(function () {
// Convert the DOM element to a drawing using kendo.drawing.drawDOM
kendo.drawing
.drawDOM($(".content-wrapper"))
.then(function (group) {
// Render the result as a PDF file
return kendo.drawing.exportPDF(group, {
paperSize: "auto",
margin: {
left: "1cm",
top: "1cm",
right: "1cm",
bottom: "1cm",
},
});
})
.done(function (data) {
// Save the PDF file
kendo.saveAs({
dataURI: data,
fileName: "TreeView.pdf",
// proxyURL: "Save",
//forceProxy: true, //use Server Proxy for files over 1MB
});
});
$("#treeview").data("kendoTreeView").collapse(".k-treeview-item");
}, 1000);
}
$("#btnPDF").kendoButton({
click: onPDFExport,
themeColor: 'success'
});
var serviceRoot = "https://demos.telerik.com/service/v2/core";
homogeneous = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: serviceRoot + "/Employees"
},
},
schema: {
model: {
id: "EmployeeId",
hasChildren: "HasEmployees",
},
},
});
$("#treeview").kendoTreeView({
dataSource: homogeneous,
dataTextField: "FullName",
dataBound: function (e) {
if (isPDFExport) {
e.sender.expand(".k-treeview-item");
}
},
});
});
</script>