[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]What's Installed
 [Expand]Common Concepts
 [Collapse]ASP.NET WebForms Controls
   Getting Started
  [Expand]Grid View
  [Expand]Tree List
  [Expand]Card View
  [Expand]Chart Control
  [Expand]Pivot Grid
  [Collapse]Rich Text Editor
   [Expand]Product Information
    Getting Started
     ASPxRichEdit Control
     Supported Document Formats and Printing
     Import and Export
     Formatting Characters
     Formatting Paragraphs
     Mail Merge
     Simple View
     Table of Contents
     Spell Checking
    [Expand]Client API
    [Expand]Built-in Dialogs
     HTML Tag Interpretation
     Keyboard Shortcuts
  [Expand]Site Navigation and Layout
  [Expand]HTML Editor
  [Expand]Vertical Grid
  [Expand]Data Editors
  [Expand]Docking and Popups
  [Expand]File Management
  [Expand]Data and Image Navigation
  [Expand]Multi-Use Site Controls
  [Expand]Spell Checker
  [Expand]Query Builder
 [Expand]ASP.NET MVC Extensions
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Table of Contents

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

View the Demo

Refer to the Table of Contents online demo to see this feature in action.

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.

Expanded 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.

Expanded 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:

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:

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.

Expanded 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
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
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.

Expanded See Also

Is this topic helpful?​​​​​​​