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>

Under the export options for charts, there's an example of how to fit a chart to the size of your paper. Part of this example includes some kind of conversion function and a rectangle constant.

function mm(val: number): number {
  return val * 2.8347;
}

const PAGE_RECT = new geometry.Rect([0, 0], [mm(210 - 20), mm(297 - 20)]);

However, there is absolutely no explanation for these numbers. Am I converting to or from millimeters, and what's the other unit? Why am I doing this? Where are these 210 and 297 numbers coming from in the page rectangle? I can see that the minus 20 is accounting for the 1cm margin set in the PDF below, but other than that I have no idea what the origin of these numbers is.

Can someone please translate these magic numbers? Telerik, can you please add comments to the example code explaining?

I am using kendo ui drawing pad for obtaining digital signatures. I am able to save it as .svg file using save as and display the svg link in console.

But I am unable to extract the svg link from the function to use it outside ExportSVG. Is there any way I can do that?

I am using Kendo Angular UI drawing to generate signature using method "exportSVG()" and is generating url is 64base svg (data:image/svg+xml;base64, ..............) and saving to DB, thing are working fine till I save the data, but while I bind this generated base64 to my display signature component it seems like "cropped". 

I have tried to resize this image but no luck as its 64based image. 

Hello Team,

We are using the Kendo drawing library(drawDom and exportPDF methods) for PDF export in Angular 12. We can have multiple charts and grids that can be dynamically added to be downloaded as PDF and these charts and grids can be further customized by end user. So this has to be handled from client-side only. 

When we are trying to export to PDF, the process is very slow. On debugging, we observed that the exportPDF method is taking a lot of time to complete its execution.

Please suggest if there are any ways/work-arounds by which we can achieve some performance improvement in the PDF export.

I have a donut chart with rounded ends in Kendo UI for jQuery running exactly as the client wants. However, I need this to be using Kendo UI for Angular instead. I believe this is supported if I use Drawing Visuals, but I can't figure out how to port over what I have for my jQuery version into the Angular version.

My working stackblitz of the jQuery donut is here: https://stackblitz.com/edit/web-platform-szmuv9

My Angular version that I am trying to work on is here:

https://stackblitz.com/edit/angular-bi2dsw

My app.component.ts:

@Component({
selector: 'my-app',
  template: `
      <kendo-chart>
        <kendo-chart-legend [visible]="false"></kendo-chart-legend>
        <kendo-chart-area background="none"></kendo-chart-area>
        <kendo-chart-tooltip>
          <ng-template kendoChartSeriesTooltipTemplate
                       let-value="value" let-category="category" let-series="series">
              {{ category }} ({{ series.name }}): {{ value }}%
          </ng-template>
        </kendo-chart-tooltip>
        <kendo-chart-series>
          <kendo-chart-series-item *ngFor="let series of model; let outermost = last;"
                                   type="donut" [startAngle]="90"
                                   [holeSize]="60" [margin]="10"
                                   [name]="series.name" [data]="series.data"
                                   field="value" categoryField="category" colorField="color">
          </kendo-chart-series-item>
        </kendo-chart-series>
      </kendo-chart>
    `,
})

the tempdata.ts file:

export const tempdata = [
  {
    data: [
      {
        category: 'demand',
        value: '75%',
        color: '#009a8c',
      },
      {
        category: 'late',
        value: '25%',
        color: '#e31b23',
      },
    ],
  },
  {
    data: [
      {
        category: 'All',
        value: 500,
        color: '#065aa3',
      },
    ],
  },
];

I am going through your API references as well (https://www.telerik.com/kendo-angular-ui/components/drawing/api/), but haven't had much luck.  Can anyone help point me in the right direction?

Hi, 

I'm working on using Draw and Export a Signature feature to save a drawn object in SVG format while it works on the desktop browser on Mouse event but not working on Mobile browser by Touch event, and is there a way to implement this feature works by Touch event on mobile browser?

Thanks,