Skip to content

Commit 2157a41

Browse files
sathiyaseelanksf3503sathiyaseelanksf3503
committed
987016: Update CI issues
1 parent bbac55c commit 2157a41

File tree

6 files changed

+286
-770
lines changed

6 files changed

+286
-770
lines changed

‎Document-Processing-toc.html‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@
128128
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/save-pdf-file/to-azure-active-directory">To Azure Active Directory</a></li>
129129
</ul>
130130
</li>
131-
<li>Toolbar Customization
131+
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/toolbar">Toolbar Customization</a>
132132
<ul>
133133
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/toolbar-customization/primary-toolbar-customization">Primary Toolbar</a></li>
134134
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/toolbar-customization/annotation-toolbar-customization">Annotation Toolbar</a></li>
@@ -147,8 +147,6 @@
147147
</ul>
148148
</li>
149149
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/accessibility">Accessibility</a></li>
150-
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/toolbar">Toolbar</a></li>
151-
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/navigation">Navigation</a></li>
152150
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/magnification">Magnification</a></li>
153151
<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/text-search">Text Search</a></li>
154152
<li>Annotation

‎Document-Processing/PDF/PDF-Viewer/asp-net-core/event.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@ Example:
126126
<ejs-pdfviewer id="pdfviewer"
127127
style="height:600px"
128128
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
129-
ToolbarClick="ToolbarClicked">
129+
toolbarClick="ToolbarClicked">
130130
</ejs-pdfviewer>
131131
</div>
132132

@@ -144,7 +144,7 @@ Example:
144144
style="height:600px"
145145
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
146146
serviceUrl="/api/PdfViewer"
147-
ToolbarClick="ToolbarClicked">
147+
toolbarClick="ToolbarClicked">
148148
</ejs-pdfviewer>
149149
</div>
150150

‎Document-Processing/PDF/PDF-Viewer/asp-net-core/organize-pdf/toolbar-organize-page.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ The `canInsert` property controls the visibility of the insert tool. When set to
2323
<ejs-pdfviewer id="pdfviewer"
2424
style="height:600px"
2525
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
26-
pageOrganizerSettings="@(new {CanDelete= false, CanInsert= false, CanRotate= false, canCopy= false, canRearrange= false, canImport= false, imageZoom= 1, showImageZoomingSlider= true, imageZoomMin= 1, imageZoomMax= 5 })">
26+
pageOrganizerSettings="@(new { CanInsert= false })">
2727
</ejs-pdfviewer>
2828
</div>
2929

@@ -34,7 +34,7 @@ The `canInsert` property controls the visibility of the insert tool. When set to
3434
<ejs-pdfviewer id="pdfviewer"
3535
serviceUrl='/Index'
3636
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
37-
pageOrganizerSettings="@(new {CanDelete= false, CanInsert= false, CanRotate= false, canCopy= false, canRearrange= false, canImport= false, imageZoom= 1, showImageZoomingSlider= true, imageZoomMin= 1, imageZoomMax= 5 })">
37+
pageOrganizerSettings="@(new { CanInsert= false })">
3838
</ejs-pdfviewer>
3939
</div>
4040

@@ -52,7 +52,7 @@ The `canDelete` property controls the visibility of the delete tool. When set to
5252
<ejs-pdfviewer id="pdfviewer"
5353
style="height:600px"
5454
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
55-
pageOrganizerSettings="@(new {CanDelete= false, CanInsert= false, CanRotate= false, canCopy= false, canRearrange= false, canImport= false, imageZoom= 1, showImageZoomingSlider= true, imageZoomMin= 1, imageZoomMax= 5 })"">
55+
pageOrganizerSettings="@(new { CanDelete= false })">
5656
</ejs-pdfviewer>
5757
</div>
5858

@@ -63,7 +63,7 @@ The `canDelete` property controls the visibility of the delete tool. When set to
6363
<ejs-pdfviewer id="pdfviewer"
6464
serviceUrl='/Index'
6565
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
66-
pageOrganizerSettings="@(new {CanDelete= false, CanInsert= false, CanRotate= false, canCopy= false, canRearrange= false, canImport= false, imageZoom= 1, showImageZoomingSlider= true, imageZoomMin= 1, imageZoomMax= 5 })"">
66+
pageOrganizerSettings="@(new { CanDelete= false })">
6767
</ejs-pdfviewer>
6868
</div>
6969

@@ -81,7 +81,7 @@ The `canRotate` property controls the visibility of the rotate tool. When set to
8181
<ejs-pdfviewer id="pdfviewer"
8282
style="height:600px"
8383
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
84-
pageOrganizerSettings="@(new {CanDelete= false, CanInsert= false, CanRotate= false, canCopy= false, canRearrange= false, canImport= false, imageZoom= 1, showImageZoomingSlider= true, imageZoomMin= 1, imageZoomMax= 5 })">
84+
pageOrganizerSettings="@(new { CanRotate= false })">
8585
</ejs-pdfviewer>
8686
</div>
8787

@@ -92,7 +92,7 @@ The `canRotate` property controls the visibility of the rotate tool. When set to
9292
<ejs-pdfviewer id="pdfviewer"
9393
serviceUrl='/Index'
9494
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
95-
pageOrganizerSettings="@(new {CanDelete= false, CanInsert= false, CanRotate= false, canCopy= false, canRearrange= false, canImport= false, imageZoom= 1, showImageZoomingSlider= true, imageZoomMin= 1, imageZoomMax= 5 })">
95+
pageOrganizerSettings="@(new { CanRotate= false })">
9696
</ejs-pdfviewer>
9797
</div>
9898

‎Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/form-designer-toolbar-customization.md‎

Lines changed: 0 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -52,32 +52,6 @@ Use [`PdfViewerToolbarSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/S
5252

5353
The following example demonstrates how to customize the form designer toolbar by configuring specific tools using `FormDesignerToolbarItem`.
5454

55-
{% tabs %}
56-
{% highlight ts tabtitle="index.ts" %}
57-
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
58-
ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, FormDesignerToolbarItem} from '@syncfusion/ej2-pdfviewer';
59-
60-
PdfViewer.Inject( Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
61-
BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner );
62-
63-
let pdfviewer: PdfViewer = new PdfViewer({
64-
documentPath:'https://cdn.syncfusion.com/content/pdf/formdesigner.pdf',
65-
resourceUrl:"https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib"
66-
});
67-
pdfviewer.toolbarSettings = {
68-
formDesignerToolbarItems: [
69-
"TextboxTool",
70-
"PasswordTool",
71-
"CheckBoxTool",
72-
"RadioButtonTool",
73-
"DropdownTool",
74-
"ListboxTool",
75-
"DrawSignatureTool",
76-
"DeleteTool"
77-
]
78-
};
79-
pdfviewer.appendTo('#PdfViewer');
80-
8155
{% tabs %}
8256
{% highlight cshtml tabtitle="Standalone" %}
8357

‎Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/primary-toolbar-customization.md‎

Lines changed: 238 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ Show or hide the toolbar using the `enableToolbar` property:
4444

4545
The following code snippet explains how to show or hide the toolbar using the `showToolbar` method.
4646

47-
{{% tabs %}
47+
{% tabs %}
4848
{% highlight cshtml tabtitle="Standalone" %}
4949

5050
<div style="width:100%;height:600px">
@@ -83,3 +83,240 @@ The following code snippet explains how to show or hide the toolbar using the `s
8383

8484
{% endhighlight %}
8585
{% endtabs %}
86+
87+
## Show or hide toolbar items
88+
89+
The PDF Viewer has an option to show or hide these grouped items in the built-in toolbar.
90+
91+
* Show or hide toolbar items using toolbarSettings:
92+
93+
{% tabs %}
94+
{% highlight cshtml tabtitle="Standalone" %}
95+
96+
<div style="width:100%;height:600px">
97+
<ejs-pdfviewer id="pdfviewer"
98+
style="height:600px"
99+
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
100+
enableToolbar="true"
101+
toolbarSettings="@(new Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings { ShowTooltip = true, ToolbarItems = "OpenOption" })">
102+
</ejs-pdfviewer>
103+
</div>
104+
105+
{% endhighlight %}
106+
{% highlight cshtml tabtitle="Server-Backed" %}
107+
108+
<div style="width:100%;height:600px">
109+
<ejs-pdfviewer id="pdfviewer"
110+
style="height:600px"
111+
serviceUrl="/api/PdfViewer"
112+
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
113+
enableToolbar="true"
114+
toolbarSettings="@(new Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings { ShowTooltip = true, ToolbarItems = "OpenOption" })">
115+
</ejs-pdfviewer>
116+
</div>
117+
118+
{% endhighlight %}
119+
{% endtabs %}
120+
121+
* Show or hide toolbar items using showToolbarItem:
122+
123+
{% tabs %}
124+
{% highlight cshtml tabtitle="Standalone" %}
125+
126+
<div style="width:100%;height:600px">
127+
<ejs-pdfviewer id="pdfviewer"
128+
style="height:600px"
129+
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
130+
documentLoad="showToolbar">
131+
</ejs-pdfviewer>
132+
</div>
133+
134+
<script>
135+
function showToolbar() {
136+
var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
137+
pdfViewer.toolbar.showToolbarItem(new Array("DownloadOption"), true);
138+
}
139+
</script>
140+
141+
{% endhighlight %}
142+
{% highlight cshtml tabtitle="Server-Backed" %}
143+
144+
<div style="width:100%;height:600px">
145+
<ejs-pdfviewer id="pdfviewer"
146+
style="height:600px"
147+
serviceUrl="/api/PdfViewer"
148+
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
149+
documentLoad="showToolbar">
150+
</ejs-pdfviewer>
151+
</div>
152+
153+
<script>
154+
function showToolbar() {
155+
var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
156+
pdfViewer.toolbar.showToolbarItem(new Array("DownloadOption"), true);
157+
}
158+
</script>
159+
160+
{% endhighlight %}
161+
{% endtabs %}
162+
163+
## Customize the built-in toolbar
164+
165+
The PDF Viewer allows you to customize (add, show, hide, enable, and disable) existing items in the toolbar.
166+
167+
- Add: Define new items using **CustomToolbarItemModel** and include them with existing items via the [**ToolbarSettings**](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html) property. Handle clicks in the toolbarClick event.
168+
169+
- Show/Hide: Show or hide existing items using the [**ToolbarSettings**](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html) property. Predefined toolbar items are available via [`ToolbarItem`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html#Syncfusion_EJ2_PdfViewer_PdfViewerToolbarSettings_ToolbarItems).
170+
171+
- Enable/Disable: Toolbar items can be enabled or disabled using enableToolbarItem.
172+
173+
{% tabs %}
174+
{% highlight html tabtitle="Standalone" %}
175+
176+
@page "{handler?}"
177+
@model IndexModel
178+
@{
179+
ViewData["Title"] = "Home page";
180+
}
181+
182+
<div>
183+
<ejs-pdfviewer id="pdfviewer"
184+
style="width:1350px;height:100%"
185+
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
186+
resourceUrl='https://cdn.syncfusion.com/ej2/29.1.35/dist/ej2-pdfviewer-lib'
187+
toolbarClick="toolbarClick">
188+
</ejs-pdfviewer>
189+
</div>
190+
191+
<script type="text/javascript">
192+
window.onload = function () {
193+
var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
194+
var toolItem1 = {
195+
prefixIcon: 'e-icons e-paste',
196+
id: 'print',
197+
tooltipText: 'Custom toolbar item',
198+
align: 'left'
199+
};
200+
var toolItem2 = {
201+
id: 'download',
202+
text: 'Save',
203+
tooltipText: 'Custom toolbar item',
204+
align: 'right'
205+
};
206+
var LanguageList = ['Typescript', 'Javascript', 'Angular', 'C#', 'C', 'Python'];
207+
var toolItem3 = {
208+
type: 'Input',
209+
tooltipText: 'Language List',
210+
cssClass: 'percentage',
211+
align: 'Left',
212+
id: 'dropdown',
213+
template: new ej.dropdowns.ComboBox({ width: 100, value: 'TypeScript', dataSource: LanguageList, popupWidth: 85, showClearButton: false, readonly: false })
214+
};
215+
var toolItem4 = {
216+
type: 'Input',
217+
tooltipText: 'Text',
218+
align: 'Right',
219+
cssClass: 'find',
220+
id: 'textbox',
221+
template: new ej.inputs.TextBox({ width: 125, placeholder: 'Type Here', created: onCreate })
222+
};
223+
pdfViewer.toolbarSettings = {
224+
showTooltip: true,
225+
toolbarItems: [toolItem1, toolItem2, 'OpenOption', 'PageNavigationTool', 'MagnificationTool', toolItem3, 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'DownloadOption', 'UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', toolItem4, 'CommentTool', 'SubmitForm']
226+
};
227+
function onCreate() {
228+
this.addIcon('prepend', 'e-icons e-search');
229+
}
230+
}
231+
232+
// Define the toolbarClick event handler
233+
function toolbarClick(args) {
234+
var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
235+
236+
if (args.item && args.item.id === 'print') {
237+
pdfViewer.printModule.print();
238+
} else if (args.item && args.item.id === 'download') {
239+
pdfViewer.download();
240+
}
241+
}
242+
243+
</script>
244+
245+
{% endhighlight %}
246+
{% highlight html tabtitle="Server-Backed" %}
247+
248+
@page "{handler?}"
249+
@model IndexModel
250+
@using Syncfusion.EJ2.PdfViewer
251+
@using Newtonsoft.Json
252+
@{
253+
ViewData["Title"] = "Home page";
254+
CustomToolbarItems customToolbarItems = new CustomToolbarItems();
255+
var toolItem1 = new { id = "submit_form", text = "Submit Form", tooltipText = "Custom toolbar item", align = "Center", cssClass = "custom_button" };
256+
customToolbarItems.ToolbarItems = new List<object> { toolItem1, "OpenOption", "PageNavigationTool", "MagnificationTool", "PanTool", "SelectionTool", "SearchOption", "PrintOption", "DownloadOption", "UndoRedoTool", "AnnotationEditTool", "FormDesignerEditTool", "CommentTool" };
257+
PdfViewerToolbarSettings toolbarSettings = new PdfViewerToolbarSettings()
258+
{
259+
ShowTooltip = true,
260+
ToolbarItems = customToolbarItems.ToolbarItems
261+
};
262+
}
263+
264+
<div>
265+
<ejs-pdfviewer id="pdfviewer" style="height:600px"
266+
serviceUrl="/Index"
267+
documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
268+
toolbarClick="toolbarClick"
269+
ToolbarSettings="toolbarSettings">
270+
</ejs-pdfviewer>
271+
</div>
272+
273+
<script>
274+
function toolbarClick(args) {
275+
var viewer = document.getElementById('pdfviewer').ej2_instances[0];
276+
if (args.item && args.item.id === 'submit_form') {
277+
alert('Custom button clicked!');
278+
}
279+
}
280+
</script>
281+
282+
<style>
283+
.custom_button {
284+
height: 100% !important;
285+
}
286+
</style>
287+
288+
289+
{% endhighlight %}
290+
{% endtabs %}
291+
292+
N> Default toolbar items: ['OpenOption', 'PageNavigationTool','MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'DownloadOption','UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm']
293+
294+
### Align property
295+
296+
The Align property specifies the alignment of a toolbar item within the toolbar.
297+
298+
`Left`: Aligns the item to the left side of the toolbar.
299+
`Right`: Aligns the item to the right side of the toolbar.
300+
301+
### Tooltip property
302+
303+
The Tooltip property sets the tooltip text for a toolbar item. Tooltips provide additional information when a user hovers over the item.
304+
305+
### CssClass property
306+
307+
The CssClass property applies custom CSS classes to a toolbar item for custom styling.
308+
309+
### Prefix property
310+
311+
The Prefix property sets the CSS class or icon added as a prefix to the existing content of the toolbar item.
312+
313+
### ID property
314+
315+
The Id property of a CustomToolbarItemModel uniquely identifies a toolbar item and is required for customization.
316+
317+
When defining or customizing toolbar items, assign a specific and descriptive Id to each item.
318+
These properties are commonly used when defining custom toolbar items with the CustomToolbarItemModel in the context of the 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.
319+
320+
N> When customizing toolbar items, you have the flexibility to include either icons or text based on your design preference.
321+
322+
[View sample in GitHub](https://github.com/SyncfusionExamples/asp-core-pdf-viewer-examples/tree/master/How%20to/Customize%20existing%20toolbar)

0 commit comments

Comments
 (0)