Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Collapse]ASP.NET WebForms Controls
  [Expand]Reporting
  [Expand]Chart Control
  [Expand]Grid View
  [Expand]Card View
  [Expand]Vertical Grid
  [Expand]Spreadsheet
  [Collapse]Rich Text Editor
   [Expand]Product Information
   [Collapse]Concepts
     ASPxRichEdit Control
    [Expand]Document
     Supported Document Formats
     Import and Export
     Formatting Characters
     Formatting Paragraphs
    [Expand]Fields
     Mail Merge
     Restrictions
     Spell Checking
    [Collapse]Client API
      Document Model Information
      Client Selection
      Client Commands
    [Expand]Built-in Dialogs
     HTML Tag Interpretation
     Keyboard Shortcuts
   [Expand]Examples
  [Expand]Image and Data Browsing
  [Expand]Docking and Popups
  [Expand]Site Navigation and Layout
  [Expand]File Management
  [Expand]Multi-Use Site Controls
  [Expand]Scheduler
  [Expand]HTML Editor
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Gauges
  [Expand]Data Editors
  [Expand]Spell Checker
  [Expand]Query Builder
 [Expand]ASP.NET MVC Extensions
 [Expand]Localization
 [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]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Client Selection

The RichEdit provides a comprehensive API, allowing you to access and modify the current selection in a document on the client side. To access the selection-related client API, use the RichEdit's ASPxClientRichEdit.selection property, which returns a RichEditSelection object. With properties and methods of this object, you can perform your tasks on the selection.

Selection can be defined using the following three characteristics: an active sub-document, a list of selected intervals in the sub-document and the active page's index (in case the active sub-document's type is not SubDocumentType.Main).

To change the active sub-document, you can use the following commands. (Note that commands related to headers/footers can create a new header/footer sub-document if it does not exist.)

Examples of applying different interval selections are illustrated below.

  • Collapsed selection (the cursor position)

    The selected interval count is 1, and the length of this interval is 0.

    Code Result
    richEdit.selection.intervals === [{ start: 9, length: 0 }]
  • Expanded selection

    There is a single selected interval of non-zero length.

    Code Result
    richEdit.selection.intervals === [{ start: 10, length: 3 }]
  • Multiple selection

    There are multiple selected intervals of non-zero lengths.

    Code Result
    richEdit.selection.intervals === [{ start: 5, length: 1 }, { start: 9, length: 1 }]

Expanded Example (Creating a Header)

Most client commands are based on the selection. For instance, in the previous code example, the insertText client command inserts the specified text into the position indicated by the selection's intervals property (which is by default set to {start: 0, length: 0} for a created header sub-document).

Expanded API Listing

The main client properties affecting the selection are listed below. Access them in the following notation.
clientRichEditName.selection.propertyName

Method Name Link Description
intervals RichEditSelection.intervals Gets or sets an array of document intervals in the selection.
collapsed RichEditSelection.collapsed Gets or sets a value specifying whether the current selection is collapsed (and represents the cursor position).
getIntervalMaxPosition RichEditSelection.getIntervalMaxPosition Gets the maximum position of a document interval in the selection.

The following client methods are available for manipulating the selection in a document. Call the methods in the notation given below.
clientRichEditName.selection.methodName([parameter_if_any])

Property Name Link Description
Change the active sub-document
setMainSubDocumentAsActive RichEditSelection.setMainSubDocumentAsActive Makes the main sub-document active and moves the cursor to its beginning.
setFooterSubDocumentAsActiveByPageIndex RichEditSelection.setFooterSubDocumentAsActiveByPageIndex Creates a footer sub-document (if it was not created before) and sets the footer as the active sub-document. Moves the cursor to the footer's start position.
setHeaderSubDocumentAsActiveByPageIndex RichEditSelection.setHeaderSubDocumentAsActiveByPageIndex Creates a header sub-document (if it was not created before) and sets the header as the active sub-document. Moves the cursor to the header's start position.
Change selection by manipulating the document model
selectAll RichEditSelection.selectAll Selects the editor's entire content.
goToDocumentStart RichEditSelection.goToDocumentStart Moves the cursor to the start of the document.
goToDocumentEnd RichEditSelection.goToDocumentEnd Moves the cursor to the end of the document and allows you to extend the selection.
goToParagraphStart RichEditSelection.goToParagraphStart Moves the cursor to the start of the paragraph in which the cursor is located.
goToParagraphEnd RichEditSelection.goToParagraphEnd Moves the cursor to the end of the paragraph in which the cursor is located.
selectParagraph RichEditSelection.selectParagraph Selects the paragraph in which the cursor is located.
Change selection by manipulating the document layout
goToNextLine RichEditSelection.goToNextLine Moves the cursor to the next line.
goToPreviousLine RichEditSelection.goToPreviousLine Moves the cursor to the previous line.
goToLineEnd RichEditSelection.goToLineEnd Moves the cursor to the end of the line in which the cursor is located.
goToLineStart RichEditSelection.goToLineStart Moves the cursor to the start of the line in which the cursor is located.
goToNextCharacter RichEditSelection.goToNextCharacter Moves the cursor to the next character.
goToPreviousCharacter RichEditSelection.goToPreviousCharacter Moves the cursor to the previous character.
selectLine RichEditSelection.selectLine Selects the line in which the cursor is located and allows you to extend the entire selection with the currently existing selection.
goToNextPage RichEditSelection.goToNextPage Moves the cursor to the beginning of the next page and allows you to extend the selection.
goToPreviousPage RichEditSelection.goToPreviousPage Moves the cursor to the beginning of the previous page.
goToNextWord RichEditSelection.goToNextWord Moves the cursor to the next word and allows you to extend the selection.
goToStartNextPageCommand RichEditSelection.goToStartNextPageCommand Moves the cursor to the next page break mark.
goToStartPrevPageCommand RichEditSelection.goToStartPrevPageCommand Moves the cursor to the previous page break mark.
Change selection by manipulating tables
selectTableCell RichEditSelection.selectTableCell Selects the table cell in which the cursor is located.
selectTableRow RichEditSelection.selectTableRow Selects the table row in which the cursor is located.
selectTable RichEditSelection.selectTable Selects the entire table in which the cursor is located and allows you to extend the entire selection with the currently existing selection.

Expanded Example (Working with Bookmark Selection)

In certain document elements (for instance, bookmarks) that do not have a dedicated selection API, you need to handle selection manually. The example below demonstrates how to work with selections in bookmarks.

How would you rate this topic?​​​​​​​