You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
title: Add Save Button in Built-In Toolbar | Syncfusion
4
+
description: Learn here all about adding save button in built-in Toolbar in Syncfusion ##Platform_Name## Pdfviewer component of Syncfusion Essential JS 2 and more.
5
+
platform: ej2-asp-core-mvc
6
+
control: Add Save Button
7
+
publishingplatform: ##Platform_Name##
8
+
documentation: ug
9
+
---
10
+
11
+
12
+
# Add Save Button in Built-In Toolbar
13
+
14
+
PDF Viewer allows you to customize(add, show, hide, enable, and disable) existing items in a toolbar.
15
+
16
+
* Save button - New `save` button-item can be defined by **CustomToolbarItemModel** and with existing items in [**ToolbarSettings**](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html) property. `Save' button-item click action can be defined in `toolbarclick`.
17
+
18
+
* Show, Hide - `Save` button-item 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) .
19
+
20
+
* Enable, Disable - `save` button-item can be enabled or disable using `enabletoolbaritem`.
var pdfViewer =document.getElementById('pdfviewer').ej2_instances[0];
94
+
if (args.item&&args.item.id==='download') {
95
+
pdfViewer.download();
96
+
}
97
+
}
98
+
</script>
99
+
{% endhighlight %}
100
+
{% endtabs %}
101
+
102
+
N> Default value of toolbar items is ['OpenOption', 'PageNavigationTool','MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'DownloadOption','UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm']
103
+
104
+
### Align Property
105
+
106
+
The align property is used to specify the alignment of a toolbar item within the toolbar.
107
+
108
+
`Left`: Aligns the item to the left side of the toolbar.
109
+
`Right`: Aligns the item to the right side of the toolbar.
110
+
111
+
### Tooltip Property
112
+
113
+
The tooltip property is used to set the tooltip text for a `save` button-item. Tooltip provides additional information when a user hovers over the item.
114
+
115
+
### CssClass Property
116
+
117
+
The cssClass property is used to apply custom CSS classes to a `save` button-item. It allows custom styling of the `save` button-item.
118
+
119
+
### Prefix Property
120
+
121
+
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 `save`button-item.
122
+
123
+
### ID Property
124
+
125
+
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.
126
+
127
+
When defining or customizing toolbar items, it is mandatory to assign a specific and descriptive id to each item.
128
+
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.
129
+
130
+
N> When customizing toolbar items, you have the flexibility to include either icons or text based on your design preference.
131
+
132
+
[View sample in GitHub](https://github.com/SyncfusionExamples/mvc-pdf-viewer-examples/tree/master/How%20to)
0 commit comments