Bind string variable as name to pdf.saveAs() handler

[Ron]

I'm currently looking into different ways that I could allow the user's print to pdf give an auto generated file name based on parameters related to the contents of the print which will change based on the query that led them to that point.

I've noticed that there's not much helpful guidance for attempting to modify inline event handlers in Javascript, interpolations cause failure, most advice recommends an attr. prefix which seems to only be relevant to a particular use example, and some people have used escaped quotes but that hasn't worked for me either.

At this point I've decided to bring the PDFExportComponent directly into my component and see if there's anything I can do to pull this into my component and wrap it in my own custom directive. 

Do you have any advice on how I can translate the pdf.saveAs() from an inline directive to a component method or function?

 

[Ron]

The current trajectory I'm on:

html:

    <button kendo-button (click)="pdfSaveAs($event)">
      Export to PDF
    </button>

ts:

import { PDFExportComponent } from '@progress/kendo-angular-pdf-export'

  public pdfExport: PDFExportComponent

  pdfSaveAs() {
    this.pdfExport.saveAs("'filename.pdf'")
  }

I've tried the filename with and without the inner quotes shown above and I'm getting 'Cannot read property 'saveAs' of undefined' in either case. The method takes a string argument so I know I'm on the right track wit that, so I'm wondering if this just isn't connecting with the kendo-pdf-export content and if so maybe there's a way I need to reference that as a parameter object?

[Svet]

Hi Ron,

Thank you for the details.

The demonstrated error suggests, that this.pdfExport is undefined. this.pdfExport is declared with the following line:

public pdfExport: PDFExportComponent

but it is not instantiated. One way to instantiate a component from the markup is by using Angular's @ViewChild as demonstrated in the following example:
https://plnkr.co/edit/qhOqWvHrS24bImPP2OXs?p=preview

The important parts are marked in red below:

import { Component, ViewChild } from '@angular/core';
import { InvoiceRow } from './invoice-row';
import { invoiceData } from './invoice-data';

@Component({

  selector: 'my-app',

  template: `

 

      <button kendo-button (click)="save()">

        Save As PDF...

      </button>

 

    <kendo-pdf-export #pdf paperSize="A4" margin="2cm">

      <my-invoice [data]="data"></my-invoice>

    </kendo-pdf-export>

  `,

  styles: [`

    kendo-pdf-export {

      font-family: "DejaVu Sans", "Arial", sans-serif;

      font-size: 12px;

    }

  `]

})

export class AppComponent {

  public data: InvoiceRow[] = invoiceData;

  @ViewChild('pdf') pdf;

   

  save(){

    this.pdf.saveAs('invoice.pdf')

  }

   

}

Another option is, to use the reference to the PDFExportComponent in the markup as demonstrated in the following example from our documentation:
https://www.telerik.com/kendo-angular-ui/components/pdfexport/#toc-pdf-export-overview

The important parts are marked in red below:

import { Component } from '@angular/core';
import { InvoiceRow } from './invoice-row';
import { invoiceData } from './invoice-data';

@Component({
  selector: 'my-app',
  template: `
    <div class="example-config">
      <button kendo-button (click)="pdf.saveAs('invoice.pdf')">
        Save As PDF...
      </button>
    </div>

    <kendo-pdf-export #pdf paperSize="A4" margin="2cm">
      <my-invoice [data]="data"></my-invoice>
    </kendo-pdf-export>
  `,
  styles: [`
    kendo-pdf-export {
      font-family: "DejaVu Sans", "Arial", sans-serif;
      font-size: 12px;
    }
  `]
})
export class AppComponent {
  public data: InvoiceRow[] = invoiceData;
}

I hope this helps. Let me know in case further assistance is required for this case.

Regards,
Svetlin
Progress Telerik

[Ron]

Svetlin, than you for that answer. The first approach looks like it will be the most straightforward. 

I hope this follow-up question isn't too general but as far the kendo html implementations across the board go, is there a way to tell when @ViewChild will be a viable way to patch into form or template data? I remember having to do something similar to expand detail rows (GridComponent referencing itself) and it would be great to know if there's a way to tell when this is an option.

[Svet]

Hi Ron,

I am not sure that I understand the question, but @ViewChild helps us to get an element from the DOM and later use it in the component. Furthermore, If the view DOM changes and a new child matches the selector, the property used in the component, will be updated. This can be useful in specific scenarios, for example, when the element in the DOM is not initially created.

I hope this provides some more information.

Regards,
Svetlin
Progress Telerik