Hi,
I am trying to show two "columns" on the same PDF page when exporting. The columns content might increase too much, and when that happens, the user expect to see the same organization within the PDF but in here, this is not the case http://dojo.telerik.com/@Deyner/IDaYEw. Is there a way to make this pdf exporting to look in a proper way? showing both "columns" next the other even if their content fits in multiple pages. This is a breaker for our company, since we just implemented a new project where users can edit "documents" online and export them (which technically are multiple kendo ui editors that simulate every field the user can edit) . How can we make this work?
PD: The layout we have is much more complex than the one on the example, so we hope the solution you give us will also work with our real layout.
Thanks,
Deyner Lezcano
I have some summary header for my Grid but in sepparated DOM. HTML looks like this:
<div id="report">
<div class="report-header"></div>
<div class="report-table"></div>
</div>
kendo.drawing.drawDOM("#report",
{ allPages: true,
avoidLinks: true,
paperSize: "A4",
margin: { top: "1cm", left: "1cm", right: "1cm", bottom: "1cm" },
landscape: true,
repeatHeaders: true,
template: $("#page-template").html(),
scale: 0.5,
title: 'Raport dzienny'
}).then(function(group){
kendo.drawing.pdf.saveAs(group, 'file.pdf');
});
Grid should have around 30 rows, it isn't fully drawn. It's look like DrawingAPI draw only visible part of Grid. How to fix it?
Hi! I'm trying to make a PDF report via drawDOM, this report will need to have a grid and a chart that is being displayed in the site, but also a header that I need to add, that wont be displayed in the site.
Since drawDOM requires for the elements to be visible in the DOM, I clone the grid and the chart into a container, add my header, then export it whole. Grid works fine but the chart fails and I'm not sure why.
Here is an example with this issue: http://dojo.telerik.com/OvOrE
I'm creating a custom visual for a bar chart series to have rounded bars and am having difficulty getting it to work. Does anyone have a custom visual for a bar chart series to make horizontal bars rounded on each end of the bar?
Say I create a new surface:
var surface = draw.Surface.create($("#surface"));
Now in a different part of the program I want get that existing surface. In other kendo widgets I can do for example $("#surface").data("kendoGrid")
but I can't seem to figure out how to do the same thing with a drawing surface.
Why does Bounds() always return 1 pixel more than the actual width and height?
Check out: http://dojo.telerik.com/@Harold@/Ivacu
var shape = new kendo.dataviz.diagram.Shape({ type: "rectangle", x: 0, y: 0, width: 1150, height: 1150, fill: "blue" });
alert("bounds().width = " + shape.bounds().width);
Result:
bounds().width = 1151
while capturing the screenshot of the DOM below with kendo.drawing.drawDOM function as PNG with the js script provided below,
the then callback is executed, however, the done callback never executes. The image tag has a src attribute pointing to an SVG image. I understand that the SVG will be ignored, but i am expecting to get an image without SVG content in the end. However again the done callback never gets called.
<!-- The DOM-->
<
span
class
=
"grouping-field label label-primary"
data-fieldkey
=
"*SERVER.FLD0000007"
>
<
img
src
=
"http://localhost:183/Content/images/svg/dimensionAsc.svg"
>
Month
<
span
aria-hidden
=
"true"
class
=
"field-close glyphicon glyphicon-remove"
></
span
>
</
span
>
// js code
var
draw = kendo.drawing;
draw.drawDOM($(
".grouping-field"
))
.then(
function
(root) {
// Chaining the promise via then
return
draw.exportImage(root);
})
.done(
function
(data) {
// Here 'data' is the Base64-encoded image file
kendo.saveAs({
dataURI: data,
fileName:
"calendar.png"
});
});
I am trying to export a long webpage with many grids and charts to a pdf file with multiple pages. I tried to use the forcePageBreak property but this property breaks the generated pdf. Here is the javascript code of the pdf export:
exportToPdf:function (){
var className = $(this).data('groupname');
$('.'+className).find('.k-grid-excel').hide();
$('.'+className).find('.removeFromReport').hide();
kendo.drawing.drawDOM($("."+className),
{
forcePageBreak: ".page-break",
margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" },
paperSize: "auto",
landscape: true,
multiPage: true }) .then(function(group) {
return kendo.drawing.exportPDF(group, { }); }) .done(function(data) {
kendo.saveAs({
dataURI: data,
fileName: "systemReport.pdf",
proxyURL: "//demos.telerik.com/kendo-ui/service/export" });
$('.'+className).find('.k-grid-excel').show();
$('.'+className).find('.removeFromReport').show();
});
}
I will also attach a zip file with the generated pdf with and without the property forcePageBreak.
Is there any other way to achieve the same functionality.
Many thanks in advance
I am trying to export a view in my SPA using the kendo drawing api. One of the elements on this view is a tabstrip and I would like to export all of the different tab contents, not just the active one.
I found this post about printing the tabstrip and was thinking I would have to do something like that in my code. This is the export to PDF button click event handler code. This seems to mostly work, only I don't know how to put the tabstrip back the way it was before I made all of the content blocks visible.
e.preventDefault();
$(
"#pageContainer .k-tabstrip .k-content"
).css(
"display"
,
"block"
);
// Show all the tabstrip content blocks
$(
"#span.tabHeader"
).css(
'display'
,
'block'
);
// Show the tab header span
kendo.drawing.drawDOM($(
"#pageContainer"
)).then(
function
(group) {
return
kendo.drawing.exportPDF(group, {
paperSize:
'auto'
,
margin: { left:
"1cm"
, top:
"1cm"
, right:
"1cm"
, bottom:
"1cm"
}
});
})
.done(
function
(data) {
kendo.saveAs({
dataURI: data,
fileName: kendo.format(
'Item - {0}.pdf'
, viewModel.selectedItem.item)
});
});
// Not really sure how to put the tabstrip back together
$(
"#pageContainer .k-tabstrip .k-content"
).css(
"display"
,
"none"
);
$(
"#span.tabHeader"
).css(
'display'
,
'none'
);
// Hide the tab header spans
Hi
We are creating a pdf using the drawing api which creates a open / save / cancel dialog in the browser allowing the user to open the pdf in Acrobat and then print it. Some users (senior managers) are complaining that this multi stage process is too long (they are used to our windows client app that outputs directly to their local printer). Is there any way we can bypass the first dialog and automatically open the pdf in Acrobat are display the print dialog?
I have see this: http://www.telerik.com/support/kb/reporting/details/print-a-report-directly-at-client-side-without-displaying-it-in-a-viewer
but I don't really understand whether we can use any of it?
Any help or suggestions would be gratefully received.
Thanks
James