Skip to content

Commit 6e579f3

Browse files
SyncfusionBuildSyncfusionBuild
authored
Merge pull request #472 from Syncfusion-Content/hotfix/hotfix-v26.1.35
DOCINFRA-2341_merged_using_automation
2 parents b3071dd + 29690c4 commit 6e579f3

File tree

3 files changed

+164
-4
lines changed

3 files changed

+164
-4
lines changed

‎ej2-react/pdfviewer/how-to/add-save-button.md

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
---
2+
layout: post
3+
title: Add save button in toolbar in React Pdfviewer component | Syncfusion
4+
description: Learn here all about Add Save button in Syncfusion React Pdfviewer component of Syncfusion Essential JS 2 and more.
5+
control: Toolbar
6+
platform: ej2-react
7+
documentation: ug
8+
domainurl: ##DomainURL##
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 defined by [**CustomToolbarItemModel**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/customToolbarItemModel/) and with existing items in [**ToolbarSettings**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbarSettings/) property. Newly added save button-item click action can be defined in [`toolbarclick`](https://ej2.syncfusion.com/react/documentation/api/toolbar/clickEventArgs/).
16+
17+
* Show, Hide - `Save` button-item can be shown or hidden using the [`ToolbarSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbarSettings/) property. Pre-defined toolbar items are available with [`ToolbarItem`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbarItem/).
18+
19+
* Enable, Disable - `Save` button-item can be enabled or disable using [`enabletoolbaritem`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbar/#enabletoolbaritem)
20+
21+
{% tabs %}
22+
{% highlight js tabtitle="Standalone" %}
23+
{% raw %}
24+
25+
import * as ReactDOM from 'react-dom';
26+
import * as React from 'react';
27+
import './index.css';
28+
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
29+
ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject} from '@syncfusion/ej2-react-pdfviewer';
30+
import { ComboBox } from "@syncfusion/ej2-dropdowns";
31+
import { TextBox } from "@syncfusion/ej2-inputs";
32+
33+
export function App() {
34+
35+
// Add OnCreateSearch outside the App function
36+
function OnCreateSearch() {
37+
this.addIcon('prepend', 'e-icons e-search');
38+
}
39+
40+
var toolItem1 = {
41+
prefixIcon: 'e-icons e-save',
42+
id: 'download',
43+
text: 'Save',
44+
tooltipText: 'Save button',
45+
align: 'Left'
46+
};
47+
48+
function toolbarClick(args){
49+
if (args.item && args.item.id === 'download') {
50+
viewer.download();
51+
}
52+
};
53+
return (<div>
54+
<div className='control-section'>
55+
<PdfViewerComponent
56+
id="container"
57+
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
58+
resourceUrl="https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2-pdfviewer-lib"
59+
toolbarSettings={{ showTooltip : true, toolbarItems: ['OpenOption', toolItem1, 'PageNavigationTool', 'MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm']}}
60+
toolbarClick={toolbarClick}
61+
style={{ 'height': '640px' }}>
62+
{/* Inject the required services */}
63+
<Inject services={[ Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
64+
Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
65+
</PdfViewerComponent>
66+
</div>
67+
</div>);
68+
}
69+
const root = ReactDOM.createRoot(document.getElementById('sample'));
70+
root.render(<App />);
71+
72+
{% endraw %}
73+
{% endhighlight %}
74+
{% highlight js tabtitle="Server-Backed" %}
75+
{% raw %}
76+
77+
import * as ReactDOM from 'react-dom';
78+
import * as React from 'react';
79+
import './index.css';
80+
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
81+
ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject} from '@syncfusion/ej2-react-pdfviewer';
82+
import { ComboBox } from "@syncfusion/ej2-dropdowns";
83+
import { TextBox } from "@syncfusion/ej2-inputs";
84+
85+
export function App() {
86+
87+
// Add OnCreateSearch outside the App function
88+
function OnCreateSearch() {
89+
this.addIcon('prepend', 'e-icons e-search');
90+
}
91+
92+
var toolItem1 = {
93+
prefixIcon: 'e-icons e-save',
94+
id: 'download',
95+
text: 'Save',
96+
tooltipText: 'Save button',
97+
align: 'Left'
98+
};
99+
100+
function toolbarClick(args){
101+
var viewer = document.getElementById('container').ej2_instances[0];
102+
if (args.item && args.item.id === 'download') {
103+
viewer.download();
104+
}
105+
};
106+
return (<div>
107+
<div className='control-section'>
108+
<PdfViewerComponent
109+
id="container"
110+
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
111+
serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/pdfviewer"
112+
toolbarSettings={{ showTooltip : true, toolbarItems: ['OpenOption', toolItem1, 'PageNavigationTool', 'MagnificationTool', toolItem3, 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm']}}
113+
toolbarClick={toolbarClick}
114+
style={{ 'height': '640px' }}>
115+
{/* Inject the required services */}
116+
<Inject services={[ Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
117+
Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
118+
</PdfViewerComponent>
119+
</div>
120+
</div>);
121+
}
122+
const root = ReactDOM.createRoot(document.getElementById('sample'));
123+
root.render(<App />);
124+
125+
{% endraw %}
126+
{% endhighlight %}
127+
{% endtabs %}
128+
129+
>Note : Default value of toolbar items is ['OpenOption', 'PageNavigationTool','MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'DownloadOption','UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm']
130+
131+
### Align Property
132+
133+
The align property is used to specify the alignment of a `save` button-item within the toolbar.
134+
135+
`Left`: Aligns the item to the left side of the toolbar.
136+
`Right`: Aligns the item to the right side of the toolbar.
137+
138+
### Tooltip Property
139+
140+
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.
141+
142+
### CssClass Property
143+
144+
The cssClass property is used to apply custom CSS classes to a `save` button-item. It allows custom styling of the `save` button-item.
145+
146+
### Prefix Property
147+
148+
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.
149+
150+
### ID Property
151+
152+
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.
153+
154+
When defining or customizing toolbar items, it is mandatory to assign a specific and descriptive id to each item.
155+
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.
156+
157+
N> When customizing `save` button-item, you have the flexibility to include either icons or text based on your design preference.
158+
159+
[View sample in GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/How%20to)

‎ej2-react/pivotview/calculated-field.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ Calculated field can also be included in the pivot table through code behind usi
1919

2020
To use calculated field option, you need to inject the `CalculatedField` module in pivot table.
2121

22-
> The calculated field is applicable only for value fields. Also, calculated field created through code behind will be automatically listed in the UI dialog as well.
22+
> The calculated field is applicable only for value fields. By default, the calculated fields created through code-behind are only added to the field list and calculated field dialog UI. To display the calculated field in the pivot table UI, it must be added to the [`values`](https://ej2.syncfusion.com/react/documentation/api/pivotview/dataSourceSettings/#values) property, as shown in the code below.
2323
2424
{% tabs %}
2525
{% highlight js tabtitle="App.jsx" %}
@@ -391,4 +391,4 @@ The event [`actionFailure`](https://ej2.syncfusion.com/react/documentation/api/p
391391
{% endhighlight %}
392392
{% endtabs %}
393393

394-
{% previewsample "page.domainurl/code-snippet/pivot-table/default-cs15" %}
394+
{% previewsample "page.domainurl/code-snippet/pivot-table/default-cs15" %}

‎ej2-react/pivotview/getting-started.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -322,7 +322,8 @@ The filter axis contains collection of fields that would act as master filter ov
322322

323323
The calculated field feature allows user to insert or add a new calculated field based on the available fields from the bound data source using basic arithmetic operators. The calculated field can be included in pivot table using the [`CalculatedFieldSettings`](https://ej2.syncfusion.com/react/documentation/api/pivotview/calculatedFieldSettings/) from code behind. Or else, calculated fields can be added at run time through the built-in dialog by just setting the [`allowCalculatedField`](https://ej2.syncfusion.com/react/documentation/api/pivotview/pivotViewModel/#allowcalculatedfield) property to **true** and by injecting the **CalculatedField** module as follows in pivot table. You will see a button enabled in the Field List UI automatically to invoke the calculated field dialog and perform necessary operation. To know more about calculated field, [`refer`](./calculated-field) here.
324324

325-
> If the **CalculatedField** module is not injected, the calculated field dialog will not be rendered with the pivot table component. Moreover calculated measure can be added only in value axis.
325+
> If the **CalculatedField** module is not injected, the calculated field dialog will not appear within the pivot table component. By default, the calculated fields created through code-behind are only added to the field list and calculated field dialog UI. To display the calculated field in the pivot table UI, it must be added to the [`values`](https://ej2.syncfusion.com/react/documentation/api/pivotview/dataSourceSettings/#values)
326+
property, as shown in the code below. Additionally, calculated fields can only be added to the value axis.
326327

327328
{% tabs %}
328329
{% highlight js tabtitle="App.jsx" %}
@@ -372,4 +373,4 @@ For more information and to access the quick start project, visit: [GitHub Repos
372373

373374
## See Also
374375

375-
* [Tips and Tricks to Quickly Render the Pivot Table for Web](https://www.syncfusion.com/blogs/post/tips-and-tricks-to-quickly-render-the-pivot-table)
376+
* [Tips and Tricks to Quickly Render the Pivot Table for Web](https://www.syncfusion.com/blogs/post/tips-and-tricks-to-quickly-render-the-pivot-table)

0 commit comments

Comments
 (0)