Need more guidance for printing

I am still struggling to get my forms to print correctly. I am using the following options:

{
paperSize: 'A4',
landscape: false,
multiPage: true
}

The biggest problem is the form is printing only on the left side of the paper. What am I doing wrong?

4 - Avenir Khodakovskiy (2).pdf (62.6 KB)

Never mind, I figured it out.

i am having same issue and also when i download and print the form it prints all in one page fine and exported pdf looks good too. But if i use the print button right from pdf without downloading the form it shows only couple of fields and half of the form both horizontally and vertically

What I do is add my own print button by adding this code in the Javascript:

fd.spRendered(function() {
	fd.toolbar.buttons.push({
		icon: 'Print',
		class: 'btn-outline-primary',
		text: 'Print',
		click: function() {
			fd.exportToPDF(fd.field('Title').value,
			{
				paperSize: 'A4',
				landscape: false,
				multiPage: true
			});
		}
	});
});

Then in the form you need to put everything in a Grid container. And on the grid containers Width property change it to 12 (whole width).

2 Likes

Hi Smith,

Thanks a lot for your solution i like it lot it is more user friendly to have print button right next to save and close and ever since i posted the issue looks like the team have solved the problem of form only displaying half of the contents but your solution is more user friendly one issue i have is the font comes really large with this export compared to out of the box export so one page contents taking three pages do we need to specify the font size for every text in .k-pdf-export?

I haven't found a way to change the font size only on the printed page. My only recommendation is to resize the font on the form so it will print smaller on the page.

Hi smith

I found out the way to change font size on print form only i did the following
.k-pdf-export .Class{
Font-size:10px;}

It works its just tedious work to resize all the css wish there was a better way and may be there is we just dont know yet. If i find something i will update you.

1 Like

@smithme, @smithme,

You can assign the same CSS class to elements you want to style and change its size in .k-pdf-export at once.

Or you can use the existing CSS classes for the elements, for example, for the titles of the fields:

.k-pdf-export .fd-field-title {
    font-size: 10px !important;
}
1 Like

Awesome that is great

2 Likes

When i try to print the form in A4 size there is lot of extra space at bottom so one page form prints in two pages even width is set to 12 for grid.

I figured it out. Thank you.

1 Like