Syncfusion AI Assistant

How can I help you?

Add a save button to the toolbar in ASP.NET Core

28 Feb 20267 minutes to read

The PDF Viewer enables customization of toolbar items, including adding, showing, hiding, enabling, and disabling items. Create a custom save button that triggers the download functionality with a few configuration steps. The following approaches can be used to customize the toolbar:

  • Add a save button: Define a custom Save button using CustomToolbarItemModel and include it with existing toolbar items via ToolbarSettings. Handle the button click using the toolbarClick event.

  • Show or hide items: Control visibility of toolbar items using ToolbarSettings. See the list of predefined toolbar items under ToolbarItem.

  • Enable or disable items: Toggle the state of toolbar items using the enableToolbarItem() method.

<div>
    <ejs-pdfviewer id="pdfviewer"
                   style="width:1350px;height:100%"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                   resourceUrl='https://cdn.syncfusion.com/ej2/31.1.17/dist/ej2-pdfviewer-lib"'
                   toolbarClick="toolbarClick">
    </ejs-pdfviewer>
</div>

<script type="text/javascript">
    window.onload = function () {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        var toolItem1 = {
            prefixIcon: 'e-icons e-save',
            id: 'download',
            text: 'Save',
            tooltipText: 'Save Button',
            align: 'left'
        };
        pdfViewer.toolbarSettings = {
            showTooltip: true,
            toolbarItems: ['OpenOption', toolItem1, 'PageNavigationTool', 'MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm']
        };
        function onCreate() {
            this.addIcon('prepend', 'e-icons e-search');
        }
    }

    // Define the toolbarClick event handler
    function toolbarClick(args) {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];

        if (args.item && args.item.id === 'download') {
            pdfViewer.download();
        }
    }

</script>
<div>
    <ejs-pdfviewer id="pdfviewer"
                   style="width:1350px;height:100%"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                   serviceUrl="/api/PdfViewer"
                   toolbarClick="toolbarClick">
    </ejs-pdfviewer>
</div>

<script type="text/javascript">
    window.onload = function () {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        var toolItem1 = {
            prefixIcon: 'e-icons e-save',
            id: 'download',
            text: 'Save',
            tooltipText: 'Save Button',
            align: 'left'
        };
        pdfViewer.toolbarSettings = {
            showTooltip: true,
            toolbarItems: ['OpenOption', toolItem1, 'PageNavigationTool', 'MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm']
        };
        function onCreate() {
            this.addIcon('prepend', 'e-icons e-search');
        }
    }

    // Define the toolbarClick event handler
    function toolbarClick(args) {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];

        if (args.item && args.item.id === 'download') {
            pdfViewer.download();
        }
    }

</script>

NOTE

Default toolbar items: [‘OpenOption’, ‘PageNavigationTool’,’MagnificationTool’, ‘PanTool’, ‘SelectionTool’, ‘SearchOption’, ‘PrintOption’, ‘DownloadOption’,’UndoRedoTool’, ‘AnnotationEditTool’, ‘FormDesignerEditTool’, ‘CommentTool’, ‘SubmitForm’]

CustomToolbarItemModel properties

The following properties can be configured when creating a custom toolbar item:

Align property

Specifies the alignment of the Save button 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

Sets the tooltip text for the Save button. The tooltip provides additional information on hover.

CssClass property

Applies custom CSS classes to the Save button for styling.

Prefix property

Sets the CSS class or icon to add as a prefix to the Save button content.

ID property

The id property within a CustomToolbarItemModel is required and uniquely identifies each toolbar item for configuration and interaction.

When defining or customizing toolbar items, assign a specific, descriptive id to each item. These properties are commonly used when defining custom toolbar items with CustomToolbarItemModel in the context of the Syncfusion® PDF Viewer. When configuring the toolbar using the ToolbarSettings property, include these properties to customize appearance and behavior.

NOTE

You can use either text, icons, or both when customizing the save button based on your design requirements.

View sample in GitHub