Documents for PDF .NET Edition
GrapeCity Documents PDF Viewer / Configure GcDocs PDF Viewer / Edit PDF / Customize GcDocs PDF Viewer Toolbar
In This Topic
    Customize GcDocs PDF Viewer Toolbar
    In This Topic

    When GcDocs PDF Viewer is configured to edit PDF documents, it displays general editing options, Annotation and Form Editors. The editors are displayed in the left vertical panel of the Viewer whereas the editing options are displayed in the top horizontal toolbar of the Viewer.

    You can customize the display of editors and editing options appearing in the viewer. For eg. If you want to work with a form in PDF, you can choose to display only the form editor. Also, you can choose to view the selected form editing options (like text fields) as shown below:

    Annotation and Form Editors

    Steps to customize GcDocs PDF Viewer Toolbar

    Follow all the steps listed in Configure GcDocs PDF Viewer to edit PDF with a modification in Step 4 as shown below:

    To customize the toolbar to display only the Annotation editor, replace the code in <script> tag as below:

    Index.cshtml
    Copy Code
    <script>
        var viewer = new GcPdfViewer("#host", { supportApi: 'SupportApi/GcPdfViewer' });
        viewer.addDefaultPanels();
        viewer.addAnnotationEditorPanel();
        viewer.beforeUnloadConfirmation = true;
        viewer.open("Home/GetPdf");
    </script>
    

    To customize the toolbar to display only the Form editor, replace the code in <script> tag as below:

    Index.cshtml
    Copy Code
    <script>
        var viewer = new GcPdfViewer("#host", { supportApi: 'SupportApi/GcPdfViewer' });
        viewer.addDefaultPanels();
        viewer.addFormEditorPanel();
        viewer.beforeUnloadConfirmation = true;
        viewer.open("Home/GetPdf");
    </script>
    

    To customize the toolbar to display only the Annotation editor and text annotation tools, replace the code in <script> tag as below:

    Index.cshtml
    Copy Code
    <script>
        var viewer = new GcPdfViewer("#host", { supportApi: 'SupportApi/GcPdfViewer' });
        viewer.addDefaultPanels();
        viewer.addAnnotationEditorPanel();
        //Customize annotation editor tools
        viewer.toolbarLayout.annotationEditor.default = ["edit-select", "$split", "edit-text", "edit-free-text", "$split", "edit-erase", "$split", "$split", "edit-undo", "edit-redo", "save"];
        viewer.beforeUnloadConfirmation = true;
        viewer.open("Home/GetPdf");
    </script>
    

    To customize the toolbar to display only the Form editor and text fields, replace the code in <script> tag as below:

    Index.cshtml
    Copy Code
    <script>
        var viewer = new GcPdfViewer("#host", { supportApi: 'SupportApi/GcPdfViewer' });
        viewer.addDefaultPanels();
        viewer.addFormEditorPanel();
        //customize form editor tools
        viewer.toolbarLayout.formEditor.default = ['edit-select-field', '$split', 'edit-widget-tx-field', 'edit-widget-tx-text-area', "$split", "edit-erase-field", "$split", "edit-undo", "edit-redo", "save"];
        viewer.beforeUnloadConfirmation = true;
        viewer.open("Home/GetPdf");
    </script>