Telerik Forums
Kendo UI for Angular Forum
1 answer
57 views

Hello Kendo team, 

 

Can you please help me fix this export issue, where in if I export with a lot of data, the first page is not having all the columns of data.

 

Please have a look at the stackblitz

https://stackblitz.com/edit/angular-znla2i-f7gggwxy.

 

If I click on Export Big, the first page is having only first column, expected result is to have all the columns.

Zornitsa
Telerik team
 answered on 24 Feb 2025
0 answers
67 views

I have an angular project that has a kendo grid that needs to be exported into PDF.  Kendo grid has an expanded details per specific items when conditions met. 

As can see below, I need to make the parent row to be together with its expanded detail when the page breaks. How can I achieve it?



Appreciate the response about my inquiry.

 

Thank you!

Yadabase
Top achievements
Rank 1
 asked on 13 Mar 2024
2 answers
102 views

https://www.telerik.com/kendo-angular-ui/components/pdf-export/auto-print/

In this scenario you have to use the checkbox.  However, I would like to use 2 buttons.  One for Download only and one for Download with auto print.  The problem I'm having is that setting the autoPrint = true in code does not work in Angular until the second time.  So it appears that Kendo does not pick up the change in value.  

Does anyone know a way to make this happen without using a checkbox?

John
Top achievements
Rank 1
Iron
 updated answer on 30 Jan 2024
0 answers
167 views

Hi There,

I'm currently trying to use the Kendo PDF Export Function using Kendo Drawing and have been struggling to split the page of dynamic widgets into 2 and it cuts off the bottom of the page and doesnt go onto a second page even when using force page break.

 

Is there any function to check if the page is overflowing? so I can adjust the table template with extra white space.

Or how can I amend this issue and make the page flow onto 2 pages even if the element ends up getting split in 2.

Attempt without page breaking:

const drawing = awaitdrawDOM(this.elm.nativeElement, { paperSize: 'a4', scale: 0.45, }); const myData = await exportPDF(drawing); saveAs(myData, `test.pdf`);

 

<div #elm >
...content...
</div>

 

In the image of the pdf, the bottom of the grid is cut off, then I did the same with text and the text template isnt even visible and doesnt flow onto the next page.

 

Attempt with Page breaking:

const drawing = awaitdrawDOM(this.elm.nativeElement, {
      paperSize: 'a4',
      scale: 0.45, 
      forcePageBreak: '.page-break',
    });

const myData = await exportPDF(drawing);

saveAs(myData, `test.pdf`);

 

Child Component with page breaking:

<div class=".page-break"></div>
<div class="h-full flex flex-col">
...content...
</div>


 

 

Grid component with page breaking

<div class="h-full flex flex-col page-break">

<ngContainer... *gridTemplate></ng-container>

...content...
</div>

<ngTemplate  #gridTemplate>
...Kendo Grid...
</ngTemplate>

ProgramBear
Top achievements
Rank 1
 updated question on 04 Dec 2023
1 answer
123 views
<section style="margin-top: 1rem;">
        <div class="container h-100" style="width: 100vw;">
            <div id="contentToConvet" class="row d-flex h-100">
                <div class="col">
                    <div class="row">
                        <div class="col-1">
                            <img [src]="imageUrl" alt="Image Description">
                        </div>
                        <div class="col-11">
                            <h3 class="text-black mb-2" style="text-align: center;">CRIME SITREP For SUPERINTENDENT OF
                                POLICE,KARNAL
                            </h3>
                            <h5 style="text-align: center; font-weight: bolder;">{{getCurrentDate()}}</h5>
                            <h5 style="text-align: center;">Up to Midnight of {{getPreviousDate()}}</h5>
                            <h2 style="text-align: center;">Section I: Registration of FIR on {{getPreviousDate()}}
                            </h2>
                        </div>
                    </div>
                    <div>
   
                        <head>
                            <title>Incident Report Form</title>
                        </head>
                        <app-section1-registration-of-fir></app-section1-registration-of-fir>
                        <hr>
                        <app-section2-accused-arrested></app-section2-accused-arrested>
                        <app-section3-case-property></app-section3-case-property>
                        <app-section4-modification-of-sections></app-section4-modification-of-sections>
                        <app-section5-disposal-of-cases></app-section5-disposal-of-cases>
                        <app-section6-case-reopened></app-section6-case-reopened>
                        <app-section7-submission-of-final-reports></app-section7-submission-of-final-reports>
                        <app-section8-preventive-action></app-section8-preventive-action>
                        <app-section9-unnatural-deaths></app-section9-unnatural-deaths>
                        <app-section11-fir-upload></app-section11-fir-upload>
                    </div>
                    <!-- <button class="btn btn-primary" type="button" printSectionId="section" ngxPrint>Generate
                            Report</button> -->
                </div>
   
            </div>
            <button (click)="exportToPDF()">Export to PDF</button>
   
        </div>
    </section>
Tsvetelina
Telerik team
 answered on 01 Dec 2023
1 answer
172 views

I’m using Kendo PDFViewer ver 13.1.0, and this is what my codes look like:

<kendo-pdfviewer
[url]="url"
(load)="onLoad($event)"
[zoom]="0.75"
[saveFileName]="filename"
(pageChange)="onPageChange($event)"
(error)="onError($event)"
[ngStyle]="{ height: height + 'px' }"
></kendo-pdfviewer>


As you can see I didn’t set any toolbar on it and by default it should show all the toolbar options that is included by the package, 

But the issue here is that if the user start to search using the ‘search’ from toolbar option, it is somehow broken as you can see in the picture. The detected key is not highlighted properly.

Can someone assist me with this concern?

Thanks!

Martin Bechev
Telerik team
 answered on 16 Nov 2023
1 answer
391 views

Hello,

How can we use dropdown buttons to show export to excel and export to pdf options in grid's header? I'm not able to visualize how to use kendoGridExcelCommand and kendoGridPdfCommand in dropdown button.

 

Hetali
Telerik team
 updated answer on 17 Oct 2023
0 answers
127 views

Hello,

How can I export an html to PDF and open it in another tab or new browser? I'm trying to use the PDFExport Component but that seems to be working only to save the pdf file into the user's system.

Daniel
Top achievements
Rank 1
 asked on 19 Sep 2023
1 answer
108 views

I noticed that when using the kendo-pdf-export wrapper if I had elements using linear-gradient for background, it would not export the background.

For example I had some elements that where using a hashing background.


Andrei
Top achievements
Rank 1
Iron
 answered on 18 Sep 2023
1 answer
670 views

Hello,

 

When using kendo-pdf-export to export a table to pdf, if the content in a row is longer than a page, it will cut off the content. 

The html page:


The pdf:

 

Any one has any idea how to fix this?

 

Thanks in advance !

 

Martin Bechev
Telerik team
 answered on 13 Sep 2023
Narrow your results
Selected tags
Tags
+? more
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?