New to Kendo UI for jQuery? Start a free 30-day trial

Pdf

configuration

Configures the PDF export settings of the PropertyGrid.

Chrome is known to crash when generating very large PDF-s. A solution to this is to include the Pako library. Simply loading this library with a <script> tag enables compression in the PDF, e.g.:

<script src="https://unpkg.com/pako/dist/pako_deflate.min.js"></script>

pdf

Object
<div id="propertyGrid"></div>
<script>
$("#propertyGrid").kendoPropertyGrid({
    toolbar: ["pdf", "spacer", "search"],
    pdf: {
        fileName: "PropertyGrid.pdf",
        author: "Kendo UI Team",
        autoPrint: true,
        margin: { top: 20, left: 20, right: 20, bottom: 20 }
    },
    model: {
        foo: "bar",
        baz: 5
    }
});
</script>

The author of the PDF document.

Default: null

<div id="propertyGrid"></div>
<script>
  $("#propertyGrid").kendoPropertyGrid({
    columns: {
        fieldColumn: { width: 200 },
        valueColumn: { width: 250 }
    },
    model: {
        foo: "bar",
        baz: 5
    },
    toolbar: ["pdf"],
    pdf: {
        author: "John Doe"
    }
  });
</script>

Specifies if the Print dialog should be opened immediately after loading the document.

Some PDF Readers/Viewers will not allow opening the Print Preview by default, it might be necessary to configure the corresponding add-on or application.

Default: false

<div id="propertyGrid"></div>
<script>
$("#propertyGrid").kendoPropertyGrid({
    pdf: {
        fileName: "PropertyGrid.pdf",
        autoPrint: true
    },
    model: {
        foo: "bar",
        baz: 5
    }
});
</script>
Boolean|String

A flag which indicates whether to produce actual hyperlinks in the exported PDF file. You can also pass a CSS selector as an argument. All matching links will be ignored.

Default: false

<div id="propertyGrid"></div>
<script>
$("#propertyGrid").kendoPropertyGrid({
    pdf: {
        fileName: "PropertyGrid.pdf",
        avoidLinks: true
    },
    model: {
        foo: "bar",
        baz: 5
    }
});
</script>

The creator of the PDF document.

Default: "Kendo UI PDF Generator"

<div id="propertyGrid"></div>
<script>
  $("#propertyGrid").kendoPropertyGrid({
    columns: {
        fieldColumn: { width: 200 },
        valueColumn: { width: 250 }
    },
    model: {
        foo: "bar",
        baz: 5
    },
    toolbar: ["pdf"],
    pdf: {
      creator: "John Doe"
    }
  });
</script>

The date when the PDF document is created. Defaults to new Date().

<div id="propertyGrid"></div>
<script>
  $("#propertyGrid").kendoPropertyGrid({
    columns: {
        fieldColumn: { width: 200 },
        valueColumn: { width: 250 }
    },
    model: {
        foo: "bar",
        baz: 5
    },
    toolbar: ["pdf"],
    pdf: {
      date: new Date("2014/10/10")
    }
  });
</script>

Specifies the file name of the exported PDF file.

Default: "Export.pdf"

<div id="propertyGrid"></div>
<script>
  $("#propertyGrid").kendoPropertyGrid({
    columns: {
        fieldColumn: { width: 200 },
        valueColumn: { width: 250 }
    },
    model: {
        foo: "bar",
        baz: 5
    },
    toolbar: ["pdf"],
    pdf: {
      fileName: "Employees.pdf"
    }
  });
</script>

If set to true, the content will be forwarded to proxyURL even if the browser supports the local saving of files.

Default: false

<div id="propertyGrid"></div>
<script>
$("#propertyGrid").kendoPropertyGrid({
    pdf: {
        fileName: "PropertyGrid.pdf",
        forceProxy: true,
        proxyURL: "/api/export-pdf"
    },
    model: {
        foo: "bar",
        baz: 5
    }
});
</script>

Specifies the quality of the images within the exported file, from 0 to 1.

Default: 0.92

<div id="propertyGrid"></div>
<script>
$("#propertyGrid").kendoPropertyGrid({
    pdf: {
        fileName: "PropertyGrid.pdf",
        jpegQuality: 0.8
    },
    model: {
        foo: "bar",
        baz: 5
    }
});
</script>

If set to true all PNG images contained in the exported file will be kept in PNG format.

Default: false

<div id="propertyGrid"></div>
<script>
$("#propertyGrid").kendoPropertyGrid({
    pdf: {
        fileName: "PropertyGrid.pdf",
        keepPNG: true
    },
    model: {
        foo: "bar",
        baz: 5
    }
});
</script>

Specifies the keywords of the exported PDF file.

Default: null

<div id="propertyGrid"></div>
<script>
  $("#propertyGrid").kendoPropertyGrid({
    columns: {
        fieldColumn: { width: 200 },
        valueColumn: { width: 250 }
    },
    model: {
        foo: "bar",
        baz: 5
    },
    toolbar: ["pdf"],
    pdf: {
      keywords: "object details"
    }
  });
</script>

If set to true, reverses the paper dimensions in such a way that the width becomes the larger edge.

Default: false

<div id="propertyGrid"></div>
<script>
  $("#propertyGrid").kendoPropertyGrid({
    columns: {
        fieldColumn: { width: 200 },
        valueColumn: { width: 250 }
    },
    model: {
        foo: "bar",
        baz: 5
    },
    toolbar: ["pdf"],
    pdf: {
      landscape: true
    }
  });
</script>

Specifies the margins of the page and accepts numbers or strings with units.

The supported units are:

  • mm
  • cm
  • in
  • (Default) pt
<div id="propertyGrid"></div>
<script>
  $("#propertyGrid").kendoPropertyGrid({
    columns: {
        fieldColumn: { width: 200 },
        valueColumn: { width: 250 }
    },
    model: {
        foo: "bar",
        baz: 5
    },
    toolbar: ["pdf"],
    pdf: {
      margin: {
        left: 10,
        right: "10pt",
        top: "10mm",
        bottom: "1in"
      }
    }
  });
</script>

pdf.paperSize

String|Array

Specifies the paper size of the PDF document. when auto (default), the paper size is determined by the content.

The supported values are:

  • A predefined size such as A4, A3, and so on.
  • An array of two numbers which specify the width and height in points (1pt = 1/72in).
  • An array of two strings which specify the width and height in units. The supported units are:
    • mm
    • cm
    • in
    • pt

The size of the content in pixels will match the size of the output in points (1 pixel = 1/72 inch).

Default: "auto"

<div id="propertyGrid"></div>
<script>
  $("#propertyGrid").kendoPropertyGrid({
    columns: {
        fieldColumn: { width: 200 },
        valueColumn: { width: 250 }
    },
    model: {
        foo: "bar",
        baz: 5
    },
    toolbar: ["pdf"],
    pdf: {
      paperSize: ["20mm", "20mm"]
    },
  });
</script>

A name or keyword which indicates where to display the document that was returned by the proxy. To display the document in a new window or iframe, the proxy will set the Content-Disposition header to inline; filename="<fileName.pdf>".

Default: "_self"

<div id="propertyGrid"></div>
<script>
  $("#propertyGrid").kendoPropertyGrid({
    columns: {
        fieldColumn: { width: 200 },
        valueColumn: { width: 250 }
    },
    model: {
        foo: "bar",
        baz: 5
    },
    toolbar: ["pdf"],
    pdf: {
        forceProxy: true,
        proxyURL: "/save",
        proxyTarget: "_blank"
    },
  });
</script>

The URL of the server side proxy which will stream the file to the end user. A proxy will be used when the browser is not capable of saving files locally. Such browsers are IE version 9 and earlier, and Safari. The developer is responsible for implementing the server-side proxy. The proxy will return the decoded file with the Content-Disposition header set to attachment; filename="<fileName.pdf>".

The proxy will receive a POST request with the following parameters in the request body:

  • contentType—The MIME type of the file.
  • base64—The base-64 encoded file content.
  • fileName—The file name, as requested by the caller.

Default: null

<div id="propertyGrid"></div>
<script>
  $("#propertyGrid").kendoPropertyGrid({
    columns: {
        fieldColumn: { width: 200 },
        valueColumn: { width: 250 }
    },
    model: {
        foo: "bar",
        baz: 5
    },
    toolbar: ["pdf"],
    pdf: {
      proxyURL: "/save"
    },
  });
</script>

Sets the subject of the PDF file.

Default: null

<div id="propertyGrid"></div>
<script>
  $("#propertyGrid").kendoPropertyGrid({
    columns: {
        fieldColumn: { width: 200 },
        valueColumn: { width: 250 }
    },
    model: {
        foo: "bar",
        baz: 5
    },
    toolbar: ["pdf"],
    pdf: {
      subject: "Details"
    },
  });
</script>

pdf.title

String

Sets the title of the PDF file.

Default: null

<div id="propertyGrid"></div>
<script>
  $("#propertyGrid").kendoPropertyGrid({
    columns: {
        fieldColumn: { width: 200 },
        valueColumn: { width: 250 }
    },
    model: {
        foo: "bar",
        baz: 5
    },
    toolbar: ["pdf"],
    pdf: {
      title: "Information"
    },
  });
</script>