Merge pull request #4 from SyncfusionExamples/856503-icon

SasidharanKaruppiah · web-flow · commit cd15693cdacb · 2024-01-12T11:35:40.000+05:30
856503 : Customize existing toolbar in PDF Viewer component sample update
diff --git a/How to/customize existing toolbar/src/app/app.ts b/How to/customize existing toolbar/src/app/app.ts
@@ -1,24 +1,49 @@
 import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner,Print,CustomToolbarItemModel} from '@syncfusion/ej2-pdfviewer';
-
+import { ComboBox } from "@syncfusion/ej2-dropdowns";
+import { TextBox } from "@syncfusion/ej2-inputs";
 PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner,Print);
-let toolItem: CustomToolbarItemModel = {
+let toolItem1: CustomToolbarItemModel = {
     prefixIcon: 'e-icons e-paste',
     id: 'print',
     tooltipText: 'Custom toolbar item',
-    align: 'left'
 };
+let toolItem2: CustomToolbarItemModel = {
+    id: 'download',
+    text: 'Save',
+    tooltipText: 'Custom toolbar item',
+    align: 'right'
+};
+let LanguageList: string[] = ['Typescript', 'Javascript', 'Angular', 'C#', 'C', 'Python'];
+let toolItem3: CustomToolbarItemModel = {
+    type: 'Input',
+    tooltipText: 'Language List',
+    cssClass: 'percentage',
+    align: 'Left',
+    id: 'dropdown',
+    template: new ComboBox({ width: 100, value: 'TypeScript', dataSource: LanguageList, popupWidth: 85, showClearButton: false, readonly: false })  
+};
+let toolItem4: CustomToolbarItemModel = {
+    type: 'Input',
+    tooltipText: 'Text',
+    align: 'Right',
+    cssClass: 'find',
+    id: 'textbox',
+    template: new TextBox({ width: 125, placeholder: 'Type Here', created: OnCreateSearch })
+}
 let pdfviewer: PdfViewer = new PdfViewer();
 pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
 pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
-pdfviewer.toolbarSettings = { toolbarItems: [toolItem, 'OpenOption', 'PageNavigationTool', 'MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'DownloadOption', 'UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm']}
-   
+pdfviewer.toolbarSettings = { toolbarItems: [toolItem1, toolItem2, 'OpenOption', 'PageNavigationTool', 'MagnificationTool', toolItem3, 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'DownloadOption', 'UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', toolItem4, 'CommentTool', 'SubmitForm']}
 pdfviewer.appendTo('#PdfViewer');
-    //To handle custom toolbar click event.
-    pdfviewer.toolbarClick = function (args) {
-        if (args.item && args.item.id === 'print') {
-            pdfviewer.print.print();
-        }
-        else if (args.item && args.item.id === 'download') {
-            pdfviewer.download();
-        }
-    };
+//To handle custom toolbar click event.
+pdfviewer.toolbarClick = function (args) {
+   if (args.item && args.item.id === 'print') {
+      pdfviewer.print.print();
+   }
+   else if (args.item && args.item.id === 'download') {
+      pdfviewer.download();
+   }
+};
+function OnCreateSearch(this: any): any {
+    this.addIcon('prepend', 'e-icons e-search');
+}
diff --git a/How to/customize existing toolbar/src/index.html b/How to/customize existing toolbar/src/index.html
@@ -13,6 +13,7 @@
 
 <body>
     <!--Element which will render as PDF Viewer -->
+    <br><br><br>
     <div id="PdfViewer"></div>
 </body>
 
