Skip to main content

Table of Contents

  • 4 minutes to read

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

ASPxRichEdit - TOC - Overview

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

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.

ASPxRichEdit - TOC - RibbonTab - Contents

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.

ASPxRichEdit - StylesGallery

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.

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:

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:

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.

ASPxRichEdit - TOC - SEQ

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:

ASPxRichEdit - TOC - TableOfImages

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

ASPxRichEdit - TOC - RibbonTab - Captions

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.

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

Online Demo

Table of Contents

See Also