From b4c889dc6f4b1953a9f9cbc24da84c8eb4fb007e Mon Sep 17 00:00:00 2001 From: KB Bot Date: Fri, 31 Jan 2025 11:16:51 +0000 Subject: [PATCH 1/3] Added new kb article pdfviewer-upload-controls-visibility --- .../pdfviewer-upload-controls-visibility.md | 73 +++++++++++++++++++ 1 file changed, 73 insertions(+) create mode 100644 knowledge-base/pdfviewer-upload-controls-visibility.md diff --git a/knowledge-base/pdfviewer-upload-controls-visibility.md b/knowledge-base/pdfviewer-upload-controls-visibility.md new file mode 100644 index 000000000..9c1235468 --- /dev/null +++ b/knowledge-base/pdfviewer-upload-controls-visibility.md @@ -0,0 +1,73 @@ +--- +title: Handle Upload Controls Visibility in TelerikPdfViewer +description: Learn how to manage the visibility of upload controls in TelerikPdfViewer when loading a PDF file. +type: how-to +page_title: How to Control Upload Component Visibility in TelerikPdfViewer +slug: pdfviewer-kb-upload-controls-visibility +tags: pdfviewer, blazor, upload controls, visibility, enableloadercontainer +res_type: kb +ticketid: 1675214 +--- + +## Environment + + + + + + + + +
ProductPdfViewer for Blazor
+ +## Description + +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`. + +This knowledge base article also answers the following questions: + +- How to prevent interaction with Upload controls while a PDF is loading in TelerikPdfViewer? +- How to hide Upload component in TelerikPdfViewer until the PDF file is fully loaded? +- How to use custom CSS with TelerikPdfViewer to manage control visibility? + +## Solution + +To control the visibility of upload controls in the `TelerikPdfViewer` while a PDF is loading, apply custom CSS to hide the upload controls. This can be achieved by leveraging 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. + +````RAZOR + + + +@code { + private byte[] PdfSource { get; set; } + private string PdfClass { get; set; } = ""; + + private async Task OnPdfOpen(PdfViewerOpenEventArgs args) + { + //hide upload controls + PdfClass = "my-pdf"; + } + + protected override void OnInitialized() + { + base.OnInitialized(); + } +} +```` + +## See Also + +- [TelerikPdfViewer Overview](slug://components/pdfviewer/overview) +- [TelerikPdfViewer Events](slug://components/pdfviewer/events) From 0170c8a15e7a40797fe48e168c3794dfd246d27b Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Fri, 7 Feb 2025 10:27:38 +0200 Subject: [PATCH 2/3] chore: polish example and update article content for better seo --- .../pdfviewer-upload-controls-visibility.md | 29 ++++++++----------- 1 file changed, 12 insertions(+), 17 deletions(-) diff --git a/knowledge-base/pdfviewer-upload-controls-visibility.md b/knowledge-base/pdfviewer-upload-controls-visibility.md index 9c1235468..cfa92dc1b 100644 --- a/knowledge-base/pdfviewer-upload-controls-visibility.md +++ b/knowledge-base/pdfviewer-upload-controls-visibility.md @@ -1,10 +1,10 @@ --- -title: Handle Upload Controls Visibility in TelerikPdfViewer -description: Learn how to manage the visibility of upload controls in TelerikPdfViewer when loading a PDF file. +title: How to Hide Upload Component in TelerikPdfViewer +description: Learn how to hide the Upload component in TelerikPdfViewer when loading a PDF file. type: how-to -page_title: How to Control Upload Component Visibility in TelerikPdfViewer -slug: pdfviewer-kb-upload-controls-visibility -tags: pdfviewer, blazor, upload controls, visibility, enableloadercontainer +page_title: How to Hide Upload Component in TelerikPdfViewer +slug: pdfviewer-kb-hide-upload +tags: pdfviewer, blazor, upload, visibility, enableloadercontainer, hide res_type: kb ticketid: 1675214 --- @@ -26,13 +26,13 @@ When using the [TelerikPdfViewer](https://docs.telerik.com/blazor-ui/components/ This knowledge base article also answers the following questions: -- How to prevent interaction with Upload controls while a PDF is loading in TelerikPdfViewer? +- How to prevent interaction with Upload component while a PDF is loading in TelerikPdfViewer? - How to hide Upload component in TelerikPdfViewer until the PDF file is fully loaded? -- How to use custom CSS with TelerikPdfViewer to manage control visibility? +- How to use custom CSS with TelerikPdfViewer to hide Upload component? ## Solution -To control the visibility of upload controls in the `TelerikPdfViewer` while a PDF is loading, apply custom CSS to hide the upload controls. This can be achieved by leveraging 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. +To control the visibility of Upload component 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. ````RAZOR @@ -56,13 +56,8 @@ To control the visibility of upload controls in the `TelerikPdfViewer` while a P private async Task OnPdfOpen(PdfViewerOpenEventArgs args) { - //hide upload controls - PdfClass = "my-pdf"; - } - - protected override void OnInitialized() - { - base.OnInitialized(); + //hide Upload component + PdfClass = "hide-pdf-upload"; } } ```` From af76cde837cb16a666fbf8f854244c5f0b1a35f7 Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Mon, 10 Feb 2025 15:43:21 +0200 Subject: [PATCH 3/3] chore: mention dropzone --- knowledge-base/pdfviewer-upload-controls-visibility.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/knowledge-base/pdfviewer-upload-controls-visibility.md b/knowledge-base/pdfviewer-upload-controls-visibility.md index cfa92dc1b..1185b0d72 100644 --- a/knowledge-base/pdfviewer-upload-controls-visibility.md +++ b/knowledge-base/pdfviewer-upload-controls-visibility.md @@ -4,7 +4,7 @@ description: Learn how to hide the Upload component in TelerikPdfViewer when loa type: how-to page_title: How to Hide Upload Component in TelerikPdfViewer slug: pdfviewer-kb-hide-upload -tags: pdfviewer, blazor, upload, visibility, enableloadercontainer, hide +tags: pdfviewer, blazor, upload, visibility, enableloadercontainer, hide, dropzone res_type: kb ticketid: 1675214 --- @@ -27,12 +27,12 @@ When using the [TelerikPdfViewer](https://docs.telerik.com/blazor-ui/components/ 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 component in TelerikPdfViewer until the PDF file is fully loaded? +- 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 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. +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. ````RAZOR