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

Show hidden columns during PDF Export


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


After showing and hiding of the hidden column it leaves a empty space in the grid when I use the showColumn() and hideColumn() methods. How can I avoid this?


The usage of the showColumn() and hideColumn() methods is known for causing this behaviour. Another option to show the desired columns is to only using CSS rules just for the PDF Export and remove the JavaScript handler:

    .k-pdf-export td:nth-child(1),.k-pdf-export thead th:nth-child(1)
      display: table-cell !important;       
      .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 td:nth-child(1),.k-pdf-export thead th:nth-child(1)
        display: table-cell !important;        

      .k-pdf-export .k-grid-column-menu{
        display: none;

    <!-- Load Pako Deflate library to enable PDF compression -->
    <script src=""></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 class="footer">
              <div style="float: right">Page #: pageNum # of #: totalPages #</div>

        toolbar: ["pdf"],
        pdf: {
          fileName: "Kendo UI Grid Export.pdf",
          paperSize: "A4",
          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: ""
          pageSize: 10
        sortable: true,
        scrollable: true,
        pageable: true,
        filterable: true,
        columnMenu: true,
        columns: [
          { field: "Discontinued", hidden:true, width:200 },
          { field: "UnitsOnOrder", title: "Units On Order1", width: 300 },
          { field: "UnitsInStock", title: "Units In Stock1", width: 300 },
          { field: "ProductName", title: "Product Name2", width: 300 },

See Also

In this article