Telerik Forums
Kendo UI for jQuery Forum
4 answers
110 views

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

Veselin Tsvetanov
Telerik team
 answered on 13 Nov 2017
5 answers
653 views

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? 

 

Stefan
Telerik team
 answered on 09 Oct 2017
3 answers
151 views

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

T. Tsonev
Telerik team
 answered on 23 Jun 2017
4 answers
477 views

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?

Stefan
Telerik team
 answered on 15 Jun 2017
1 answer
93 views

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.

Ivan Danchev
Telerik team
 answered on 06 Jun 2017
3 answers
180 views

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

Tsvetina
Telerik team
 answered on 10 Apr 2017
2 answers
260 views
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"
        });
    });
while capturing the screenshot of the DOM snippet above with kendo.drawing.drawDOM function as PNG with the following script
Guy
Top achievements
Rank 1
 answered on 16 Mar 2017
9 answers
2.3K+ views

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

Nisarg
Top achievements
Rank 1
 answered on 10 Feb 2017
8 answers
214 views

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

Plamen
Telerik team
 answered on 03 Feb 2017
3 answers
921 views

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

Marin Bratanov
Telerik team
 answered on 01 Feb 2017
Narrow your results
Selected tags
Tags
+? more
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?