New to Telerik UI for Blazor? Start a free 30-day trial
How to Hide Upload Component in TelerikPdfViewer
Environment
| Product | PdfViewer for Blazor |
Description
When using the TelerikPdfViewer for Blazor, upload controls may still be visible while a PDF file is loading, even if the EnableLoaderContainer parameter is set to false.
This knowledge base article also answers the following questions:
- How to prevent interaction with Upload component while a PDF is loading in TelerikPdfViewer?
- How to hide Upload and DropZone components in TelerikPdfViewer until the PDF file is fully loaded?
- How to use custom CSS with TelerikPdfViewer to hide Upload component?
Solution
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 event to apply a CSS class with the required styles that hide the controls until the PDF file is loaded successfully.
<TelerikPdfViewer Data="@PdfSource"
Height="600px"
EnableLoaderContainer="false"
OnOpen="@OnPdfOpen"
Class="@PdfClass">
</TelerikPdfViewer>
<style>
.hide-pdf-upload .k-external-dropzone {
display: none;
}
.hide-pdf-upload .k-upload {
display: none;
}
</style>
@code {
private byte[] PdfSource { get; set; }
private string PdfClass { get; set; } = "";
private async Task OnPdfOpen(PdfViewerOpenEventArgs args)
{
//hide Upload component
PdfClass = "hide-pdf-upload";
}
}