Table of Contents

• Dec 17, 2020
• 4 minutes to read

The Rich Edit supports interactive tables that allow navigating through a document’s marked content (paragraphs, images, tables, and equations).

Table of contents and table of figures/tables/equations are created by adding the TOC field with optional field switches to a document. These field switches specify the created table’s settings.

The ASPxRichEdit allows you to create interactive navigating tables via Ribbon UI, client commands or by inserting the TOC field code into a document. This topic describes how to use the ASPxRichEdit to create navigation tables.

• Base Table of Contents
• Customizing Table of Contents
• Table of Images, Tables, and Equations

Base Table of Contents

The base table of contents includes links to paragraphs marked as headings. Heading have 9 levels: from Heading 1 (top-level headings) to Heading 9. Each level corresponds to a built-in style that is applied to marked paragraphs.

You can mark paragraphs as headings and create tables of contents using the Rich Edit’s ribbon commands which are available via the Table of Contents ribbon group in the References tab.

The following client commands duplicate the corresponding ribbon command:

Ribbon Command Name	Client Command	Description
Table Of Contents	RichEditCommands.insertTableOfContents	Adds a table of contents at the current position in the document.
Update Table	RichEditCommands.updateTableOfContents	Updates a table of contents.
Add Text	RichEditCommands.setParagraphLevel	Marks the selected paragraphs as a heading and applies the corresponding built-in style (from Heading 1 to Heading 9) to the selected text.

End-users also can apply a heading style to paragraphs using the ribbon’s Styles Gallery.

You also can add a paragraph to a table of contents by changing the paragraph’s outline level (from 1 to 9) without applying a heading style. End-users can specify the outline level using the Paragraph Dialog, or in code using the RichEditCommands.changeParagraphFormatting client command as demonstrated in the code snippet below.

JS

richEdit.commands.changeParagraphFormatting.execute({outlineLevel: 2})

Customizing Table of Contents

The TOC field supports field switches that extend the table of contents’ functionality. You can add a field with the required field switches to a document using the RichEditCommands.createField client command and the following code parameter:

JS

richEdit.commands.createField.execute("TOC \\h \\f")

The \h field switch inserts a table’s entries as hyperlinks.

The \f field switch specifies that a table of contents consists of TC fields. The TC field is hidden and allows you to show alternative titles in the table of contents.

You can add a TC field code to a document using the RichEditCommands.createField command as demonstrated in the following code snippet:

JS

richEdit.commands.createField.execute("TC \\l 2 ")

The \l field switch specifies the outline level value (from 1 to 9).

See the Field Codes topic for more information about field codes the ASPxRichEdit control supports.

Table of Figures, Tables, and Equations

The ASPxRichEdit control tables that enable you to navigate through document items (figures, tables, and equations) that have a specific caption. The caption is a numbered label that names a document item (for example, “Figure 1”) using the SEQ field as demonstrated in the image below.

The SEQ field identifies a sequence of document items (identifier - Figure) and displays the current item’s serial number in this sequence. The Rich Edit exposes three sequences for three types of document items: Figures (identifier - Figure), Tables (identifier - Table), and Equations (identifier - Equation). To create a table of items marked by the same identifier, add it as a parameter to the TOC field with the \c field switch as shown in the following image:

End-users can add a Table of Figures/Tables/Equations via the Captions group in the References ribbon tab.

The following client commands duplicate the corresponding ribbon command:

Ribbon Command Name	Client Command	Description
Insert Figures Caption Insert Tables Caption Insert Equations Caption	RichEditCommands.insertFiguresCaption RichEditCommands.insertTablesCaption RichEditCommands.insertEquationsCaption	Adds a caption to a figure; Adds a caption to a table; Adds a caption to an equation.
Insert Table of Figures Insert Table of Tables Insert Table of Equations	RichEditCommands.insertTableOfFigures RichEditCommands.insertTableOfTables RichEditCommands.insertTableOfEquations	Inserts a Table of Figures; Inserts a Table of Tables; Inserts a Table of Equations.
Update Table	RichEditCommands.updateTableOfContents	Updates a Table of Figures/Tables/Equations

You can use the RichEditCommands.createField client command with the code parameter to add TOC and SEQ fields with custom field switches as demonstrated in the code snippet below.

JS

richEdit.commands.createField('{SEQ Figure \\c }')

Online Demo

Table of Contents