|
| 1 | +--- |
| 2 | +title: How to Hide Upload Component in TelerikPdfViewer |
| 3 | +description: Learn how to hide the Upload component in TelerikPdfViewer when loading a PDF file. |
| 4 | +type: how-to |
| 5 | +page_title: How to Hide Upload Component in TelerikPdfViewer |
| 6 | +slug: pdfviewer-kb-hide-upload |
| 7 | +tags: pdfviewer, blazor, upload, visibility, enableloadercontainer, hide, dropzone |
| 8 | +res_type: kb |
| 9 | +ticketid: 1675214 |
| 10 | +--- |
| 11 | + |
| 12 | +## Environment |
| 13 | + |
| 14 | +<table> |
| 15 | + <tbody> |
| 16 | + <tr> |
| 17 | + <td>Product</td> |
| 18 | + <td>PdfViewer for Blazor</td> |
| 19 | + </tr> |
| 20 | + </tbody> |
| 21 | +</table> |
| 22 | + |
| 23 | +## Description |
| 24 | + |
| 25 | +When using the [TelerikPdfViewer](https://docs.telerik.com/blazor-ui/components/pdfviewer/overview) for Blazor, upload controls may still be visible while a PDF file is loading, even if the `EnableLoaderContainer` parameter is set to `false`. |
| 26 | + |
| 27 | +This knowledge base article also answers the following questions: |
| 28 | + |
| 29 | +- How to prevent interaction with Upload component while a PDF is loading in TelerikPdfViewer? |
| 30 | +- How to hide Upload and DropZone components in TelerikPdfViewer until the PDF file is fully loaded? |
| 31 | +- How to use custom CSS with TelerikPdfViewer to hide Upload component? |
| 32 | + |
| 33 | +## Solution |
| 34 | + |
| 35 | +To control the visibility of Upload component and its dropzone in the `TelerikPdfViewer` while a PDF is loading, apply custom CSS to hide the upload controls. To achieve that, use the [`OnOpen`](slug://components/pdfviewer/events#onopen) event to apply a CSS class with the required styles that hide the controls until the PDF file is loaded successfully. |
| 36 | + |
| 37 | +````RAZOR |
| 38 | +<TelerikPdfViewer Data="@PdfSource" |
| 39 | + Height="600px" |
| 40 | + EnableLoaderContainer="false" |
| 41 | + OnOpen="@OnPdfOpen" |
| 42 | + Class="@PdfClass"> |
| 43 | +</TelerikPdfViewer> |
| 44 | +<style> |
| 45 | + .hide-pdf-upload .k-external-dropzone { |
| 46 | + display: none; |
| 47 | + } |
| 48 | +
|
| 49 | + .hide-pdf-upload .k-upload { |
| 50 | + display: none; |
| 51 | + } |
| 52 | +</style> |
| 53 | +@code { |
| 54 | + private byte[] PdfSource { get; set; } |
| 55 | + private string PdfClass { get; set; } = ""; |
| 56 | +
|
| 57 | + private async Task OnPdfOpen(PdfViewerOpenEventArgs args) |
| 58 | + { |
| 59 | + //hide Upload component |
| 60 | + PdfClass = "hide-pdf-upload"; |
| 61 | + } |
| 62 | +} |
| 63 | +```` |
| 64 | + |
| 65 | +## See Also |
| 66 | + |
| 67 | +- [TelerikPdfViewer Overview](slug://components/pdfviewer/overview) |
| 68 | +- [TelerikPdfViewer Events](slug://components/pdfviewer/events) |
0 commit comments