How to Disable Header and Footer Editing in ASP.NET MVC DOCX Editor

27 Aug 20265 minutes to read

You can use the restrictEditing property to disable header and footer editing based on the selection context type. The restrictEditing property restricts document modification and makes the document read-only. To disable header and footer editing, handle the selection-change event of the DOCX Editor and set restrictEditing to true whenever the selection is inside a header or footer region.

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

<div>
@Html.EJS().DocumentEditorContainer("container").Created("onCreated").SelectionChange("onSelectionChanged").EnableToolbar(true).Render()
</div>
<script>
    var documenteditor;
    var container;
    function onCreated() {
        var documenteditorElement = document.getElementById("container");
        container = documenteditorElement.ej2_instances[0];
    }
    function onSelectionChanged() {
        // 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;
        }
    }
</script>

Otherwise, you can disable clicking inside a header or footer by using the closeHeaderFooter API in the selection module.

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

<div>
@Html.EJS().DocumentEditorContainer("container").Created("onCreated").SelectionChange("onSelectionChanged").EnableToolbar(true).Render()
</div>
<script>
    var documenteditor;
    var container;
    function onCreated() {
        var documenteditorElement = document.getElementById("container");
        container = documenteditorElement.ej2_instances[0];
    }
    function onSelectionChanged() {
        // 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();
        }
    }
</script>

Like restrictEditing, you can use the isReadOnly property in the DOCX Editor to disable header and footer edit.

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

@Html.EJS().DocumentEditor("container").IsReadOnly(false).SelectionChange("onSelectionChanged").Render()

<script>
    var documentEditor;
    document.addEventListener('DOMContentLoaded', function () {
        documentEditor = document.getElementById("container").ej2_instances[0];
        documentEditor.enableAllModules();
    });
    function onSelectionChanged() {
        // 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;
        }
    }
</script>