Footnotes and Endnotes in ASP.NET MVC DOCX Editor

27 Aug 20262 minutes to read

The DocumentEditorContainer component provides support for inserting footnotes and endnotes through the in-built toolbar. The DocumentEditor also exposes APIs to insert footnotes and endnotes programmatically.

Insert footnote endnote

Footnotes and endnotes are both ways of adding extra bits of information to your writing outside of the main text. You can use footnotes and endnotes to add side comments to your work or to cite other publications such as books, articles, or websites.

Insert footnotes

The DOCX Editor exposes an API to insert footnotes at the cursor position programmatically, or at the end of the currently selected text.

@Html.EJS().Button("insertFootnote").Content("insert Footnote").Render()
<div id="documenteditor" style="width:100%;height:100%">
    @Html.EJS().DocumentEditor("DocumentEditor").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).Render()
</div>
<script>
    var documenteditor;
    document.addEventListener('DOMContentLoaded', function () {
        documenteditor = document.getElementById('DocumentEditor').ej2_instances[0];
        documenteditor.resize();
    });    
    document.getElementById('insertFootnote').addEventListener('click', function () {
        documenteditor.editor.insertFootnote();
    });
</script>
public ActionResult Default()
{
    return View();
}

Insert endnotes

The DOCX Editor exposes an API to insert endnotes at the cursor position programmatically, or at the end of the currently selected text.

@Html.EJS().Button("InsertEndnote").Content("Insert Endnote").Render()
<div id="documenteditor" style="width:100%;height:100%">
    @Html.EJS().DocumentEditor("DocumentEditor").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).Render()
</div>
<script>
    var documenteditor;
    document.addEventListener('DOMContentLoaded', function () {
        documenteditor = document.getElementById('DocumentEditor').ej2_instances[0];
        documenteditor.resize();
    });    
    document.getElementById('InsertEndnote').addEventListener('click', function () {
        documenteditor.editor.insertEndnote();
    });
</script>
public ActionResult Default()
{
    return View();
}

Update or edit footnotes and endnotes

You can update or edit footnotes and endnotes using the built-in context menu that appears when you right-click them. The Footnote/Endnote dialog box pops up, where you can customize the number format and the “Start at” value.

Update or edit footnotes and endnotes

Online Demo

Explore how to add and manage notes in Word documents using the ASP.NET MVC DOCX Editor in this live demo here.