Skip to content

Commit 6cb95e9

Browse files
kendo-botKB BotTsvetomir-Hr
authored
Added new kb article pdfviewer-upload-controls-visibility (#2739)
* Added new kb article pdfviewer-upload-controls-visibility * chore: polish example and update article content for better seo * chore: mention dropzone --------- Co-authored-by: KB Bot <kb-bot@telerik.com> Co-authored-by: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
1 parent fe08be6 commit 6cb95e9

File tree

1 file changed

+68
-0
lines changed

1 file changed

+68
-0
lines changed
Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
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

Comments
 (0)