|
| 1 | +--- |
| 2 | +title: Hiding Checkboxes in PDF Export for Kendo UI for jQuery Grid |
| 3 | +description: Learn how to hide selectable column checkboxes when exporting the Kendo UI for jQuery Grid to PDF. |
| 4 | +type: how-to |
| 5 | +page_title: How to Hide Selectable Column Checkboxes in Grid PDF Export |
| 6 | +slug: hide-checkboxes-grid-pdf-export |
| 7 | +tags: kendo, ui, grid, jquery, pdf, export, checkbox, hide |
| 8 | +res_type: kb |
| 9 | +ticketid: 1675794 |
| 10 | +--- |
| 11 | + |
| 12 | +## Environment |
| 13 | + |
| 14 | +<table> |
| 15 | +<tbody> |
| 16 | +<tr> |
| 17 | +<td>Product</td> |
| 18 | +<td>Progress® Kendo UI® Grid for jQuery </td> |
| 19 | +</tr> |
| 20 | +<tr> |
| 21 | +<td>Version</td> |
| 22 | +<td>2024.3.806</td> |
| 23 | +</tr> |
| 24 | +</tbody> |
| 25 | +</table> |
| 26 | + |
| 27 | +## Description |
| 28 | + |
| 29 | +I am utilizing the Grid component and need the functionality to hide the checkboxes when exporting it to a PDF. This knowledge base article also answers the following questions: |
| 30 | +- How to exclude the selectable column from Grid PDF export? |
| 31 | +- How to hide elements in the Grid when exporting to PDF? |
| 32 | +- How to customize Grid PDF export appearance? |
| 33 | + |
| 34 | +## Solution |
| 35 | + |
| 36 | +To hide the checkboxes from the exported PDF, leverage the `.k-pdf-export` CSS class. Apply the following CSS rule to target and hide the checkboxes within the Grid during the PDF export process: |
| 37 | + |
| 38 | +```css |
| 39 | +.k-pdf-export #grid .k-checkbox { |
| 40 | + display: none; |
| 41 | +} |
| 42 | +``` |
| 43 | +```dojo |
| 44 | +<script src="https://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script> |
| 45 | + <div id="grid"></div> |
| 46 | + <script> |
| 47 | + $(document).ready(function() { |
| 48 | + $("#grid").kendoGrid({ |
| 49 | + dataSource: { |
| 50 | + data: products, |
| 51 | + pageSize: 20 |
| 52 | + }, |
| 53 | + toolbar: ["pdf"], |
| 54 | + height: 550, |
| 55 | + scrollable: true, |
| 56 | + pageable: true, |
| 57 | + columns: [ |
| 58 | + { selectable: true, width: "50px" }, |
| 59 | + "ProductName", |
| 60 | + { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" }, |
| 61 | + { field: "UnitsInStock", title: "Units In Stock", width: "130px" }, |
| 62 | + { field: "Discontinued", width: "130px" } |
| 63 | + ] |
| 64 | + }); |
| 65 | + }); |
| 66 | + </script> |
| 67 | + <style> |
| 68 | + .k-pdf-export #grid .k-checkbox { |
| 69 | + display: none; |
| 70 | + } |
| 71 | + </style> |
| 72 | +
|
| 73 | +``` |
| 74 | + |
| 75 | +This CSS rule ensures that checkboxes in the selectable column are not visible in the exported PDF document. It targets the checkboxes within the Grid identified by `#grid` when the `.k-pdf-export` class is applied, which is the case during the PDF export operation. |
| 76 | + |
| 77 | +## See Also |
| 78 | + |
| 79 | +- [Grud PDF Export Documentation](https://docs.telerik.com/kendo-ui/controls/grid/export/pdf-export) |
| 80 | +- [Customizing the PDF Export](https://docs.telerik.com/kendo-ui/knowledge-base/grid-hide-columns-pdf-export) |
0 commit comments