Questions on Kendo UI for jQuery Forum

1 answer

1.2K+ views

Export html to word

Hi,

I would like to know if Kendo provides any means to export my html page with charts and grids into word document?

Best Regards,

CH

Drawing API

answered on 17 Jan 2017

1 answer

123 views

Export pdf from multiple groups

I have several html elements that are to exported to pdf. I want to export a consolidated pdf from groups generated from all those html elements.

How should I go about this?

Drawing API

answered on 02 Jan 2017

1 answer

626 views

Unable to export div with overflow property to pdf

Hi,

I'm trying to follow this example, http://dojo.telerik.com/awEvi/2 to export html content to pdf. The original example works but when I modified the div to something like this to contain overflow properties,

<div class="demo-section k-content export-app wide hidden-on-narrow">

<div id="Test" style="width:100vw;height:20vw;overflow-y:auto;overflow-x:auto">

<div class="demo-section content-wrapper wide">

<div class="demo-section charts-wrapper wide">

<div id="users"></div>

<div id="applications"></div>

<div id="referrals"></div>

</div>

<div id="grid"></div>

<div id="myDiv" style="height:100vw;width:5vw;background:red"></div>

</div>

and setting the selector to Test :

$(".export-pdf").click(function() {

// Convert the DOM element to a drawing using kendo.drawing.drawDOM

kendo.drawing.drawDOM($("#Test"))

.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: "HR-Dashboard.pdf",

proxyURL: "//demos.telerik.com/kendo-ui/service/export"

});

the content becomes clipped as shown in the attached image.

Is there any way in which I could export the content within the div without having it clipped?

Best Regards,

CH

Drawing API

answered on 20 Dec 2016

17 answers

1.3K+ views

Exporting table to multipage PDF file using kendo exportPDF

I need to export large table to pdf file using kendo pdfExport. This code I have so far:

html:

<div style="position:relative;" id="temp-container">

<div style=

"position:absolute;left:0px;top:50px;width:100%;background:url('http://127.0.0.1:8000/images/arrow1.png') no-repeat;height:50px;"

></div>

<div style="position:absolute;left:26%;top:50px;font-size:28px;">Number</div>

<div style="position:absolute;left:50%;margin-left:-50px;width:100px;top:90px;font-size:28px;">Original</div>

<div style="position:absolute;right:0px;width:33%;top:50px;">Date1</div>

<div style="position:absolute;right:0px;width:33%;top:80px;">Date2</div>

<div style="position:absolute;right:0px;width:33%;top:110px;">Date3</div>

<div style=

"position:absolute;left:0px;right:0px;top:150px;background:url('http://127.0.0.1:8000/images/arrow3.png') no-repeat;height:50px;background-size:100% 100%;"

></div>

<table cellpadding="6px" cellspacing="3px" border="0px" style="width:100%;position:relative;top:200px;">

<tr>

<td style="width:80px;position:relative;text-align:center;height:30px;line-height:30px;">

<div style=

"position:absolute;right:0px;top:0px;bottom:0px;width:22px;background:url('http://127.0.0.1:8000/images/background.png') repeat;"

>LP</div>

</td>

<td style="width:300px;background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">Index</td>

<td style="background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">TEXT</td>

</tr>

<tr>

<td style="width:80px;position:relative;text-align:center;height:30px;line-height:30px;">

<div style=

"position:absolute;right:0px;top:0px;bottom:0px;width:22px;background:url('http://127.0.0.1:8000/images/background.png') repeat;"

>LP</div>

</td>

<td style="width:300px;background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">Index</td>

<td style="background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">TEXT</td>

</tr>

<tr>

<td style="width:80px;position:relative;text-align:center;height:30px;line-height:30px;">

<div style=

"position:absolute;right:0px;top:0px;bottom:0px;width:22px;background:url('http://127.0.0.1:8000/images/background.png') repeat;"

>LP</div>

</td>

<td style="width:300px;background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">Index</td>

<td style="background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">TEXT</td>

</tr>

<tr>

<td style="width:80px;position:relative;text-align:center;height:30px;line-height:30px;">

<div style=

"position:absolute;right:0px;top:0px;bottom:0px;width:22px;background:url('http://127.0.0.1:8000/images/background.png') repeat;"

>LP</div>

</td>

<td style="width:300px;background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">Index</td>

<td style="background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">TEXT</td>

</tr>

<tr>

<td style="width:80px;position:relative;text-align:center;height:30px;line-height:30px;">

<div style=

"position:absolute;right:0px;top:0px;bottom:0px;width:22px;background:url('http://127.0.0.1:8000/images/background.png') repeat;"

>LP</div>

</td>

<td style="width:300px;background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">Index</td>

<td style="background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">TEXT</td>

</tr>

<tr>

<td style="width:80px;position:relative;text-align:center;height:30px;line-height:30px;">

<div style=

"position:absolute;right:0px;top:0px;bottom:0px;width:22px;background:url('http://127.0.0.1:8000/images/background.png') repeat;"

>LP</div>

</td>

<td style="width:300px;background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">Index</td>

<td style="background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">TEXT</td>

</tr>

<tr>

<td style="width:80px;position:relative;text-align:center;height:30px;line-height:30px;">

<div style=

"position:absolute;right:0px;top:0px;bottom:0px;width:22px;background:url('http://127.0.0.1:8000/images/background.png') repeat;"

>LP</div>

</td>

<td style="width:300px;background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">Index</td>

<td style="background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">TEXT</td>

</tr>

<tr>

<td style="width:80px;position:relative;text-align:center;height:30px;line-height:30px;">

<div style=

"position:absolute;right:0px;top:0px;bottom:0px;width:22px;background:url('http://127.0.0.1:8000/images/background.png') repeat;"

>LP</div>

</td>

<td style="width:300px;background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">Index</td>

<td style="background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">TEXT</td>

</tr>

<tr>

<td style="width:80px;position:relative;text-align:center;height:30px;line-height:30px;">

<div style=

"position:absolute;right:0px;top:0px;bottom:0px;width:22px;background:url('http://127.0.0.1:8000/images/background.png') repeat;"

>LP</div>

</td>

<td style="width:300px;background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">Index</td>

<td style="background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">TEXT</td>

</tr>

<tr>

<td style="width:80px;position:relative;text-align:center;height:30px;line-height:30px;">

<div style=

"position:absolute;right:0px;top:0px;bottom:0px;width:22px;background:url('http://127.0.0.1:8000/images/background.png') repeat;"

>LP</div>

</td>

<td style="width:300px;background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">Index</td>

<td style="background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">TEXT</td>

</tr>

<tr>

<td style="width:80px;position:relative;text-align:center;height:30px;line-height:30px;">

<div style=

"position:absolute;right:0px;top:0px;bottom:0px;width:22px;background:url('http://127.0.0.1:8000/images/background.png') repeat;"

>LP</div>

</td>

<td style="width:300px;background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">Index</td>

<td style="background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">TEXT</td>

</tr>

</table>

</div>

and this is pdf export function call:

setTimeout(function () {

kendo.drawing.drawDOM($("#temp-container"))

.then(function (group) {

// Render the result as a PDF file

return kendo.drawing.exportPDF(group, {

paperSize: "A4",

multiPage: true,

margin: { left: "0cm", top: "1cm", right: "0cm", bottom: "1cm" }

});

})

.done(function (data) {

// Save the PDF file

kendo.saveAs({

dataURI: data,

fileName: "HR-Dashboard.pdf",

proxyURL: "http://demos.telerik.com/kendo-ui/service/export"

});

}, 1000);

My problem is that generated file has one page only. According to documentation http://docs.telerik.com/kendo-ui/framework/drawing/drawing-dom#automatic-page-breaking-q1-2015 my table cannot be positioned as fixed or absolute and is not. I need to apply autopaging because I don't know how many elements will be in table. In example above is a lot of them but in some other cases one or two elements only. What am I doing wrong?

And another problem that drives me crazy is that I cannot adjust papersize. I tried to set A4, A5 in exportPDF attributes and set width and height of main container in inches. But still the generated document is not properly adjusted. I think that paperSize A4 should automatically adjust main container to A4 size?

Drawing API

answered on 06 Dec 2016

2 answers

271 views

PDF export, fonts squished together

We are generating a PDF form in Finnish language. We are having problems with scandic letters (åäö) not rendering correctly in the PDF. They are on top of each other. Is this a problem with Telerik PDF export or the font? Are there workarounds? I tried another font (Fira Sans) and the results are the same.

The attached files show how it looks in the DOM and in the generated PDF.

Drawing API

answered on 28 Nov 2016

1 answer

99 views

DOM export as SVG

Hi all,

Is there a way to embed a custom font in the SVG when exporting a DOM as SVG?

Thank you

Drawing API

answered on 11 Oct 2016

1 answer

94 views

Grid Column Size changes for multi page output

I have a grid, scrollable is set to false. When I export using the kendo.drawing.drawDOM, the column sizes are okay for the first page (with the grid header), but for the rest of the pages, column sizes changes according to the content.

I have attached an export snapshot.

Drawing API

answered on 01 Sep 2016

4 answers

57 views

Recommended approach for saving to/opening from stream

I need to build a drawing tool which can save to a stream (possibly JSON) and load form the same stream either to display or make changes.

This scenario does not seem to be supported by the drawing API but since the Surface has a draw method, I am assuming it has an internal representation of drawing objects which can be saved and reloaded.

What would be the best approach to achieve this.

Would you have a basic dojo/fiddle available?

Drawing API

answered on 18 Aug 2016

1 answer

27 views

drawDOM drops a div tag in Chrome, but not in IE or Firefox

We generate a rather complex nested div and when we use drawDOM to export to PDF it works most of the time. Sometimes, however, it drops one of the internal divs. This only happens in Chrome, and not in IE or Firefox.

Please see sample code at dojo.telerik.com/uTAnE/5

Note then when run Safari, the exported PDF correctly includes both boxes on the 13th (the yellow and the gray box). On Chrome, however, the yellow box is missing. This seems to be data-dependent as if we have more internal boxes, everything is OK.

Any help you could provide would be greatly appreciated.

Drawing API

answered on 16 Aug 2016

4 answers

110 views

Error occurs when kendo.drawing.exportImage

Hi
I have problem with kendo.drawing.exportImage. When I call kendo.drawing.exportImage occur error "Uncaught RangeError: Maximum call stack size exceeded".
When I Export to PDF ? every thing is OK.
I made example with this problem https://jsfiddle.net/j23yj7yx/. Please check this issue.

Regards
Peter

Drawing API