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

Change Column Widths during PDF Export

Environment

Product Progress® Kendo UI® Grid for jQuery
Product Version Created with the 2017.3.1026 version

Description

How can I change the width of the Grid columns when I export them to PDF?

Solution

The PDF Export appends a k-pdf-export class to all the elements and then removes it. That is why, you can target the colgroup > col setting and use CSS rules.

.k-pdf-export colgroup > col {
  width: 50px !important;        
}

.k-pdf-export td {
  white-space: nowrap;
}

You can also target specific columns by using the :nth-child() selector.

.k-pdf-export colgroup > col:nth-child(1),
.k-pdf-export colgroup > col:nth-child(4),
.k-pdf-export colgroup > col:nth-child(7)
{
    width: 150px !important;        
}
 <style>
      .page-template {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
      }

      .page-template .header {
        position: absolute;
        top: 30px;
        left: 30px;
        right: 30px;
        border-bottom: 1px solid #888;
        text-align: center;
        font-size: 18px;
      }

      .page-template .footer {
        position: absolute;
        bottom: 30px;
        left: 30px;
        right: 30px;
      }

      .k-pdf-export colgroup > col {
        width: 50px !important;        
      }
      .k-pdf-export colgroup > col:nth-child(1),
      .k-pdf-export colgroup > col:nth-child(4),
      .k-pdf-export colgroup > col:nth-child(7)
      {
        width: 150px !important;        
      }
      .k-pdf-export td {
        white-space: nowrap;
      }
      .k-pdf-export .k-grid-column-menu{
        display: none;
      }
    </style>
  </head>
  <body>

    <!-- Load Pako Deflate library to enable PDF compression -->
    <script src="https://unpkg.com/pako/dist/pako_deflate.min.js"></script>

    <div id="grid"></div>
    <script type="x/kendo-template" id="page-template">
        <div class="page-template">
            <div class="header">
                Kendo UI Grid Export
      </div>
          <div class="footer">
              <div style="float: right">Page #: pageNum # of #: totalPages #</div>
      </div>
      </div>
    </script>

    <script>
      $("#grid").kendoGrid({
        toolbar: ["pdf"],
        pdf: {
          fileName: "Kendo UI Grid Export.pdf",
          paperSize: "A2",
          allPages: true,
          avoidLinks: true,
          margin: { top: "1.5cm", right: "0.5cm", bottom: "1cm", left: "0.5cm" },
          landscape: true,
          repeatHeaders: true,
          template: $("#page-template").html(),
          scale: 0.6
        },
        dataSource: {
          type: "odata",
          transport: {
            read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
          },
          pageSize: 10
        },
        sortable: true,
        scrollable: true,
        pageable: true,
        filterable: true,
        columnMenu: true,
        columns: [
          { field: "ProductName", title: "Product Name1", width: 300 },
          { field: "UnitsOnOrder", title: "Units On Order1", width: 300 },
          { field: "UnitsInStock", title: "Units In Stock1", width: 300 },
          { field: "ProductName", title: "Product Name2", width: 300 },
          { field: "UnitsOnOrder", title: "Units On Order2", width: 300 },
          { field: "UnitsInStock", title: "Units In Stock2", width: 300 },
          { field: "ProductName", title: "Product Name3", width: 300 },
          { field: "UnitsOnOrder", title: "Units On Order3", width: 300 },
          { field: "UnitsInStock", title: "Units In Stock3", width: 300 }
        ]
      });
    </script>

See Also

In this article