Export PDF with "load" divs

1 Answer 37 Views
Gauges Grid
carlos
Top achievements
Rank 1
Veteran
carlos asked on 26 Apr 2022, 08:50 AM

Error: kendo.all.js: 63203 Uncaught TypeError: Cannot read properties of undefined (reading 'bbox')

I´m trying export to same pdf a few circular gauges and a grid

similar than:
<div id="pdf-export-container">
      <div id="gauges"></div>
      <div id="grid"></div>
</div>
<script>
    $("#gauges).load("/templates/gauges")
    $("#grid).load("/templates/grid")
    
    kendo.drawing.drawDOM($("#pdf-export-container"))
    .then(function(group) {
        return kendo.drawing.exportPDF(group, {});
    })
    .done(function(data) {
        kendo.saveAs({
            dataURI: data
        });
    });
</script>

carlos
Top achievements
Rank 1
Veteran
commented on 26 Apr 2022, 08:55 AM

I have been able to do this, but when embedding the 2 gauge and grid templates with jQuery.load() it throws the aforementioned error.
Basically that's what I want to do but using jQuery.load()
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2022.1.412/js/kendo.all.min.js"></script>
</head>
<body>
  <button id="export_pdf">Exportar PDF</button>
  <div id="pdf">
    <div id="gauge"></div>
    <div id="grid"></div>
  </div>
<script>
		function getPDF(selector) {
			kendo.drawing.drawDOM($(selector)).then(function (group) {
				kendo.drawing.pdf.saveAs(group, "pdftest.pdf");
			});
		}
  
    $("#export_pdf").kendoButton({ click: function(e) { 
      e.preventDefault();
      alert("exportar pdf")
      getPDF('#pdf')
    }});
  
    $(document).ready(function () {
			var data = [
			  { productName: "QUESO CABRALES", unitPrice: 21, qty: 5 },
			  { productName: "ALICE MUTTON", unitPrice: 39, qty: 7 },
			  { productName: "GENEN SHOUYU", unitPrice: 15.50, qty: 3 },
			  { productName: "CHARTREUSE VERTE", unitPrice: 18, qty: 1 }
			];
			var schema = {
				model: {
					productName: { type: "string" },
					unitPrice: { type: "number", editable: false },
					qty: { type: "number" }
				},
				parse: function (data) {
					$.each(data, function () {
						this.total = this.qty * this.unitPrice;
					});
					return data;
				}
			};
			var aggregate = [
			  { field: "qty", aggregate: "sum" },
			  { field: "total", aggregate: "sum" }
			];
			var columns = [
			  { field: "productName", title: "Product", footerTemplate: "Total" },
			  { field: "unitPrice", title: "Price", width: 90 },
			  { field: "qty", title: "Pcs.", width: 90, aggregates: ["sum"], footerTemplate: "#=sum#" },
			  { field: "total", title: "Total", width: 100, aggregates: ["sum"], footerTemplate: "#=sum#" }
			];
			
      $("#grid").kendoGrid({
				editable: false,
				sortable: true,
				dataSource: {
					data: data,
					aggregate: aggregate,
					schema: schema,
				},
				columns: columns
			});
           
      
      $("#gauge").kendoRadialGauge({
          pointer: {
              value: 77
          },
          scale: {
              min: 0,
              max: 100
          }
      });
		});
</script>
</body>
</html>

1 Answer, 1 is accepted

Sort by
0
Patrick | Technical Support Engineer, Senior
Telerik team
answered on 28 Apr 2022, 05:50 PM

Hi Carlos,

Upon taking a look at the example, it appears there the load method selectors are missing some quotes.

        $("#grid").load('/templates/Grid.html');
        $("#gauge").load('/templates/Gauges.html');

Using the implementation in the latest post with the jQuery load method, the Kendo UI Grid and Gauge are being exported as expected:

HTML

<button id="export_pdf">Exportar PDF</button>
<div id="pdf">
    <div id="gauge"></div>
    <div id="grid"></div>
</div>

JavaScript

    function getPDF(selector) {
        kendo.drawing.drawDOM($(selector)).then(function (group) {
            kendo.drawing.pdf.saveAs(group, "pdftest.pdf");
        });
    }

    $("#export_pdf").kendoButton({
        click: function (e) {
            e.preventDefault();
            alert("exportar pdf")
            getPDF('#pdf')
        }
    });

    $(document).ready(function () {
        $("#grid").load('/templates/Grid.html');
        $("#gauge").load('/templates/Gauges.html');
    });

Please let me know if you have any questions.

Regards,
Patrick | Technical Support Engineer, Senior
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Gauges Grid
Asked by
carlos
Top achievements
Rank 1
Veteran
Answers by
Patrick | Technical Support Engineer, Senior
Telerik team
Share this question
or