Table of Contents in Blazor DOCX Editor
14 Aug 20263 minutes to read
The table of contents in a document is the same as the list of chapters at the beginning of a book. It lists each heading in the document along with the page number where that heading starts, and provides various options to customize the appearance.
Inserting table of contents
Blazor Document Editor exposes an API to insert a table of contents at the cursor position programmatically. The settings for a table of contents can be specified explicitly. Otherwise, the default settings are applied.
TableOfContentsSettings contain the following properties:
- startLevel: Specifies the start level for constructing a table of contents.
- endLevel: Specifies the end level for constructing a table of contents.
- includeHyperlink: Specifies whether the link for headings is included.
- includePageNumber: Specifies whether the page number of the headings is included.
- rightAlign: Specifies whether the page number is right aligned.
-
tabLeader: Specifies the tab leader styles such as
None,Dot,Hyphen, andUnderscore. - includeOutlineLevels: Specifies whether the outline levels are included.
The following code illustrates how to insert a table of contents in the Document Editor.
TableOfContentsSettings tableOfContentsSettings = new TableOfContentsSettings();
tableOfContentsSettings.StartLevel = 1;
tableOfContentsSettings.EndLevel = 3;
tableOfContentsSettings.IncludeHyperlink = true;
tableOfContentsSettings.IncludePageNumber = true;
tableOfContentsSettings.RightAlign = true;
await editor.Editor.InsertTableOfContentsAsync(tableOfContentsSettings);@using Syncfusion.Blazor.DocumentEditor;
<SfDocumentEditorContainer @ref="container" EnableToolbar="true">
<DocumentEditorContainerEvents Created="OnLoad"></DocumentEditorContainerEvents>
</SfDocumentEditorContainer>
@code {
SfDocumentEditorContainer container;
protected async void OnLoad(object args)
{
SfDocumentEditor editor = container.DocumentEditor;
string sfdt = "{\"sections\":[{\"blocks\":[{\"paragraphFormat\":{\"styleName\":\"Heading 1\"},\"inlines\":[{\"text\":\"Headin\"},{\"name\":\"_GoBack\",\"bookmarkType\":0},{\"name\":\"_GoBack\",\"bookmarkType\":1},{\"text\":\"g1\"}]},{\"paragraphFormat\":{\"styleName\":\"Heading 2\"},\"inlines\":[{\"text\":\"Heading2\"}]},{\"paragraphFormat\":{\"styleName\":\"Heading 3\"},\"inlines\":[{\"text\":\"Heading3\"}]},{\"paragraphFormat\":{\"styleName\":\"Heading 4\"},\"inlines\":[{\"text\":\"Heading4\"}]},{\"paragraphFormat\":{\"styleName\":\"Heading 5\"},\"inlines\":[{\"text\":\"Heading5\"}]},{\"paragraphFormat\":{\"styleName\":\"Heading 6\"},\"inlines\":[{\"text\":\"Heading6\"}]},{\"paragraphFormat\":{\"styleName\":\"Normal\"},\"inlines\":[{\"text\":\"Normal\"}]}],\"headersFooters\":{},\"sectionFormat\":{\"headerDistance\":36.0,\"footerDistance\":36.0,\"pageWidth\":612.0,\"pageHeight\":792.0,\"leftMargin\":72.0,\"rightMargin\":72.0,\"topMargin\":72.0,\"bottomMargin\":72.0,\"differentFirstPage\":false,\"differentOddAndEvenPages\":false}}],\"characterFormat\":{\"fontSize\":11.0,\"fontFamily\":\"Calibri\"},\"paragraphFormat\":{\"afterSpacing\":8.0,\"lineSpacing\":1.0791666507720947,\"lineSpacingType\":\"Multiple\"},\"background\":{\"color\":\"#FFFFFFFF\"},\"styles\":[{\"type\":\"Paragraph\",\"name\":\"Normal\",\"next\":\"Normal\"},{\"type\":\"Paragraph\",\"name\":\"Heading 1\",\"basedOn\":\"Normal\",\"next\":\"Normal\",\"link\":\"Heading 1 Char\",\"characterFormat\":{\"fontSize\":16.0,\"fontFamily\":\"Calibri Light\",\"fontColor\":\"#2F5496FF\"},\"paragraphFormat\":{\"beforeSpacing\":12.0,\"afterSpacing\":0.0,\"outlineLevel\":\"Level1\"}},{\"type\":\"Paragraph\",\"name\":\"Heading 2\",\"basedOn\":\"Normal\",\"next\":\"Normal\",\"link\":\"Heading 2 Char\",\"characterFormat\":{\"fontSize\":13.0,\"fontFamily\":\"Calibri Light\",\"fontColor\":\"#2F5496FF\"},\"paragraphFormat\":{\"beforeSpacing\":2.0,\"afterSpacing\":0.0,\"outlineLevel\":\"Level2\"}},{\"type\":\"Paragraph\",\"name\":\"Heading 3\",\"basedOn\":\"Normal\",\"next\":\"Normal\",\"link\":\"Heading 3 Char\",\"characterFormat\":{\"fontSize\":12.0,\"fontFamily\":\"Calibri Light\",\"fontColor\":\"#1F3763FF\"},\"paragraphFormat\":{\"beforeSpacing\":2.0,\"afterSpacing\":0.0,\"outlineLevel\":\"Level3\"}},{\"type\":\"Paragraph\",\"name\":\"Heading 4\",\"basedOn\":\"Normal\",\"next\":\"Normal\",\"link\":\"Heading 4 Char\",\"characterFormat\":{\"italic\":true,\"fontFamily\":\"Calibri Light\",\"fontColor\":\"#2F5496FF\"},\"paragraphFormat\":{\"beforeSpacing\":2.0,\"afterSpacing\":0.0,\"outlineLevel\":\"Level4\"}},{\"type\":\"Paragraph\",\"name\":\"Heading 5\",\"basedOn\":\"Normal\",\"next\":\"Normal\",\"link\":\"Heading 5 Char\",\"characterFormat\":{\"fontFamily\":\"Calibri Light\",\"fontColor\":\"#2F5496FF\"},\"paragraphFormat\":{\"beforeSpacing\":2.0,\"afterSpacing\":0.0,\"outlineLevel\":\"Level5\"}},{\"type\":\"Paragraph\",\"name\":\"Heading 6\",\"basedOn\":\"Normal\",\"next\":\"Normal\",\"link\":\"Heading 6 Char\",\"characterFormat\":{\"fontFamily\":\"Calibri Light\",\"fontColor\":\"#1F3763FF\"},\"paragraphFormat\":{\"beforeSpacing\":2.0,\"afterSpacing\":0.0,\"outlineLevel\":\"Level6\"}},{\"type\":\"Character\",\"name\":\"Default Paragraph Font\"},{\"type\":\"Character\",\"name\":\"Heading 1 Char\",\"basedOn\":\"Default Paragraph Font\",\"characterFormat\":{\"fontSize\":16.0,\"fontFamily\":\"Calibri Light\",\"fontColor\":\"#2F5496FF\"}},{\"type\":\"Character\",\"name\":\"Heading 2 Char\",\"basedOn\":\"Default Paragraph Font\",\"characterFormat\":{\"fontSize\":13.0,\"fontFamily\":\"Calibri Light\",\"fontColor\":\"#2F5496FF\"}},{\"type\":\"Character\",\"name\":\"Heading 3 Char\",\"basedOn\":\"Default Paragraph Font\",\"characterFormat\":{\"fontSize\":12.0,\"fontFamily\":\"Calibri Light\",\"fontColor\":\"#1F3763FF\"}},{\"type\":\"Character\",\"name\":\"Heading 4 Char\",\"basedOn\":\"Default Paragraph Font\",\"characterFormat\":{\"italic\":true,\"fontFamily\":\"Calibri Light\",\"fontColor\":\"#2F5496FF\"}},{\"type\":\"Character\",\"name\":\"Heading 5 Char\",\"basedOn\":\"Default Paragraph Font\",\"characterFormat\":{\"fontFamily\":\"Calibri Light\",\"fontColor\":\"#2F5496FF\"}},{\"type\":\"Character\",\"name\":\"Heading 6 Char\",\"basedOn\":\"Default Paragraph Font\",\"characterFormat\":{\"fontFamily\":\"Calibri Light\",\"fontColor\":\"#1F3763FF\"}}]}";
await editor.OpenAsync(sfdt);
TableOfContentsSettings tableOfContentsSettings = new TableOfContentsSettings();
tableOfContentsSettings.StartLevel = 1;
tableOfContentsSettings.EndLevel = 3;
tableOfContentsSettings.IncludeHyperlink = true;
tableOfContentsSettings.IncludePageNumber = true;
tableOfContentsSettings.RightAlign = true;
await editor.Editor.InsertTableOfContentsAsync(tableOfContentsSettings);
}
}Update or edit table of contents
You can update or edit the table of contents using the built-in context menu shown when you right-click it. Refer to the following screenshot.
- Update Field: Updates the headings in the table of contents with the same settings by searching the entire document.
- Edit Field: Opens the built-in table of contents dialog and allows you to modify its settings.
You can also perform this programmatically using the exposed API. Refer to the following sample code.
await editor.OpenAsync(''); /*Open any existing document*/
TableOfContentsSettings tableOfContentsSettings = new TableOfContentsSettings();
tableOfContentsSettings.StartLevel = 1;
tableOfContentsSettings.EndLevel = 3;
tableOfContentsSettings.IncludeHyperlink = true;
tableOfContentsSettings.IncludePageNumber = true;
tableOfContentsSettings.RightAlign = true;
await editor.Editor.InsertTableOfContentsAsync(tableOfContentsSettings);NOTE
The same method is used for inserting, updating, and editing the table of contents. This will work based on the current element at the cursor position and the optional settings parameter. If a table of contents is present at the cursor position, the update operation is performed based on the optional settings parameter. Otherwise, the insert operation is performed.
Online demo
Explore how to insert and update table of contents in Word documents using the Blazor Document Editor in this live demo.