Skip to content

Commit 5fe93cd

Browse files
johnsonmonoharjohnsonmonohar
authored
Merge pull request #3170 from syncfusion-content/895039-saveButton
895039 save button
2 parents 46eab26 + 6afe53c commit 5fe93cd

File tree

2 files changed

+270
-0
lines changed

2 files changed

+270
-0
lines changed

‎ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/how-to/add-save-button.md

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
---
2+
layout: post
3+
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`.
21+
22+
{% tabs %}
23+
{% highlight html tabtitle="Standalone" %}
24+
25+
<div>
26+
<div style="height:500px;width:1350px;">
27+
<br /><br />
28+
@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()
29+
</div>
30+
</div>
31+
32+
<script type="text/javascript">
33+
window.onload = function () {
34+
var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
35+
var toolItem1 = {
36+
prefixIcon: 'e-icons e-save',
37+
id: 'download',
38+
text: 'Save',
39+
tooltipText: 'Save Button',
40+
align: 'left'
41+
};
42+
function onCreate() {
43+
this.addIcon('prepend', 'e-icons e-search');
44+
}
45+
pdfViewer.toolbarSettings = {
46+
showTooltip: true,
47+
toolbarItems: ['OpenOption', toolItem1'PageNavigationTool', 'MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm']
48+
};
49+
50+
};
51+
52+
// Define the toolbarClick event handler
53+
function toolbarClick(args) {
54+
var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
55+
if (args.item && args.item.id === 'download') {
56+
pdfViewer.download();
57+
}
58+
}
59+
</script>
60+
61+
{% endhighlight %}
62+
{% highlight html tabtitle="Server-Backed" %}
63+
64+
<div>
65+
<div style="height:500px;width:1350px;">
66+
<br /><br />
67+
@Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).ToolbarClick("toolbarClick").Render()
68+
</div>
69+
</div>
70+
71+
<script type="text/javascript">
72+
window.onload = function () {
73+
var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
74+
var toolItem1 = {
75+
prefixIcon: 'e-icons e-save',
76+
id: 'download',
77+
text: 'Save',
78+
tooltipText: 'Save Button',
79+
align: 'left'
80+
};
81+
function onCreate() {
82+
this.addIcon('prepend', 'e-icons e-search');
83+
}
84+
pdfViewer.toolbarSettings = {
85+
showTooltip: true,
86+
toolbarItems: ['OpenOption', toolItem1, 'PageNavigationTool', 'MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm']
87+
};
88+
89+
};
90+
91+
// Define the toolbarClick event handler
92+
function toolbarClick(args) {
93+
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)

‎ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/how-to/add-save-button.md

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
---
2+
layout: post
3+
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: PDF Viewer
7+
publishingplatform: ##Platform_Name##
8+
documentation: ug
9+
---
10+
11+
# Add Save Button in Built-In toolbar
12+
13+
PDF Viewer allows you to customize(add, show, hide, enable, and disable) existing items in a toolbar.
14+
15+
* 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`.
16+
17+
* 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).
18+
19+
* Enable, Disable - `Save` button-item can be enabled or disable using `enabletoolbaritem`.
20+
21+
{% tabs %}
22+
{% highlight html tabtitle="Standalone" %}
23+
24+
<div>
25+
<ejs-pdfviewer id="pdfviewer"
26+
style="width:1350px;height:100%"
27+
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
28+
resourceUrl='https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2-pdfviewer-lib'
29+
toolbarClick="toolbarClick">
30+
</ejs-pdfviewer>
31+
</div>
32+
33+
<script type="text/javascript">
34+
window.onload = function () {
35+
var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
36+
var toolItem1 = {
37+
prefixIcon: 'e-icons e-save',
38+
id: 'download',
39+
text: 'Save',
40+
tooltipText: 'Save Button',
41+
align: 'left'
42+
};
43+
pdfViewer.toolbarSettings = {
44+
showTooltip: true,
45+
toolbarItems: ['OpenOption', toolItem1, 'PageNavigationTool', 'MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm']
46+
};
47+
function onCreate() {
48+
this.addIcon('prepend', 'e-icons e-search');
49+
}
50+
}
51+
52+
// Define the toolbarClick event handler
53+
function toolbarClick(args) {
54+
var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
55+
56+
if (args.item && args.item.id === 'download') {
57+
pdfViewer.download();
58+
}
59+
}
60+
61+
</script>
62+
63+
{% endhighlight %}
64+
{% highlight html tabtitle="Server-Backed" %}
65+
66+
<div>
67+
<ejs-pdfviewer id="pdfviewer"
68+
style="width:1350px;height:100%"
69+
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
70+
serviceUrl="/api/PdfViewer"
71+
toolbarClick="toolbarClick">
72+
</ejs-pdfviewer>
73+
</div>
74+
75+
<script type="text/javascript">
76+
window.onload = function () {
77+
var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
78+
var toolItem1 = {
79+
prefixIcon: 'e-icons e-save',
80+
id: 'download',
81+
text: 'Save',
82+
tooltipText: 'Save Button',
83+
align: 'left'
84+
};
85+
pdfViewer.toolbarSettings = {
86+
showTooltip: true,
87+
toolbarItems: ['OpenOption', toolItem1, 'PageNavigationTool', 'MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm']
88+
};
89+
function onCreate() {
90+
this.addIcon('prepend', 'e-icons e-search');
91+
}
92+
}
93+
94+
// Define the toolbarClick event handler
95+
function toolbarClick(args) {
96+
var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
97+
98+
if (args.item && args.item.id === 'download') {
99+
pdfViewer.download();
100+
}
101+
}
102+
103+
</script>
104+
105+
{% endhighlight %}
106+
{% endtabs %}
107+
108+
N> Default value of toolbar items is ['OpenOption', 'PageNavigationTool','MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'DownloadOption','UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm']
109+
110+
### Align Property
111+
112+
The align property is used to specify the alignment of a `save` button-item within the toolbar.
113+
114+
`Left`: Aligns the item to the left side of the toolbar.
115+
`Right`: Aligns the item to the right side of the toolbar.
116+
117+
### Tooltip Property
118+
119+
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.
120+
121+
### CssClass Property
122+
123+
The cssClass property is used to apply custom CSS classes to a `save` button-item. It allows custom styling of the save button-item.
124+
125+
### Prefix Property
126+
127+
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.
128+
129+
### ID Property
130+
131+
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.
132+
133+
When defining or customizing toolbar items, it is mandatory to assign a specific and descriptive id to each item.
134+
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.
135+
136+
N> When customizing `save` button-item, you have the flexibility to include either icons or text based on your design preference.
137+
138+
[View sample in GitHub](https://github.com/SyncfusionExamples/asp-core-pdf-viewer-examples/tree/master/How%20to)

0 commit comments

Comments
 (0)