From 8672073b6b1c23f2f47ce941a9eaafd29776103f Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Mon, 15 Aug 2022 16:58:38 +0300
Subject: [PATCH 01/31] docs(pdfviewer): Add Overview and Events page
---
_config.yml | 2 +
components/pdfviewer/events.md | 84 +++++++++++++++++++++++++++
components/pdfviewer/overview.md | 98 ++++++++++++++++++++++++++++++++
3 files changed, 184 insertions(+)
create mode 100644 components/pdfviewer/events.md
create mode 100644 components/pdfviewer/overview.md
diff --git a/_config.yml b/_config.yml
index e910716079..ea478be8ce 100644
--- a/_config.yml
+++ b/_config.yml
@@ -374,6 +374,8 @@ navigation:
title: "Popup"
"*numerictextbox":
title: "NumericTextBox"
+ "*pdfviewer":
+ title: "PDF Viewer"
"*progressbar":
title: "ProgressBar"
"*qrcode":
diff --git a/components/pdfviewer/events.md b/components/pdfviewer/events.md
new file mode 100644
index 0000000000..b49a1a98ac
--- /dev/null
+++ b/components/pdfviewer/events.md
@@ -0,0 +1,84 @@
+---
+title: Events
+page_title: Events | PdfViewer for Blazor
+description: Events of the PDF Viewer for Blazor.
+slug: pdfviewer-events
+tags: telerik,blazor,pdf,pdfviewer
+published: True
+position: 5
+---
+
+# PdfViewer Events
+
+This article describes the Blazor PDF Viewer events.
+
+* [`OnDownload`](#ondownload)
+* [`OnOpen`](#onopen)
+
+
+## OnDownload
+
+The `OnDownload` event fires when the user clicks on the Download button in the PDF Viewer toolbar.
+
+The event handler receives an argument of type [`PdfViewerDownloadEventArgs`](/blazor-ui/api/Telerik.Blazor.Components.PdfViewerDownloadEventArgs). The event is cancellable and allows the application to set a name of the downloaded file. See [example below](#example).
+
+
+## OnOpen
+
+The `OnOpen` event fires when the user selects a file to open, after clicking on the Open button in the PDF Viewer toolbar.
+
+The event handler receives an argument of type [`PdfViewerOpenEventArgs`](/blazor-ui/api/Telerik.Blazor.Components.PdfViewerOpenEventArgs). The event is cancellable and allows the application to obtain the PDF file name, size and contents as a `Stream`. See [example below](#example).
+
+
+## Example
+
+>caption Handle Blazor PDF Viewer Events
+
+````CSHTML
+
Opened file @PdfName with size @PdfSize.ToString() bytes.
+
+
+
+
+@code {
+ private TelerikPdfViewer PdfViewerRef { get; set; }
+
+ private byte[] PdfSource { get; set; }
+
+ private string PdfName { get; set; } = "...";
+
+ private long PdfSize { get; set; }
+
+ private async Task OnPdfDownload(PdfViewerDownloadEventArgs args)
+ {
+ //args.IsCancelled = true;
+
+ args.FileName = "PDF-Viewer-" + DateTime.Now.Millisecond;
+ }
+
+ private async Task OnPdfOpen(PdfViewerOpenEventArgs args)
+ {
+ //args.IsCancelled = true;
+
+ var file = args.Files.FirstOrDefault();
+
+ PdfName = file.Name;
+ PdfSize = file.Size;
+
+ var buffer = new byte[file.Stream.Length];
+ await file.Stream.ReadAsync(buffer);
+
+ PdfSource = buffer;
+ PdfViewerRef.LoadFile(PdfSource);
+ }
+}
+````
+
+
+## See Also
+
+* [PdfViewer Live Demo](https://demos.telerik.com/blazor-ui/pdfviewer/overview)
+* [PdfViewer API](/blazor-ui/api/Telerik.Blazor.Components.TelerikPdfViewer)
diff --git a/components/pdfviewer/overview.md b/components/pdfviewer/overview.md
new file mode 100644
index 0000000000..f631e2594b
--- /dev/null
+++ b/components/pdfviewer/overview.md
@@ -0,0 +1,98 @@
+---
+title: Overview
+page_title: Overview | PdfViewer for Blazor
+description: Overview of the PDF Viewer for Blazor.
+slug: pdfviewer-overview
+tags: telerik,blazor,pdf,pdfviewer
+published: True
+position: 0
+---
+
+# Blazor PdfViewer Overview
+
+The Pdf Viewer for Blazor allows users to open PDF files directly in the browser. The component provides all major features, such as paging, zooming and printing. In addition, users can upload and display a PDF file from their local device, or download the currently open file.
+
+
+## Creating Blazor PdfViewer
+
+To use a Telerik PDF Viewer for Blazor:
+
+1. Add the `TelerikPdfViewer` tag.
+1. Set its `FileData` parameter to a byte array that will hold the PDF file contents.
+1. Define the component reference via the `@ref` directive. You will need it to call the `LoadFile` method to actually display the PDF file in the component.
+1. (optional) Subscribe to the PDF Viewer's `OnOpen` event, if users will be opening files from their local devices. The event argument is a `PdfViewerOpenEventArgs` object with a `Files` property. Use `Files` in the same way as with the [`OnSelect` event of the FileSelect component]({%slug fileselect-events%}#onselect).
+1. (optional) Set `Width` and `Height` in any [supported CSS unit]({%slug common-features/dimensions%}).
+
+>caption Basic Blazor PDF Viewer
+
+````CSHTML
+
+
+
+@code {
+ private TelerikPdfViewer PdfViewerRef { get; set; }
+
+ private byte[] PdfSource { get; set; }
+
+ private async Task OnPdfOpen(PdfViewerOpenEventArgs args)
+ {
+ var file = args.Files.FirstOrDefault();
+ var buffer = new byte[file.Stream.Length];
+ await file.Stream.ReadAsync(buffer);
+
+ PdfSource = buffer;
+ PdfViewerRef.LoadFile(PdfSource);
+ }
+
+ // automatically display the sample PDF
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ if (firstRender)
+ {
+ await Task.Delay(100);
+ PdfSource = Convert.FromBase64String(SamplePdf);
+ PdfViewerRef.LoadFile(PdfSource);
+ }
+
+ await base.OnAfterRenderAsync(firstRender);
+ }
+
+ private string SamplePdf { get; set; } = @"JVBERi0xLjENCiXCpcKxw6sNCg0KMSAwIG9iag0KICA8PCAvVHlwZSAvQ2F0YWxvZw0KICAgICAvUGFnZXMgMiAwIFINCiAgPj4NCmVuZG9iag0KDQoyIDAgb2JqDQogIDw8IC9UeXBlIC9QYWdlcw0KICAgICAvS2lkcyBbMyAwIFJdDQogICAgIC9Db3VudCAxDQogICAgIC9NZWRpYUJveCBbMCAwIDMwMCAxNDRdDQogID4+DQplbmRvYmoNCg0KMyAwIG9iag0KICA8PCAgL1R5cGUgL1BhZ2UNCiAgICAgIC9QYXJlbnQgMiAwIFINCiAgICAgIC9SZXNvdXJjZXMNCiAgICAgICA8PCAvRm9udA0KICAgICAgICAgICA8PCAvRjENCiAgICAgICAgICAgICAgIDw8IC9UeXBlIC9Gb250DQogICAgICAgICAgICAgICAgICAvU3VidHlwZSAvVHlwZTENCiAgICAgICAgICAgICAgICAgIC9CYXNlRm9udCAvVGltZXMtUm9tYW4NCiAgICAgICAgICAgICAgID4+DQogICAgICAgICAgID4+DQogICAgICAgPj4NCiAgICAgIC9Db250ZW50cyA0IDAgUg0KICA+Pg0KZW5kb2JqDQoNCjQgMCBvYmoNCiAgPDwgL0xlbmd0aCA1OSA+Pg0Kc3RyZWFtDQogIEJUDQogICAgL0YxIDE4IFRmDQogICAgMCAwIFRkDQogICAgKFRlbGVyaWsgUGRmVmlld2VyIGZvciBCbGF6b3IpIFRqDQogIEVUDQplbmRzdHJlYW0NCmVuZG9iag0KDQp4cmVmDQowIDUNCjAwMDAwMDAwMDAgNjU1MzUgZg0KMDAwMDAwMDAyMSAwMDAwMCBuDQowMDAwMDAwMDg2IDAwMDAwIG4NCjAwMDAwMDAxOTUgMDAwMDAgbg0KMDAwMDAwMDQ5MCAwMDAwMCBuDQp0cmFpbGVyDQogIDw8ICAvUm9vdCAxIDAgUg0KICAgICAgL1NpemUgNQ0KICA+Pg0Kc3RhcnR4cmVmDQo2MDkNCiUlRU9GDQo=";
+}
+````
+
+## PdfViewer Parameters
+
+The table below lists the PDF Viewer parameters. Also check the [PDF Viewer API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikPdfViewer) for all parameters, methods and events.
+
+@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
+
+| Parameter | Type and Default Value | Description |
+| --- | --- | --- |
+| `Class` | `string` | An additional CSS class for the `
` element. Use it to [customize the component styles and override the theme]({%slug themes-override%}). |
+| `FileData` | `byte[]` | The source of the currently displayed PDF file. |
+| `Height` | `string` | The PdfViewer height as a [CSS length value]({%slug common-features/dimensions%}). If not set, the component will expand vertically, according to its content. |
+| `Page` | `int` (`1`) | The current page of the visible PDF document. |
+| `Width` | `string` | The PdfViewer width as a [CSS length value]({%slug common-features/dimensions%}). If not set, the component will expand horizontally to fill its parent. |
+
+
+## PdfViewer Reference and Methods
+
+The PdfViewer exposes methods for programmatic operation. To use them, define a reference to the component instance with the `@ref` attribute (see the [basic example above](#creating-blazor-pdfviewer)). The PdfViewer methods are:
+
+* `LoadFile` - renders the document that is passed as a `byte[]` argument.
+* `Refresh` - ???
+
+
+## Next Steps
+
+* [Handle PDF Viewer events]({%slug pdfviewer-events%})
+
+
+## See Also
+
+* [PdfViewer Live Demo](https://demos.telerik.com/blazor-ui/pdfviewer/overview)
+* [PdfViewer API](/blazor-ui/api/Telerik.Blazor.Components.TelerikPdfViewer)
From 3d7e4b47d40f46c68f4da572e5c8bf750492821e Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Mon, 15 Aug 2022 17:15:10 +0300
Subject: [PATCH 02/31] docs(pdfviewer): Add Toolbar page
---
components/pdfviewer/events.md | 8 +++++++-
components/pdfviewer/overview.md | 13 +++++++++++++
components/pdfviewer/toolbar.md | 32 ++++++++++++++++++++++++++++++++
3 files changed, 52 insertions(+), 1 deletion(-)
create mode 100644 components/pdfviewer/toolbar.md
diff --git a/components/pdfviewer/events.md b/components/pdfviewer/events.md
index b49a1a98ac..d08cac4015 100644
--- a/components/pdfviewer/events.md
+++ b/components/pdfviewer/events.md
@@ -5,7 +5,7 @@ description: Events of the PDF Viewer for Blazor.
slug: pdfviewer-events
tags: telerik,blazor,pdf,pdfviewer
published: True
-position: 5
+position: 50
---
# PdfViewer Events
@@ -78,6 +78,12 @@ The event handler receives an argument of type [`PdfViewerOpenEventArgs`](/blazo
````
+## Next Steps
+
+* [Customize the PDF Viewer toolbar]({%slug pdfviewer-toolbar%})
+* [Handle PDF Viewer events]({%slug pdfviewer-events%})
+
+
## See Also
* [PdfViewer Live Demo](https://demos.telerik.com/blazor-ui/pdfviewer/overview)
diff --git a/components/pdfviewer/overview.md b/components/pdfviewer/overview.md
index f631e2594b..5c6c4fbab4 100644
--- a/components/pdfviewer/overview.md
+++ b/components/pdfviewer/overview.md
@@ -64,6 +64,18 @@ To use a Telerik PDF Viewer for Blazor:
}
````
+
+## Toolbar
+
+The [PdfViewer toolbar can render built-in and custom tools]({%slug pdfviewer-toolbar%}). By default, it displays the following tools:
+
+* a pager
+* zoom buttons and a dropdown
+* search button
+* open and download buttons
+* print button
+
+
## PdfViewer Parameters
The table below lists the PDF Viewer parameters. Also check the [PDF Viewer API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikPdfViewer) for all parameters, methods and events.
@@ -89,6 +101,7 @@ The PdfViewer exposes methods for programmatic operation. To use them, define a
## Next Steps
+* [Customize the PDF Viewer toolbar]({%slug pdfviewer-toolbar%})
* [Handle PDF Viewer events]({%slug pdfviewer-events%})
diff --git a/components/pdfviewer/toolbar.md b/components/pdfviewer/toolbar.md
new file mode 100644
index 0000000000..a9c7fd0c09
--- /dev/null
+++ b/components/pdfviewer/toolbar.md
@@ -0,0 +1,32 @@
+---
+title: Toolbar
+page_title: Toolbar | PdfViewer for Blazor
+description: Toolbar of the PDF Viewer for Blazor.
+slug: pdfviewer-toolbar
+tags: telerik,blazor,pdf,pdfviewer
+published: True
+position: 5
+---
+
+# PdfViewer Toolbar
+
+The PDF Viewer toolbar can render built-in and custom tools. By default, it displays the following tools:
+
+* a pager
+* zoom buttons and a dropdown
+* search button
+* open and download buttons
+* print button
+
+
+>caption Customize the Blazor PDF Viewer Toolbar
+
+````CSHTML
+
+````
+
+
+## See Also
+
+* [PdfViewer Live Demo](https://demos.telerik.com/blazor-ui/pdfviewer/overview)
+* [PdfViewer API](/blazor-ui/api/Telerik.Blazor.Components.TelerikPdfViewer)
From 0995ea320921b684fc43a1414b6522e234ab2003 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Thu, 25 Aug 2022 11:07:41 +0300
Subject: [PATCH 03/31] chore(pdfviewer): Rename API members
---
components/pdfviewer/events.md | 3 +--
components/pdfviewer/overview.md | 11 ++++-------
2 files changed, 5 insertions(+), 9 deletions(-)
diff --git a/components/pdfviewer/events.md b/components/pdfviewer/events.md
index d08cac4015..bed15ac760 100644
--- a/components/pdfviewer/events.md
+++ b/components/pdfviewer/events.md
@@ -38,7 +38,7 @@ The event handler receives an argument of type [`PdfViewerOpenEventArgs`](/blazo
Opened file @PdfName with size @PdfSize.ToString() bytes.