title: Kendo UI in Export to PDF
body: <p>Placeholder not displaying  when click export to PDF.
  Placeholder not displaying for Employee Code and Employee Name.</p>
  
  <p>Even though i added placeholder for Employee Code and Employee Name columns.</p>
  
  <p>Please check the below link and suggest the solution. </p>
  
  <p>Reference Link: <a href="https://codepen.io/anon/pen/bWyjOR" rel="nofollow noreferrer">https://codepen.io/anon/pen/bWyjOR</a></p>
  
  <pre><code> &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
          &lt;base href="https://demos.telerik.com/kendo-ui/pdf-export/page-layout"&gt;
          &lt;style&gt;html { font-size: 14px; font-family: Arial, Helvetica, sans-serif;}
            .pdf-page{
              padding-top:25px;
            }
            .empcode{
             margin-left:40px;margin-top:20px;
            }
            input::-moz-placeholder {
        color:  red !important;
      }
      input:-ms-input-placeholder {
        color: red !important;
      }
      input::-webkit-input-placeholder {
        color: red !important;
      } &lt;/style&gt;
          &lt;title&gt;&lt;/title&gt;
          &lt;link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common-material.min.css" /&gt;
          &lt;link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.material.min.css" /&gt;
          &lt;link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.material.mobile.min.css" /&gt;
  
          &lt;script src="https://kendo.cdn.telerik.com/2017.2.504/js/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://kendo.cdn.telerik.com/2017.2.504/js/jszip.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;div id="example"&gt;
          &lt;div class="page-container"&gt;
              &lt;div class="pdf-page size-a4"&gt;
                &lt;div class="empcode"&gt;
                   Employee Code:  &lt;input data-bind="code" type="text" placeholder="Employee Code"&gt; &lt;input data-bind="name" type="text" placeholder="Employee Name"&gt;
                &lt;/div&gt;
                &lt;div class="box-col empcode"&gt;
                  &lt;h4&gt;Get PDF&lt;/h4&gt;
                  &lt;button class="export-pdf k-button" onclick="getPDF('.pdf-page')"&gt;Export&lt;/button&gt;
              &lt;/div&gt;
                &lt;div class="empcode"&gt;
                  &lt;p&gt;Example&lt;/p&gt;
                  &lt;a href="http://codepen.io/anon/pen/pPxrKa"&gt;http://codepen.io/anon/pen/pPxrKa&lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
  
  
          &lt;style&gt;
              /*
                  Use the DejaVu Sans font for display and embedding in the PDF file.
                  The standard PDF fonts have no support for Unicode characters.
              */
              .pdf-page {
                  font-family: "DejaVu Sans", "Arial", sans-serif;
              }
          &lt;/style&gt;
  
          &lt;script&gt;
              // Import DejaVu Sans font for embedding
  
              // NOTE: Only required if the Kendo UI stylesheets are loaded
              // from a different origin, e.g. cdn.kendostatic.com
              kendo.pdf.defineFont({
                  "DejaVu Sans"             : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans.ttf",
                  "DejaVu Sans|Bold"        : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Bold.ttf",
                  "DejaVu Sans|Bold|Italic" : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",
                  "DejaVu Sans|Italic"      : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",
                  "WebComponentsIcons"      : "https://kendo.cdn.telerik.com/2017.1.223/styles/fonts/glyphs/WebComponentsIcons.ttf"
              });
          &lt;/script&gt;
  
          &lt;!-- Load Pako ZLIB library to enable PDF compression --&gt;
          &lt;script src="../content/shared/js/pako.min.js"&gt;&lt;/script&gt;
  
          &lt;script&gt;
            function getPDF(selector) {
              kendo.drawing.drawDOM($(selector)).then(function(group){
                kendo.drawing.pdf.saveAs(group, "Invoice.pdf");
              });
            }
  
          $(document).ready(function() {
              var data = [
                { productName: "QUESO CABRALES", unitPrice: 21, qty: 5 },
                { productName: "ALICE MUTTON", unitPrice: 39, qty: 7 },
                { productName: "GENEN SHOUYU", unitPrice: 15.50, qty: 3 },
                { productName: "CHARTREUSE VERTE", unitPrice: 18, qty: 1 },
                { productName: "MASCARPONE FABIOLI", unitPrice: 32, qty: 2 },
                { productName: "VALKOINEN SUKLAA", unitPrice: 16.25, qty: 3 }
              ];
              var schema = {
                model: {
                  productName: { type: "string" },
                  unitPrice: { type: "number", editable: false },
                  qty: { type: "number" }
                },
                parse: function (data) {
                      $.each(data, function(){
                          this.total = this.qty * this.unitPrice;
                      });
                      return data;
                }
              };
              var aggregate = [
                { field: "qty", aggregate: "sum" },
                { field: "total", aggregate: "sum" }
              ];
              var columns = [
                { field: "productName", title: "Product", footerTemplate: "Total"},
                { field: "unitPrice", title: "Price", width: 120},
                { field: "qty", title: "Pcs.", width: 120, aggregates: ["sum"], footerTemplate: "#=sum#" },
                { field: "total", title: "Total", width: 120, aggregates: ["sum"], footerTemplate: "#=sum#" }
              ];
              var grid = $("#grid").kendoGrid({
                editable: false,
                sortable: true,
                dataSource: {
                  data: data,
                  aggregate: aggregate,
                  schema: schema,
                },
                columns: columns
              });
  
              $("#paper").kendoDropDownList({
                change: function() {
                  $(".pdf-page")
                    .removeClass("size-a4")
                    .removeClass("size-letter")
                    .removeClass("size-executive")
                    .addClass(this.value());
                }
              });
          });
          &lt;/script&gt;
          &lt;style&gt;
              .pdf-page {
                  margin: 0 auto;
                  box-sizing: border-box;
                  box-shadow: 0 5px 10px 0 rgba(0,0,0,.3);
                  background-color: #fff;
                  color: #333;
                  position: relative;
              }
              .pdf-header {
                  position: absolute;
                  top: .5in;
                  height: .6in;
                  left: .5in;
                  right: .5in;
                  border-bottom: 1px solid #e5e5e5;
              }
              .invoice-number {
                  padding-top: .17in;
                  float: right;
              }
              .pdf-footer {
                  position: absolute;
                  bottom: .5in;
                  height: .6in;
                  left: .5in;
                  right: .5in;
                  padding-top: 10px;
                  border-top: 1px solid #e5e5e5;
                  text-align: left;
                  color: #787878;
                  font-size: 12px;
              }
              .pdf-body {
                  position: absolute;
                  top: 3.7in;
                  bottom: 1.2in;
                  left: .5in;
                  right: .5in;
              }
  
              .size-a4 { width: 8.3in; height: 11.7in; }
              .size-letter { width: 8.5in; height: 11in; }
              .size-executive { width: 7.25in; height: 10.5in; }
  
              .company-logo {
                  font-size: 30px;
                  font-weight: bold;
                  color: #3aabf0;
              }
              .for {
                  position: absolute;
                  top: 1.5in;
                  left: .5in;
                  width: 2.5in;
              }
              .from {
                  position: absolute;
                  top: 1.5in;
                  right: .5in;
                  width: 2.5in;
              }
              .from p, .for p {
                  color: #787878;
              }
              .signature {
                  padding-top: .5in;
              }
          &lt;/style&gt;
  
      &lt;/div&gt;
  
  
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>