From 769d5dd8bdd2eaf299744bf0b1fca206b232394f Mon Sep 17 00:00:00 2001 From: SaravanaPriya31 Date: Thu, 13 Jun 2024 12:34:38 +0530 Subject: [PATCH 1/5] 891180: commit --- .../how-to/toolbar-customization.md | 326 ---------- .../how-to/toolbar-icon-customization.md | 181 ------ .../pdfviewer/EJ2_ASP.MVC/toolbar.md | 495 +++++++++++++- .../how-to/toolbar-customization.md | 435 ------------- .../how-to/toolbar-icon-customization.md | 188 ------ .../pdfviewer/EJ2_ASP.NETCORE/toolbar.md | 610 +++++++++++++++++- ej2-asp-core-toc.html | 2 - ej2-asp-mvc-toc.html | 2 - 8 files changed, 1096 insertions(+), 1143 deletions(-) delete mode 100644 ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/how-to/toolbar-customization.md delete mode 100644 ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/how-to/toolbar-icon-customization.md delete mode 100644 ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/how-to/toolbar-customization.md delete mode 100644 ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/how-to/toolbar-icon-customization.md diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/how-to/toolbar-customization.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/how-to/toolbar-customization.md deleted file mode 100644 index e8e702cded..0000000000 --- a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/how-to/toolbar-customization.md +++ /dev/null @@ -1,326 +0,0 @@ ---- -layout: post -title: Toolbar_customization in EJ2 ASP.NET MVC PDF Viewer | Syncfusion -description: Learn here all about Toolbar_customization in ASP.NET MVC PDF Viewer component of Syncfusion Essential JS 2 and more. -platform: ej2-asp-core-mvc -control: Toolbar_customization -publishingplatform: ej2-asp-core-mvc -documentation: ug ---- - - -# Customize the toolbar - -The PDF Viewer provides API for user interactions options provided in it's built-in toolbar. Using this we can create our own User Interface for toolbar actions in application level by hiding the default toolbar. The following steps are used to create the custom toolbar for PDF Viewer, - -**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/aspnetmvc/documentation/pdfviewer/getting-started/) to create simple PDF Viewer sample. - -**Step 2:** Add EJ2 Toolbar for perform primary actions like Open, Previous page, Next page, Go to page,Print and Download using the following code snippet, - -```html -@using Syncfusion.EJ2.Navigations; - -@Html.EJS().Toolbar("topToolbar").Height("56px").Items(new List { -new ToolbarItem { Type = ItemType.Button, PrefixIcon = "e-pv-open-document-icon",TooltipText = "Open",Align=ItemAlign.Left,Click="openFile"}, -new ToolbarItem { Type = ItemType.Button, PrefixIcon = "e-pv-previous-page-navigation-icon",TooltipText = "Previous Page",Align=ItemAlign.Center,Click="previousClicked",Id="previousPage"}, -new ToolbarItem { Type = ItemType.Button, PrefixIcon = "e-pv-next-page-navigation-icon", TooltipText = "Next Page",Align=ItemAlign.Center,Click="nextClicked",Id="nextPage"}, -new ToolbarItem {Template="
" ,PrefixIcon = "e-pv-next-page-navigation-icon", TooltipText = "Page Number",Align=ItemAlign.Center}, -new ToolbarItem { Type = ItemType.Input, Template="
of 0
" , PrefixIcon = "e-pv-next-page-navigation-icon", TooltipText = "Page Number",Click="currentPageClicked",Align=ItemAlign.Center}, -new ToolbarItem { Type = ItemType.Button, PrefixIcon = "e-pv-print-document-icon" ,TooltipText = "Print",Align=ItemAlign.Right,Click="printClicked"}, -new ToolbarItem { Type = ItemType.Button, PrefixIcon = "e-pv-download-document-icon" ,TooltipText = "Download",Align=ItemAlign.Right,Click="downloadClicked"}, -}).Render() - -``` - -**Step 3:** Hide the default toolbar of PDF Viewer using below code snippet, - -{% tabs %} -{% highlight html tabtitle="Standalone" %} - -```html -@Html.EJS().PdfViewer("pdfviewer") -.EnableToolbar(false).EnableThumbnail(false) -.DocumentLoad("documentLoaded").PageChange("pageChanged") -.DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -``` -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - -```html -@Html.EJS().PdfViewer("pdfviewer") -.ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")) -.EnableToolbar(false).EnableThumbnail(false) -.DocumentLoad("documentLoaded").PageChange("pageChanged") -.DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -``` -{% endhighlight %} -{% endtabs %} - -**Step 4:** Add EJ2 Toolbar for perform magnification actions in PDF Viewer using following code snippet, - -```html - -@Html.EJS().Toolbar("magnificationToolbar").Items(new List { -new ToolbarItem { Type = ItemType.Button, PrefixIcon = "e-pv-fit-page", TooltipText = "Fit to page",Click="pageFitClicked"}, -new ToolbarItem { Type = ItemType.Button, PrefixIcon = "e-pv-zoom-in-icon",TooltipText = "Zoom in",Click="zoomInClicked" }, -new ToolbarItem { Type = ItemType.Button, PrefixIcon = "e-pv-zoom-out-icon", TooltipText = "Zoom out",Click="zoomOutClicked"}, -}).Render() - -``` - -**Step 5:** Add the following style to achieve the custom toolbar styling, - -```html - -``` - -N>The icons are embedded in the font file used in above code snippet. - -**Step 6:** Add the following scripts for performing user interaction in PDF Viewer in code behind - -```html - - -``` - -Sample : -[https://ej2.syncfusion.com/aspnetcore/PdfViewer/Default#/material](https://ej2.syncfusion.com/aspnetcore/PdfViewer/Default#/material) diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/how-to/toolbar-icon-customization.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/how-to/toolbar-icon-customization.md deleted file mode 100644 index 7641f80778..0000000000 --- a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/how-to/toolbar-icon-customization.md +++ /dev/null @@ -1,181 +0,0 @@ ---- -layout: post -title: Toolbar customization in EJ2 ASP.NET MVC PDF Viewer | Syncfusion -description: Learn here all about Toolbar customization in ASP.NET MVC PDF Viewer component of Syncfusion Essential JS 2 and more. -platform: ej2-asp-core-mvc -control: PDF Viewer -publishingplatform: ##Platform_Name## -documentation: ug ---- - -# Customize toolbar in PDF Viewer component - -## How to customize existing toolbar in PDF Viewer component - -PDF Viewer allows you to customize(add, show, hide, enable, and disable) existing items in a toolbar. - -* Add - New items can defined by **CustomToolbarItemModel** and with existing items in [**ToolbarSettings**](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html) property. Newly added item click action can be defined in `toolbarclick`. - -* Show, Hide - Existing items can be shown or hidden using the [`ToolbarSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html) property. Pre-defined toolbar items are available with [`ToolbarItem`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html#Syncfusion_EJ2_PdfViewer_PdfViewerToolbarSettings_ToolbarItems) . - -* Enable, Disable - Toolbar items can be enabled or disable using `enabletoolbaritem`. - -{% tabs %} -{% highlight html tabtitle="Standalone" %} - -
-
-

- @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").ResourceUrl("https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2-pdfviewer-lib").ToolbarClick("toolbarClick").Render() -
-
- - - -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - -
-
-

- @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).ToolbarClick("toolbarClick").Render() -
-
- - -{% endhighlight %} -{% endtabs %} - -N> Default value of toolbar items is ['OpenOption', 'PageNavigationTool','MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'DownloadOption','UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm'] - -### Align Property - -The align property is used to specify the alignment of a toolbar item within the toolbar. - -`Left`: Aligns the item to the left side of the toolbar. -`Right`: Aligns the item to the right side of the toolbar. - -### Tooltip Property - -The tooltip property is used to set the tooltip text for a toolbar item. Tooltip provides additional information when a user hovers over the item. - -### CssClass Property - -The cssClass property is used to apply custom CSS classes to a toolbar item. It allows custom styling of the toolbar item. - -### Prefix Property - -The prefix property is used to set the CSS class or icon that should be added as a prefix to the existing content of the toolbar item. - -### ID Property - -The id property within a CustomToolbarItemModel is a compulsory attribute that plays a vital role in toolbar customization. It serves as a unique identifier for each toolbar item, facilitating distinct references and interactions. - -When defining or customizing toolbar items, it is mandatory to assign a specific and descriptive id to each item. -These properties are commonly used when defining custom toolbar items with the `CustomToolbarItemModel`` in the context of Syncfusion PDF Viewer. When configuring the toolbar using the `ToolbarSettings`` property, you can include these properties to customize the appearance and behavior of each toolbar item. - -N> When customizing toolbar items, you have the flexibility to include either icons or text based on your design preference. - -[View sample in GitHub](https://github.com/SyncfusionExamples/mvc-pdf-viewer-examples/tree/master/How%20to/Customize%20existing%20toolbar) \ No newline at end of file diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/toolbar.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/toolbar.md index 4feed08b35..00a0c3270d 100644 --- a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/toolbar.md +++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/toolbar.md @@ -1,6 +1,6 @@ --- layout: post -title: Toolbar in ##Platform_Name## Pdfviewer Component +title: Toolbar in ##Platform_Name## Pdfviewer Component| Syncfusion description: Learn here all about Toolbar in Syncfusion ##Platform_Name## Pdfviewer component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Toolbar @@ -8,8 +8,7 @@ publishingplatform: ##Platform_Name## documentation: ug --- - -# Built-in toolbar +# Built-in toolbar in ASP.NET MVC PDFViewer Control The PDF Viewer comes with a powerful built-in toolbar to execute important actions such as page navigation,text search,view mode,download print,bookmark and thumbnails. @@ -28,7 +27,7 @@ The following table shows built-in toolbar items and its actions:- | UndoRedoTool | This tool provides options to undo and redo the annotation actions performed in the PDF Viewer.| | AnnotationEditTool | This tool provides options to enable or disable the edit mode of annotation in the PDF Viewer.| -## Show/Hide the default toolbar +### Show/Hide the default toolbar The PDF Viewer has an option to show or hide the complete default toolbar. You can achieve this by using the following two ways., @@ -63,7 +62,7 @@ The PDF Viewer has an option to show or hide the complete default toolbar. You c ``` -## Show/Hide the default toolbaritem +### Show/Hide the default toolbaritem The PDF Viewer has an option to show or hide these grouped items in the default toolbar. @@ -105,6 +104,492 @@ The PDF Viewer has an option to show or hide these grouped items in the default {% endhighlight %} {% endtabs %} +## Customize Built-In Toolbar + +PDF Viewer allows you to customize(add, show, hide, enable, and disable) existing items in a toolbar. + +* Add - New items can defined by **CustomToolbarItemModel** and with existing items in [**ToolbarSettings**](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html) property. Newly added item click action can be defined in `toolbarclick`. + +* Show, Hide - Existing items can be shown or hidden using the [`ToolbarSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html) property. Pre-defined toolbar items are available with [`ToolbarItem`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html#Syncfusion_EJ2_PdfViewer_PdfViewerToolbarSettings_ToolbarItems) . + +* Enable, Disable - Toolbar items can be enabled or disable using `enabletoolbaritem`. + +{% tabs %} +{% highlight html tabtitle="Standalone" %} + +
+
+

+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").ResourceUrl("https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2-pdfviewer-lib").ToolbarClick("toolbarClick").Render() +
+
+ + + +{% endhighlight %} +{% highlight html tabtitle="Server-Backed" %} + +
+
+

+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).ToolbarClick("toolbarClick").Render() +
+
+ + +{% endhighlight %} +{% endtabs %} + +N> Default value of toolbar items is ['OpenOption', 'PageNavigationTool','MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'DownloadOption','UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm'] + +### Align Property + +The align property is used to specify the alignment of a toolbar item within the toolbar. + +`Left`: Aligns the item to the left side of the toolbar. +`Right`: Aligns the item to the right side of the toolbar. + +### Tooltip Property + +The tooltip property is used to set the tooltip text for a toolbar item. Tooltip provides additional information when a user hovers over the item. + +### CssClass Property + +The cssClass property is used to apply custom CSS classes to a toolbar item. It allows custom styling of the toolbar item. + +### Prefix Property + +The prefix property is used to set the CSS class or icon that should be added as a prefix to the existing content of the toolbar item. + +### ID Property + +The id property within a CustomToolbarItemModel is a compulsory attribute that plays a vital role in toolbar customization. It serves as a unique identifier for each toolbar item, facilitating distinct references and interactions. + +When defining or customizing toolbar items, it is mandatory to assign a specific and descriptive id to each item. +These properties are commonly used when defining custom toolbar items with the `CustomToolbarItemModel`` in the context of Syncfusion PDF Viewer. When configuring the toolbar using the `ToolbarSettings`` property, you can include these properties to customize the appearance and behavior of each toolbar item. + +N> When customizing toolbar items, you have the flexibility to include either icons or text based on your design preference. + +[View sample in GitHub](https://github.com/SyncfusionExamples/mvc-pdf-viewer-examples/tree/master/How%20to/Customize%20existing%20toolbar) + +## Custom Toolbar + +The PDF Viewer provides API for user interactions options provided in it's built-in toolbar. Using this we can create our own User Interface for toolbar actions in application level by hiding the default toolbar. The following steps are used to create the custom toolbar for PDF Viewer, + +**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/aspnetmvc/documentation/pdfviewer/getting-started/) to create simple PDF Viewer sample. + +**Step 2:** Add EJ2 Toolbar for perform primary actions like Open, Previous page, Next page, Go to page,Print and Download using the following code snippet, + +```html +@using Syncfusion.EJ2.Navigations; + +@Html.EJS().Toolbar("topToolbar").Height("56px").Items(new List { +new ToolbarItem { Type = ItemType.Button, PrefixIcon = "e-pv-open-document-icon",TooltipText = "Open",Align=ItemAlign.Left,Click="openFile"}, +new ToolbarItem { Type = ItemType.Button, PrefixIcon = "e-pv-previous-page-navigation-icon",TooltipText = "Previous Page",Align=ItemAlign.Center,Click="previousClicked",Id="previousPage"}, +new ToolbarItem { Type = ItemType.Button, PrefixIcon = "e-pv-next-page-navigation-icon", TooltipText = "Next Page",Align=ItemAlign.Center,Click="nextClicked",Id="nextPage"}, +new ToolbarItem {Template="
" ,PrefixIcon = "e-pv-next-page-navigation-icon", TooltipText = "Page Number",Align=ItemAlign.Center}, +new ToolbarItem { Type = ItemType.Input, Template="
of 0
" , PrefixIcon = "e-pv-next-page-navigation-icon", TooltipText = "Page Number",Click="currentPageClicked",Align=ItemAlign.Center}, +new ToolbarItem { Type = ItemType.Button, PrefixIcon = "e-pv-print-document-icon" ,TooltipText = "Print",Align=ItemAlign.Right,Click="printClicked"}, +new ToolbarItem { Type = ItemType.Button, PrefixIcon = "e-pv-download-document-icon" ,TooltipText = "Download",Align=ItemAlign.Right,Click="downloadClicked"}, +}).Render() + +``` + +**Step 3:** Hide the default toolbar of PDF Viewer using below code snippet, + +{% tabs %} +{% highlight html tabtitle="Standalone" %} + +```html +@Html.EJS().PdfViewer("pdfviewer") +.EnableToolbar(false).EnableThumbnail(false) +.DocumentLoad("documentLoaded").PageChange("pageChanged") +.DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() +``` +{% endhighlight %} +{% highlight html tabtitle="Server-Backed" %} + +```html +@Html.EJS().PdfViewer("pdfviewer") +.ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")) +.EnableToolbar(false).EnableThumbnail(false) +.DocumentLoad("documentLoaded").PageChange("pageChanged") +.DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() +``` +{% endhighlight %} +{% endtabs %} + +**Step 4:** Add EJ2 Toolbar for perform magnification actions in PDF Viewer using following code snippet, + +```html + +@Html.EJS().Toolbar("magnificationToolbar").Items(new List { +new ToolbarItem { Type = ItemType.Button, PrefixIcon = "e-pv-fit-page", TooltipText = "Fit to page",Click="pageFitClicked"}, +new ToolbarItem { Type = ItemType.Button, PrefixIcon = "e-pv-zoom-in-icon",TooltipText = "Zoom in",Click="zoomInClicked" }, +new ToolbarItem { Type = ItemType.Button, PrefixIcon = "e-pv-zoom-out-icon", TooltipText = "Zoom out",Click="zoomOutClicked"}, +}).Render() + +``` + +**Step 5:** Add the following style to achieve the custom toolbar styling, + +```html + +``` + +N>The icons are embedded in the font file used in above code snippet. + +**Step 6:** Add the following scripts for performing user interaction in PDF Viewer in code behind + +```html + + +``` + +Sample : +[https://ej2.syncfusion.com/aspnetcore/PdfViewer/Default#/material](https://ej2.syncfusion.com/aspnetcore/PdfViewer/Default#/material) + ## See also * [Toolbar customization](./how-to/toolbar_customization) diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/how-to/toolbar-customization.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/how-to/toolbar-customization.md deleted file mode 100644 index 3894194fa4..0000000000 --- a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/how-to/toolbar-customization.md +++ /dev/null @@ -1,435 +0,0 @@ ---- -layout: post -title: Toolbar_customization in ##Platform_Name## Pdfviewer Control | Syncfusion -description: Learn here all about Toolbar_customization in Syncfusion ##Platform_Name## Pdfviewer component of Syncfusion Essential JS 2 and more. -platform: ej2-asp-core-mvc -control: Toolbar_customization -publishingplatform: ##Platform_Name## -documentation: ug ---- - -# Customize the toolbar - -The PDF Viewer provides API for user interactions options provided in its built-in toolbar. Using this, you can create your own User Interface for toolbar actions in application level by hiding the default toolbar. The following steps are used to create the custom toolbar for PDF Viewer:- - -**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/aspnetcore/documentation/pdfviewer/getting-started) to create simple PDF Viewer sample. - -**Step 2:** Add EJ2 toolbar for performing primary actions like Open,Previous page,Next page,Go to page,Print and Download using the following code snippet., - -```html -@{ - var template = "
of 0
"; - var inputtemplate = "
"; -} - - - - - - - - - - - - - - - -``` - -**Step 3:** Add EJ2 toolbar for performing magnification actions in PDF Viewer using the following code snippet., - -```html -
- - - - - - - -
- -``` - -**Step 4:** Add the following style to achieve the custom toolbar styling., - -```html - -``` - -N>The icons are embedded in the font file used in the previous code snippet. - -**Step 5:** Add the following scripts for performing user interaction in PDF Viewer in code behind. - -{% tabs %} -{% highlight js tabtitle="Standalone" %} - - - -{% endhighlight %} -{% highlight js tabtitle="Server-Backed" %} - - - -{% endhighlight %} -{% endtabs %} - -Sample: -[https://ej2.syncfusion.com/aspnetcore/PdfViewer/CustomToolbar#/material](https://ej2.syncfusion.com/aspnetcore/PdfViewer/CustomToolbar#/material) \ No newline at end of file diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/how-to/toolbar-icon-customization.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/how-to/toolbar-icon-customization.md deleted file mode 100644 index 32390bfb7f..0000000000 --- a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/how-to/toolbar-icon-customization.md +++ /dev/null @@ -1,188 +0,0 @@ ---- -layout: post -title: Toolbar customization in ##Platform_Name## Pdfviewer Control | Syncfusion -description: Learn here all about Toolbar customization in Syncfusion ##Platform_Name## Pdfviewer component of Syncfusion Essential JS 2 and more. -platform: ej2-asp-core-mvc -control: PDF Viewer -publishingplatform: ##Platform_Name## -documentation: ug ---- - -# Customize toolbar in PDF Viewer component - -## How to customize existing toolbar in PDF Viewer component - -PDF Viewer allows you to customize(add, show, hide, enable, and disable) existing items in a toolbar. - -* Add - New items can defined by **CustomToolbarItemModel** and with existing items in [**ToolbarSettings**](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html) property. Newly added item click action can be defined in `toolbarclick`. - -* Show, Hide - Existing items can be shown or hidden using the [`ToolbarSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html) property. Pre-defined toolbar items are available with [`ToolbarItem`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html#Syncfusion_EJ2_PdfViewer_PdfViewerToolbarSettings_ToolbarItems). - -* Enable, Disable - Toolbar items can be enabled or disable using `enabletoolbaritem`. - -{% tabs %} -{% highlight html tabtitle="Standalone" %} - -
- - -
- - - -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - -
- - -
- - - -{% endhighlight %} -{% endtabs %} - -N> Default value of toolbar items is ['OpenOption', 'PageNavigationTool','MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'DownloadOption','UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm'] - -### Align Property - -The align property is used to specify the alignment of a toolbar item within the toolbar. - -`Left`: Aligns the item to the left side of the toolbar. -`Right`: Aligns the item to the right side of the toolbar. - -### Tooltip Property - -The tooltip property is used to set the tooltip text for a toolbar item. Tooltip provides additional information when a user hovers over the item. - -### CssClass Property - -The cssClass property is used to apply custom CSS classes to a toolbar item. It allows custom styling of the toolbar item. - -### Prefix Property - -The prefix property is used to set the CSS class or icon that should be added as a prefix to the existing content of the toolbar item. - -### ID Property - -The id property within a CustomToolbarItemModel is a compulsory attribute that plays a vital role in toolbar customization. It serves as a unique identifier for each toolbar item, facilitating distinct references and interactions. - -When defining or customizing toolbar items, it is mandatory to assign a specific and descriptive id to each item. -These properties are commonly used when defining custom toolbar items with the `CustomToolbarItemModel`` in the context of Syncfusion PDF Viewer. When configuring the toolbar using the `ToolbarSettings`` property, you can include these properties to customize the appearance and behavior of each toolbar item. - -N> When customizing toolbar items, you have the flexibility to include either icons or text based on your design preference. - -[View sample in GitHub](https://github.com/SyncfusionExamples/asp-core-pdf-viewer-examples/tree/master/How%20to/Customize%20existing%20toolbar) \ No newline at end of file diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/toolbar.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/toolbar.md index 9937a29089..c63f52813c 100644 --- a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/toolbar.md +++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/toolbar.md @@ -1,6 +1,6 @@ --- layout: post -title: Toolbar in ##Platform_Name## Pdfviewer Component +title: Toolbar in ##Platform_Name## Pdfviewer Component|Syncfusion description: Learn here all about Toolbar in Syncfusion ##Platform_Name## Pdfviewer component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Toolbar @@ -8,7 +8,6 @@ publishingplatform: ##Platform_Name## documentation: ug --- - # Built-in toolbar in ASP.NET Core PDF Viewer control The PDF Viewer comes with a powerful built-in toolbar to execute important actions such as page navigation, text search,view mode,download,print,bookmark, and thumbnails. @@ -28,7 +27,7 @@ The following table shows built-in toolbar items and its actions:- | UndoRedoTool | This tool provides options to undo and redo the annotation actions performed in the PDF Viewer.| | AnnotationEditTool | This tool provides options to enable or disable the edit mode of annotation in the PDF Viewer.| -## Show/Hide the default toolbar +### Show/Hide the default toolbar The PDF Viewer has an option to show or hide the complete default toolbar. You can achieve this by using following two ways., @@ -102,7 +101,7 @@ The PDF Viewer has an option to show or hide the complete default toolbar. You c {% endhighlight %} {% endtabs %} -## Show/Hide the default toolbaritem +### Show/Hide the default toolbaritem The PDF Viewer has an option to show or hide these grouped items in the default toolbar. @@ -178,6 +177,609 @@ The PDF Viewer has an option to show or hide these grouped items in the default {% endhighlight %} {% endtabs %} +## Customize Built-In Toolbar + +PDF Viewer allows you to customize(add, show, hide, enable, and disable) existing items in a toolbar. + +* Add - New items can defined by **CustomToolbarItemModel** and with existing items in [**ToolbarSettings**](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html) property. Newly added item click action can be defined in `toolbarclick`. + +* Show, Hide - Existing items can be shown or hidden using the [`ToolbarSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html) property. Pre-defined toolbar items are available with [`ToolbarItem`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html#Syncfusion_EJ2_PdfViewer_PdfViewerToolbarSettings_ToolbarItems). + +* Enable, Disable - Toolbar items can be enabled or disable using `enabletoolbaritem`. + +{% tabs %} +{% highlight html tabtitle="Standalone" %} + +
+ + +
+ + + +{% endhighlight %} +{% highlight html tabtitle="Server-Backed" %} + +
+ + +
+ + + +{% endhighlight %} +{% endtabs %} + +N> Default value of toolbar items is ['OpenOption', 'PageNavigationTool','MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'DownloadOption','UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm'] + +### Align Property + +The align property is used to specify the alignment of a toolbar item within the toolbar. + +`Left`: Aligns the item to the left side of the toolbar. +`Right`: Aligns the item to the right side of the toolbar. + +### Tooltip Property + +The tooltip property is used to set the tooltip text for a toolbar item. Tooltip provides additional information when a user hovers over the item. + +### CssClass Property + +The cssClass property is used to apply custom CSS classes to a toolbar item. It allows custom styling of the toolbar item. + +### Prefix Property + +The prefix property is used to set the CSS class or icon that should be added as a prefix to the existing content of the toolbar item. + +### ID Property + +The id property within a CustomToolbarItemModel is a compulsory attribute that plays a vital role in toolbar customization. It serves as a unique identifier for each toolbar item, facilitating distinct references and interactions. + +When defining or customizing toolbar items, it is mandatory to assign a specific and descriptive id to each item. +These properties are commonly used when defining custom toolbar items with the `CustomToolbarItemModel`` in the context of Syncfusion PDF Viewer. When configuring the toolbar using the `ToolbarSettings`` property, you can include these properties to customize the appearance and behavior of each toolbar item. + +N> When customizing toolbar items, you have the flexibility to include either icons or text based on your design preference. + +[View sample in GitHub](https://github.com/SyncfusionExamples/asp-core-pdf-viewer-examples/tree/master/How%20to/Customize%20existing%20toolbar) + +## Custom Toolbar + +The PDF Viewer provides API for user interactions options provided in its built-in toolbar. Using this, you can create your own User Interface for toolbar actions in application level by hiding the default toolbar. The following steps are used to create the custom toolbar for PDF Viewer:- + +**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/aspnetcore/documentation/pdfviewer/getting-started) to create simple PDF Viewer sample. + +**Step 2:** Add EJ2 toolbar for performing primary actions like Open,Previous page,Next page,Go to page,Print and Download using the following code snippet., + +```html +@{ + var template = "
of 0
"; + var inputtemplate = "
"; +} + + + + + + + + + + + + + + + +``` + +**Step 3:** Add EJ2 toolbar for performing magnification actions in PDF Viewer using the following code snippet., + +```html +
+ + + + + + + +
+ +``` + +**Step 4:** Add the following style to achieve the custom toolbar styling., + +```html + +``` + +N>The icons are embedded in the font file used in the previous code snippet. + +**Step 5:** Add the following scripts for performing user interaction in PDF Viewer in code behind. + +{% tabs %} +{% highlight js tabtitle="Standalone" %} + + + +{% endhighlight %} +{% highlight js tabtitle="Server-Backed" %} + + + +{% endhighlight %} +{% endtabs %} + +Sample: +[https://ej2.syncfusion.com/aspnetcore/PdfViewer/CustomToolbar#/material](https://ej2.syncfusion.com/aspnetcore/PdfViewer/CustomToolbar#/material) + ## See also * [Toolbar customization](./how-to/toolbar-customization) diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html index f2e78cd82d..789d7d7336 100644 --- a/ej2-asp-core-toc.html +++ b/ej2-asp-core-toc.html @@ -1835,7 +1835,6 @@
  • Server Actions
  • How To