Search results

Disable Header and Footer edit in Document in React DocumentEditor component

25 Jan 2023 / 3 minutes to read

You can use restrictEditing property to disable header and footer editing based on selection context type.

RestrictEditing allows you to restrict the document modification and makes the Document read only mode. So, by using this property, and if selection inside header or footer, you can set this property as true.

The following example code illustrates how to header and footer edit in DocumentEditorContainer instance.

Copied to clipboard
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
  DocumentEditorContainerComponent,
  Toolbar,
} from '@syncfusion/ej2-react-documenteditor';

DocumentEditorContainerComponent.Inject(Toolbar);
function App() {
  let container: DocumentEditorContainerComponent;
  function selectionChanges() {
    // Check whether selection is in header
    if (container.documentEditor.selection.contextType.indexOf('Header') > -1 ||
      // Check whether selection is in Footer
      container.documentEditor.selection.contextType.indexOf('Footer') > -1) {
      // Change the document to read only mode
      container.restrictEditing = true;
    } else {
      // Change the document to editable mode
      container.restrictEditing = false;
    }
  };
  return (
    <DocumentEditorContainerComponent
      id="container" ref={(scope) => {
        container = scope;
      }}
      height={'590px'}
      serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/documenteditor/"
      enableToolbar={true}
      selectionChange={selectionChanges}
    />
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));

Otherwise, you can disable clicking inside Header or Footer by using closeHeaderFooter API in selection module.

The following example code illustrates how to close header and footer when selection is inside header or footer in DocumentEditorContainer instance.

Copied to clipboard
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
  DocumentEditorContainerComponent,
  Toolbar,
} from '@syncfusion/ej2-react-documenteditor';

DocumentEditorContainerComponent.Inject(Toolbar);
function App() {
  let container: DocumentEditorContainerComponent;
  function selectionChanges() {
    // Check whether selection is in header
    if (container.documentEditor.selection.contextType.indexOf('Header') > -1 ||
      // Check whether selection is in Footer
      container.documentEditor.selection.contextType.indexOf('Footer') > -1) {
      // Close header Footer
      container.documentEditor.selection.closeHeaderFooter();
    }
  };
  return (
    <DocumentEditorContainerComponent
      id="container" ref={(scope) => {
        container = scope;
      }}
      height={'590px'}
      serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/documenteditor/"
      enableToolbar={true}
      selectionChange={selectionChanges}
    />
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));

Like restrictEditing, you can use isReadOnly property in Document editor to disable header and footer edit.

The following example code illustrates how to header and footer edit in DocumentEditor instance.

Copied to clipboard
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
  DocumentEditorComponent,
  Print,
  SfdtExport,
  WordExport,
  TextExport,
  Selection,
  Search,
  Editor,
  ImageResizer,
  EditorHistory,
  ContextMenu,
  OptionsPane,
  HyperlinkDialog,
  TableDialog,
  BookmarkDialog,
  TableOfContentsDialog,
  PageSetupDialog,
  StyleDialog,
  ListDialog,
  ParagraphDialog,
  BulletsAndNumberingDialog,
  FontDialog,
  TablePropertiesDialog,
  BordersAndShadingDialog,
  TableOptionsDialog,
  CellOptionsDialog,
  StylesDialog,
} from '@syncfusion/ej2-react-documenteditor';
DocumentEditorComponent.Inject(
  Print,
  SfdtExport,
  WordExport,
  TextExport,
  Selection,
  Search,
  Editor,
  ImageResizer,
  EditorHistory,
  ContextMenu,
  OptionsPane,
  HyperlinkDialog,
  TableDialog,
  BookmarkDialog,
  TableOfContentsDialog,
  PageSetupDialog,
  StyleDialog,
  ListDialog,
  ParagraphDialog,
  BulletsAndNumberingDialog,
  FontDialog,
  TablePropertiesDialog,
  BordersAndShadingDialog,
  TableOptionsDialog,
  CellOptionsDialog,
  StylesDialog
);

function App(){
let  documentEditor: DocumentEditorComponent= new DocumentEditorComponent(undefined);

React.useEffect(() => {
selectionChanges();
}, []);
    return (
      <DocumentEditorComponent
        id="documentEditor"
        ref={(scope) => {
          documentEditor = scope;
        }}
        height={'330px'}
        serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/documenteditor/"
        isReadOnly={false}
        enablePrint={true}
        enableSelection={true}
        enableEditor={true}
        enableEditorHistory={true}
        enableContextMenu={true}
        enableSearch={true}
        enableOptionsPane={true}
        enableBookmarkDialog={true}
        enableBordersAndShadingDialog={true}
        enableFontDialog={true}
        enableTableDialog={true}
        enableParagraphDialog={true}
        enableHyperlinkDialog={true}
        enableImageResizer={true}
        enableListDialog={true}
        enablePageSetupDialog={true}
        enableSfdtExport={true}
        enableStyleDialog={true}
        enableTableOfContentsDialog={true}
        enableTableOptionsDialog={true}
        enableTablePropertiesDialog={true}
        enableTextExport={true}
        enableWordExport={true}
        selectionChange={selectionChanges}
      />
    );
    function selectionChanges() {
      // Check whether selection is in header
      if (documentEditor.selection.contextType.indexOf('Header') > -1 ||
        // Check whether selection is in Footer
        documentEditor.selection.contextType.indexOf('Footer') > -1
      ) {
        // Change the document to read only mode
       documentEditor.isReadOnly = true;
      } else {
        // Change the document to editable mode
        documentEditor.isReadOnly = false;
      }
    }
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));