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>1 Answer, 1 is accepted
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/.
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>