New to Kendo UI for jQuery? Start a free 30-day trial

Exporting TreeView to PDF in Kendo UI for jQuery

Environment

Product

Progress® Kendo UI® for jQuery TreeView

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>

Exporting TreeView to PDF in Kendo UI for jQuery

Environment

Description

Solution

See Also