Print

How to control the layout when the user prints the view, or sends it to PDF.

Table of Contents

1. Print
   1. Add a print button
   2. Hide on print / show only on print
   3. Custom print layout

Add a print button

The print button is added from xml. See export.

    <table>
        <export>print</export>

Hide on print / show only on print

Use the built-in classes k-no-print and k-print-only to control what shows on screen vs paper.

• k-no-print is visible on screen, hidden when printing
• k-print-only is hidden on screen, visible only when printing

<div class="k-no-print">
  <p>This is shown on screen, but not on print.</p>
</div>

<h1 class="k-print-only">Customer report</h1>

Custom print layout

Combine the built-in classes with a @media print stylesheet for further adjustments.
Here we enlarge the font and force a page break before each customer.

<style>
  @media print {
    body { font-size: 14pt; }
    .customer { page-break-before: always; }
  }
</style>

<h1 class="k-print-only">Customer report</h1>

<div class="k-no-print">
  <p>Click the print button to export this view as PDF.</p>
</div>

<% @docs.each do |doc| %>
  <div class="customer">
    <h2><%= doc["name"] %></h2>
    <p><%= doc["email"] %></p>
  </div>
<% end %>

• page-break-before: always starts a new page for each customer
• font-size can be increased for better readability on paper

Tip Increase <rows> in xml to get all records in one print or PDF.