diff --git a/ej2-react/pdfviewer/how-to/add-save-button.md b/ej2-react/pdfviewer/how-to/add-save-button.md new file mode 100644 index 000000000..f55c7a07d --- /dev/null +++ b/ej2-react/pdfviewer/how-to/add-save-button.md @@ -0,0 +1,159 @@ +--- +layout: post +title: Add save button in toolbar in React Pdfviewer component | Syncfusion +description: Learn here all about Add Save button in Syncfusion React Pdfviewer component of Syncfusion Essential JS 2 and more. +control: Toolbar +platform: ej2-react +documentation: ug +domainurl: ##DomainURL## +--- + +# Add Save button in Built-In Toolbar + +PDF Viewer allows you to customize(add, show, hide, enable, and disable) existing items in a toolbar. + +* 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/). + +* 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/). + +* Enable, Disable - `Save` button-item can be enabled or disable using [`enabletoolbaritem`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbar/#enabletoolbaritem) + +{% tabs %} +{% highlight js tabtitle="Standalone" %} +{% raw %} + +import * as ReactDOM from 'react-dom'; +import * as React from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, + ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject} from '@syncfusion/ej2-react-pdfviewer'; +import { ComboBox } from "@syncfusion/ej2-dropdowns"; +import { TextBox } from "@syncfusion/ej2-inputs"; + +export function App() { + +// Add OnCreateSearch outside the App function +function OnCreateSearch() { + this.addIcon('prepend', 'e-icons e-search'); +} + + var toolItem1 = { + prefixIcon: 'e-icons e-save', + id: 'download', + text: 'Save', + tooltipText: 'Save button', + align: 'Left' +}; + + function toolbarClick(args){ + if (args.item && args.item.id === 'download') { + viewer.download(); + } + }; +return (
+
+ + {/* Inject the required services */} + + +
+
); +} +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); + +{% endraw %} +{% endhighlight %} +{% highlight js tabtitle="Server-Backed" %} +{% raw %} + +import * as ReactDOM from 'react-dom'; +import * as React from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, + ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject} from '@syncfusion/ej2-react-pdfviewer'; +import { ComboBox } from "@syncfusion/ej2-dropdowns"; +import { TextBox } from "@syncfusion/ej2-inputs"; + +export function App() { + +// Add OnCreateSearch outside the App function +function OnCreateSearch() { + this.addIcon('prepend', 'e-icons e-search'); +} + + var toolItem1 = { + prefixIcon: 'e-icons e-save', + id: 'download', + text: 'Save', + tooltipText: 'Save button', + align: 'Left' +}; + + function toolbarClick(args){ + var viewer = document.getElementById('container').ej2_instances[0]; + if (args.item && args.item.id === 'download') { + viewer.download(); + } + }; +return (
+
+ + {/* Inject the required services */} + + +
+
); +} +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); + +{% endraw %} +{% endhighlight %} +{% endtabs %} + +>Note : Default value of toolbar items is ['OpenOption', 'PageNavigationTool','MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'DownloadOption','UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm'] + +### Align Property + +The align property is used to specify the alignment of a `save` button-item within the toolbar. + +`Left`: Aligns the item to the left side of the toolbar. +`Right`: Aligns the item to the right side of the toolbar. + +### Tooltip Property + +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. + +### CssClass Property + +The cssClass property is used to apply custom CSS classes to a `save` button-item. It allows custom styling of the `save` button-item. + +### Prefix Property + +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. + +### ID Property + +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. + +When defining or customizing toolbar items, it is mandatory to assign a specific and descriptive id to each item. +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. + +N> When customizing `save` button-item, you have the flexibility to include either icons or text based on your design preference. + +[View sample in GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/How%20to) diff --git a/ej2-react/pivotview/calculated-field.md b/ej2-react/pivotview/calculated-field.md index 120686528..ea26a851f 100644 --- a/ej2-react/pivotview/calculated-field.md +++ b/ej2-react/pivotview/calculated-field.md @@ -19,7 +19,7 @@ Calculated field can also be included in the pivot table through code behind usi To use calculated field option, you need to inject the `CalculatedField` module in pivot table. -> 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. +> 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. {% tabs %} {% highlight js tabtitle="App.jsx" %} @@ -391,4 +391,4 @@ The event [`actionFailure`](https://ej2.syncfusion.com/react/documentation/api/p {% endhighlight %} {% endtabs %} - {% previewsample "page.domainurl/code-snippet/pivot-table/default-cs15" %} \ No newline at end of file + {% previewsample "page.domainurl/code-snippet/pivot-table/default-cs15" %} diff --git a/ej2-react/pivotview/getting-started.md b/ej2-react/pivotview/getting-started.md index 835fa3564..51054345c 100644 --- a/ej2-react/pivotview/getting-started.md +++ b/ej2-react/pivotview/getting-started.md @@ -322,7 +322,8 @@ The filter axis contains collection of fields that would act as master filter ov 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. -> 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. +> 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) +property, as shown in the code below. Additionally, calculated fields can only be added to the value axis. {% tabs %} {% highlight js tabtitle="App.jsx" %} @@ -372,4 +373,4 @@ For more information and to access the quick start project, visit: [GitHub Repos ## See Also -* [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) \ No newline at end of file +* [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)