Back to all docs
API Reference / ui / TreeList / pdf
New to Kendo UI for jQuery? Start a free 30-day trial

Pdf

configuration

Configures the PDF export settings of the TreeList.

pdf

Object
<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    columns: [
      { field: "Name" },
      { field: "Position" }
    ],
    dataSource: [
      { id: 1, Name: "Daryl Sweeney", Position: "CEO", parentId: null },
      { id: 2, Name: "Guy Wooten", Position: "Chief Technical Officer", parentId: 1 }
    ],
    pdf: {
      fileName: "TreeListData.pdf",
      allPages: true
    }
  });
</script>

pdf.allPages

Boolean

Exports all TreeList pages, starting from the first one.

Note: 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 will enable compression in PDF, e.g.:

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

Default: false

<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    toolbar: ["pdf"],
    columns: [
      { field: "FirstName", title: "First Name" },
      { field: "LastName", title: "Last Name", width: 160 },
      { field: "Position" }
    ],
    pdf: {
        allPages: true
    },
    pageable: {
      pageSize: 10
    },
    dataSource: {
      transport: {
        read: {
          url: "https://demos.telerik.com/service/v2/core/EmployeeDirectory/All"
        }
      },
      schema: {
        model: {
          id: "EmployeeID",
          fields: {
            parentId: { field: "ReportsTo",  nullable: true },
            EmployeeID: { field: "EmployeeId", type: "number" },
            Extension: { field: "Extension", type: "number" }
          },
          expanded: true
        }
      }
    }
  });
</script>

pdf.author

String

The author of the PDF document.

Default: null

<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    toolbar: ["pdf"],
    columns: [
      { field: "FirstName", title: "First Name" },
      { field: "LastName", title: "Last Name", width: 160 },
      { field: "Position" }
    ],
    pdf: {
        author: "John Doe"
    },
    dataSource: {
      transport: {
        read: {
          url: "https://demos.telerik.com/service/v2/core/EmployeeDirectory/All"
        }
      },
      schema: {
        model: {
          id: "EmployeeID",
          fields: {
            parentId: { field: "ReportsTo",  nullable: true },
            EmployeeID: { field: "EmployeeId", type: "number" },
            Extension: { field: "Extension", type: "number" }
          },
          expanded: true
        }
      }
    }
  });
</script>

pdf.autoPrint

Boolean

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

Note: 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="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    columns: [
      { field: "Name" },
      { field: "Position" }
    ],
    dataSource: [
      { id: 1, Name: "Daryl Sweeney", Position: "CEO", parentId: null },
      { id: 2, Name: "Guy Wooten", Position: "Chief Technical Officer", parentId: 1 }
    ],
    pdf: {
      autoPrint: true
    }
  });
</script>

pdf.avoidLinks

Boolean|String

(Available as of the 2015.3.1020 release) 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="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    columns: [
      { field: "Name" },
      { field: "Position" }
    ],
    dataSource: [
      { id: 1, Name: "Daryl Sweeney", Position: "CEO", parentId: null },
      { id: 2, Name: "Guy Wooten", Position: "Chief Technical Officer", parentId: 1 }
    ],
    pdf: {
      avoidLinks: true
    }
  });
</script>

pdf.creator

String

The creator of the PDF document.

Default: "Kendo UI PDF Generator"

<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    toolbar: ["pdf"],
    columns: [
      { field: "FirstName", title: "First Name" },
      { field: "LastName", title: "Last Name", width: 160 },
      { field: "Position" }
    ],
    pdf: {
      creator: "John Doe"
    },
    dataSource: {
      transport: {
        read: {
          url: "https://demos.telerik.com/service/v2/core/EmployeeDirectory/All"
        }
      },
      schema: {
        model: {
          id: "EmployeeID",
          fields: {
            parentId: { field: "ReportsTo",  nullable: true },
            EmployeeID: { field: "EmployeeId", type: "number" },
            Extension: { field: "Extension", type: "number" }
          },
          expanded: true
        }
      }
    }
  });
</script>

pdf.date

Date

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

<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    toolbar: ["pdf"],
    columns: [
      { field: "FirstName", title: "First Name" },
      { field: "LastName", title: "Last Name", width: 160 },
      { field: "Position" }
    ],
    pdf: {
      date: new Date("2014/10/10")
    },
    dataSource: {
      transport: {
        read: {
          url: "https://demos.telerik.com/service/v2/core/EmployeeDirectory/All"
        }
      },
      schema: {
        model: {
          id: "EmployeeID",
          fields: {
            parentId: { field: "ReportsTo",  nullable: true },
            EmployeeID: { field: "EmployeeId", type: "number" },
            Extension: { field: "Extension", type: "number" }
          },
          expanded: true
        }
      }
    }
  });
</script>

pdf.fileName

String

Specifies the file name of the exported PDF file.

Default: "Export.pdf"

<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    toolbar: ["pdf"],
    columns: [
      { field: "FirstName", title: "First Name" },
      { field: "LastName", title: "Last Name", width: 160 },
      { field: "Position" }
    ],
    pdf: {
      fileName: "Employees.pdf"
    },
    dataSource: {
      transport: {
        read: {
          url: "https://demos.telerik.com/service/v2/core/EmployeeDirectory/All"
        }
      },
      schema: {
        model: {
          id: "EmployeeID",
          fields: {
            parentId: { field: "ReportsTo",  nullable: true },
            EmployeeID: { field: "EmployeeId", type: "number" },
            Extension: { field: "Extension", type: "number" }
          },
          expanded: true
        }
      }
    }
  });
</script>

pdf.forceProxy

Boolean

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="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    columns: [
      { field: "Name" },
      { field: "Position" }
    ],
    dataSource: [
      { id: 1, Name: "Daryl Sweeney", Position: "CEO", parentId: null },
      { id: 2, Name: "Guy Wooten", Position: "Chief Technical Officer", parentId: 1 }
    ],
    pdf: {
      forceProxy: true,
      proxyURL: "/save"
    }
  });
</script>

pdf.jpegQuality

Number

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

Default: 0.92

<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    columns: [
      { field: "Name" },
      { field: "Position" }
    ],
    dataSource: [
      { id: 1, Name: "Daryl Sweeney", Position: "CEO", parentId: null },
      { id: 2, Name: "Guy Wooten", Position: "Chief Technical Officer", parentId: 1 }
    ],
    pdf: {
      jpegQuality: 0.8
    }
  });
</script>

pdf.keepPNG

Boolean

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

Default: false

<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    columns: [
      { field: "Name" },
      { field: "Position" }
    ],
    dataSource: [
      { id: 1, Name: "Daryl Sweeney", Position: "CEO", parentId: null },
      { id: 2, Name: "Guy Wooten", Position: "Chief Technical Officer", parentId: 1 }
    ],
    pdf: {
      keepPNG: true
    }
  });
</script>

pdf.keywords

String

Specifies the keywords of the exported PDF file.

Default: null

<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    toolbar: ["pdf"],
    columns: [
      { field: "FirstName", title: "First Name" },
      { field: "LastName", title: "Last Name", width: 160 },
      { field: "Position" }
    ],
    pdf: {
      keywords: "northwind products"
    },
    dataSource: {
      transport: {
        read: {
          url: "https://demos.telerik.com/service/v2/core/EmployeeDirectory/All"
        }
      },
      schema: {
        model: {
          id: "EmployeeID",
          fields: {
            parentId: { field: "ReportsTo",  nullable: true },
            EmployeeID: { field: "EmployeeId", type: "number" },
            Extension: { field: "Extension", type: "number" }
          },
          expanded: true
        }
      }
    }
  });
</script>

pdf.landscape

Boolean

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

Default: false

<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    toolbar: ["pdf"],
    columns: [
      { field: "FirstName", title: "First Name" },
      { field: "LastName", title: "Last Name", width: 160 },
      { field: "Position" }
    ],
    pdf: {
      landscape: true
    },
    dataSource: {
      transport: {
        read: {
          url: "https://demos.telerik.com/service/v2/core/EmployeeDirectory/All"
        }
      },
      schema: {
        model: {
          id: "EmployeeID",
          fields: {
            parentId: { field: "ReportsTo",  nullable: true },
            EmployeeID: { field: "EmployeeId", type: "number" },
            Extension: { field: "Extension", type: "number" }
          },
          expanded: true
        }
      }
    }
  });
</script>

pdf.margin

Object

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

The supported units are:

  • mm
  • cm
  • in
  • (Default) pt
<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    toolbar: ["pdf"],
    columns: [
      { field: "FirstName", title: "First Name" },
      { field: "LastName", title: "Last Name", width: 160 },
      { field: "Position" }
    ],
    pdf: {
      margin: {
        left: 10,
        right: "10pt",
        top: "10mm",
        bottom: "1in"
      }
    },
    dataSource: {
      transport: {
        read: {
          url: "https://demos.telerik.com/service/v2/core/EmployeeDirectory/All"
        }
      },
      schema: {
        model: {
          id: "EmployeeID",
          fields: {
            parentId: { field: "ReportsTo",  nullable: true },
            EmployeeID: { field: "EmployeeId", type: "number" },
            Extension: { field: "Extension", type: "number" }
          },
          expanded: true
        }
      }
    }
  });
</script>

pdf.paperSize

String|Array

Specifies the paper size of the PDF document. The default auto setting means that 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="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    toolbar: ["pdf"],
    columns: [
      { field: "FirstName", title: "First Name" },
      { field: "LastName", title: "Last Name", width: 160 },
      { field: "Position" }
    ],
    pdf: {
      paperSize: ["20mm", "20mm"]
    },
    dataSource: {
      transport: {
        read: {
          url: "https://demos.telerik.com/service/v2/core/EmployeeDirectory/All"
        }
      },
      schema: {
        model: {
          id: "EmployeeID",
          fields: {
            parentId: { field: "ReportsTo",  nullable: true },
            EmployeeID: { field: "EmployeeId", type: "number" },
            Extension: { field: "Extension", type: "number" }
          },
          expanded: true
        }
      }
    }
  });
</script>

pdf.proxyTarget

String

A name or keyword whcih 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="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    toolbar: ["pdf"],
    columns: [
      { field: "FirstName", title: "First Name" },
      { field: "LastName", title: "Last Name", width: 160 },
      { field: "Position" }
    ],
    pdf: {
        forceProxy: true,
        proxyURL: "/save",
        proxyTarget: "_blank"
    },
    dataSource: {
      transport: {
        read: {
          url: "https://demos.telerik.com/service/v2/core/EmployeeDirectory/All"
        }
      },
      schema: {
        model: {
          id: "EmployeeID",
          fields: {
            parentId: { field: "ReportsTo",  nullable: true },
            EmployeeID: { field: "EmployeeId", type: "number" },
            Extension: { field: "Extension", type: "number" }
          },
          expanded: true
        }
      }
    }
  });
</script>

pdf.proxyURL

String

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="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    toolbar: ["pdf"],
    columns: [
      { field: "FirstName", title: "First Name" },
      { field: "LastName", title: "Last Name", width: 160 },
      { field: "Position" }
    ],
    pdf: {
      proxyURL: "/save"
    },
    dataSource: {
      transport: {
        read: {
          url: "https://demos.telerik.com/service/v2/core/EmployeeDirectory/All"
        }
      },
      schema: {
        model: {
          id: "EmployeeID",
          fields: {
            parentId: { field: "ReportsTo",  nullable: true },
            EmployeeID: { field: "EmployeeId", type: "number" },
            Extension: { field: "Extension", type: "number" }
          },
          expanded: true
        }
      }
    }
  });
</script>

pdf.subject

String

Sets the subject of the PDF file.

Default: null

<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    toolbar: ["pdf"],
    columns: [
      { field: "FirstName", title: "First Name" },
      { field: "LastName", title: "Last Name", width: 160 },
      { field: "Position" }
    ],
    pdf: {
      subject: "Employees"
    },
    dataSource: {
      transport: {
        read: {
          url: "https://demos.telerik.com/service/v2/core/EmployeeDirectory/All"
        }
      },
      schema: {
        model: {
          id: "EmployeeID",
          fields: {
            parentId: { field: "ReportsTo",  nullable: true },
            EmployeeID: { field: "EmployeeId", type: "number" },
            Extension: { field: "Extension", type: "number" }
          },
          expanded: true
        }
      }
    }
  });
</script>

pdf.title

String

Sets the title of the PDF file.

Default: null

<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    toolbar: ["pdf"],
    columns: [
      { field: "FirstName", title: "First Name" },
      { field: "LastName", title: "Last Name", width: 160 },
      { field: "Position" }
    ],
    pdf: {
      title: "Employees"
    },
    dataSource: {
      transport: {
        read: {
          url: "https://demos.telerik.com/service/v2/core/EmployeeDirectory/All"
        }
      },
      schema: {
        model: {
          id: "EmployeeID",
          fields: {
            parentId: { field: "ReportsTo",  nullable: true },
            EmployeeID: { field: "EmployeeId", type: "number" },
            Extension: { field: "Extension", type: "number" }
          },
          expanded: true
        }
      }
    }
  });
</script>

Related Members

  • pdf.margin - Specifies the margins of the page and accepts numbers or strings with units.
In this article
pdfpdf.allPagespdf.authorpdf.autoPrintpdf.avoidLinkspdf.creatorpdf.datepdf.fileNamepdf.forceProxypdf.jpegQualitypdf.keepPNGpdf.keywordspdf.landscapepdf.marginpdf.paperSizepdf.proxyTargetpdf.proxyURLpdf.subjectpdf.title
Not finding the help you need?
Contact Support