Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

Events Class

In This Article
Properties

Contains a list of client-side events for the RichEdit control.

#Declaration

TypeScript
export class Events

#Properties

#activeSubDocumentChanged Property

Enables you to dynamically add (or remove) a handler to (or from) the ActiveSubDocumentChanged event.

#Declaration

TypeScript
readonly activeSubDocumentChanged: ActiveSubDocumentChangedEvent

#Property Value

Type Description
ActiveSubDocumentChangedEvent

The event object.

#Remarks

The ActiveSubDocumentChanged event occurs when an active sub document is changed.

richEdit.events.activeSubDocumentChanged.addHandler(function(s, e) { /* your custom actions */ });

You can use the OnActiveSubDocumentChanged(String) method on the server or the activeSubDocumentChanged property on the client to assign a handler to the event.

#autoCorrect Property

Enables you to dynamically add (or remove) a handler to (or from) the AutoCorrect event.

#Declaration

TypeScript
readonly autoCorrect: AutoCorrectEvent

#Property Value

Type Description
AutoCorrectEvent

The event object.

#Remarks

The AutoCorrect event occurs when text is typed in the control. The event handler receives an argument of the AutoCorrectEventArgs type. The argument’s properties provide information specific to this event.

richEdit.events.autoCorrect.addHandler(function(s, e) {
  console.log('The inserted text is: ' + e.text);
});

You can use the OnAutoCorrect(String) method on the server or the autoCorrect property on the client to assign a handler to the event.

#calculateDocumentVariable Property

Enables you to dynamically add (or remove) a handler to (or from) the CalculateDocumentVariable event.

#Declaration

TypeScript
readonly calculateDocumentVariable: CalculateDocumentVariableEvent

#Property Value

Type Description
CalculateDocumentVariableEvent

The event object.

#Remarks

The CalculateDocumentVariable event occurs when a DOCVARIABLE field is updated. The event handler receives an argument of the CalculateDocumentVariableEventArgs type. The argument’s properties provide information specific to this event.

richEdit.events.calculateDocumentVariable.addHandler(function(s, e) {
  if (e.variableName == 'sectionIndex')
      e.value = (s.document.sections.find(e.fieldInterval.start).index + 1).toString();
});

You can use the OnCalculateDocumentVariable(String) method on the server or the calculateDocumentVariable property on the client to assign a handler to the event.

Note

When the CalculateDocumentVariableAsyncEvent event handler is specified, the CalculateDocumentVariable event does not fire.

#calculateDocumentVariableAsync Property

Enables you to dynamically add (or remove) a handler to (or from) the CalculateDocumentVariableAsync event.

#Declaration

TypeScript
readonly calculateDocumentVariableAsync: CalculateDocumentVariableAsyncEvent

#Property Value

Type Description
CalculateDocumentVariableAsyncEvent

The event object.

#Remarks

The CalculateDocumentVariableAsync event allows you to update the results of all DOCVARIABLE fields in the document. The event handler receives an argument of the CalculateDocumentVariableAsyncEventArgs type. The argument’s properties provide information specific to this event.

richEdit.events.calculateDocumentVariableAsync.addHandler(function(s, e) {
  e.data.forEach(function(data) {
    data.callback('Result Of ' + data.variableName);
  });
});

You can use the OnCalculateDocumentVariableAsync(String) method on the server or the calculateDocumentVariableAsync property on the client to assign a handler to the event.

Note

When the CalculateDocumentVariableAsync event handler is specified, the CalculateDocumentVariable event does not fire.

#characterPropertiesChanged Property

Enables you to dynamically add (or remove) a handler to (or from) the CharacterPropertiesChanged event.

#Declaration

TypeScript
readonly characterPropertiesChanged: CharacterPropertiesChangedEvent

#Property Value

Type Description
CharacterPropertiesChangedEvent

The event object.

#Remarks

The CharacterPropertiesChanged event occurs when the characters’ formatting is changed. The event handler receives an argument of the ContentChangedEventArgs type. The argument’s properties provide information specific to this event.

richEdit.events.characterPropertiesChanged.addHandler(function(s, e) { /* your custom actions */ });

You can use the OnCharacterPropertiesChanged(String) method on the server or the characterPropertiesChanged property on the client to assign a handler to the event.

#commandStateChanged Property

Enables you to dynamically add (or remove) a handler to (or from) the CommandStateChanged event.

#Declaration

TypeScript
readonly commandStateChanged: CommandStateChangedEvent

#Property Value

Type Description
CommandStateChangedEvent

The event object.

#Remarks

The CommandStateChanged event occurs after a command state has been changed. The event handler receives an argument of the CommandStateChangedEventArgs type. The argument’s properties provide information specific to this event.

richEdit.events.commandStateChanged.addHandler(function(s, e) { /* your custom actions */ });

You can use the OnCommandStateChanged(String) method on the server or the commandStateChanged property on the client to assign a handler to the event.

#contentInserted Property

Enables you to dynamically add (or remove) a handler to (or from) the ContentInserted event.

#Declaration

TypeScript
readonly contentInserted: ContentInsertedEvent

#Property Value

Type Description
ContentInsertedEvent

The event object.

#Remarks

The ContentInserted event occurs when content is inserted into the document. The event handler receives an argument of the ContentChangedEventArgs type. The argument’s properties provide information specific to this event.

richEdit.events.contentInserted.addHandler(function(s, e) {
  console.log('The inserted text is: ' + s.document.getText(e.interval));
});

You can use the OnContentInserted(String) method on the server or the contentInserted property on the client to assign a handler to the event.

#contentRemoved Property

Enables you to dynamically add (or remove) a handler to (or from) the ContentRemoved event.

#Declaration

TypeScript
readonly contentRemoved: ContentRemovedEvent

#Property Value

Type Description
ContentRemovedEvent

The event object.

#Remarks

The ContentRemoved event occurs when content is removed from the document. The event handler receives an argument of the ContentRemovedEventArgs type. The argument’s properties provide information specific to this event.

richEdit.events.contentRemoved.addHandler(function(s, e) {
  console.log('The removed text is: ' + e.removedText);
});

You can use the OnContentRemoved(String) method on the server or the contentRemoved property on the client to assign a handler to the event.

#contextMenuShowing Property

Enables you to dynamically add (or remove) a handler to (or from) the ContextMenuShowing event.

#Declaration

TypeScript
readonly contextMenuShowing: ContextMenuShowingEvent

#Property Value

Type Description
ContextMenuShowingEvent

The event object.

#Remarks

The ContextMenuShowing event occurs before a context menu is displayed. The event handler receives an argument of the ContextMenuShowingEventArgs type. The argument’s properties provide information specific to this event.

richEdit.events.contextMenuShowing.addHandler(function(s, e) {
  var characterProperties = s.selection.activeSubDocument.getCharacterProperties(s.selection.intervals[0]);
  if (characterProperties.bold === true || characterProperties.bold === undefined) {
    e.contextMenu.removeItem(DevExpress.RichEdit.ContextMenuCommandId.Copy);
    e.contextMenu.removeItem(DevExpress.RichEdit.ContextMenuCommandId.Paste);
    e.contextMenu.removeItem(DevExpress.RichEdit.ContextMenuCommandId.Cut);
    e.contextMenu.insertItem(new DevExpress.RichEdit.ContextMenuItem('CutCopy', {
      icon: 'close', text: 'Copy Paste Disabled', disabled: true
    }), 1);
  }
});

You can use the OnContextMenuShowing(String) method on the server or the contextMenuShowing property on the client to assign a handler to the event.

#customCommandExecuted Property

Enables you to dynamically add (or remove) a handler to (or from) the CustomCommandExecuted event.

#Declaration

TypeScript
readonly customCommandExecuted: CustomCommandExecutedEvent

#Property Value

Type Description
CustomCommandExecutedEvent

The event object.

#Remarks

The CustomCommandExecuted event occurs after a custom command has been executed on the client side. The event handler receives an argument of the CustomCommandExecutedEventArgs type. The argument’s properties provide information specific to this event.

richEdit.events.customCommandExecuted.addHandler(function(s, e) {
  switch (e.commandName) {
    case 'sendEmail':
      var text = s.document.getText();
      var mailto_link = 'mailto:bob@example.com?subject=Test&body=' + encodeURIComponent(text);
      window = window.open(mailto_link, 'emailWindow');
      if(window && window.open && !window.closed)
        window.close();
      break;
  }
});

You can use the OnCustomCommandExecuted(String) method on the server or the customCommandExecuted property on the client to assign a handler to the event.

#documentChanged Property

Enables you to dynamically add (or remove) a handler to (or from) the DocumentChanged event.

#Declaration

TypeScript
readonly documentChanged: DocumentChangedEvent

#Property Value

Type Description
DocumentChangedEvent

The event object.

#Remarks

The DocumentChanged event occurs if any change is made in the document.

richEdit.events.documentChanged.addHandler(function(s, e) {
  console.log('The document has been changed.');
});

You can use the OnDocumentChanged(String) method on the server or the documentChanged property on the client to assign a handler to the event.

#documentFormatted Property

Enables you to dynamically add (or remove) a handler to (or from) the DocumentFormatted event.

#Declaration

TypeScript
readonly documentFormatted: DocumentFormattedEvent

#Property Value

Type Description
DocumentFormattedEvent

The event object.

#Remarks

The DocumentFormatted event occurs when a document layout is formatted. The event handler receives an argument of the DocumentFormattedEventArgs type. The argument’s properties provide information specific to this event.

richEdit.events.documentFormatted.addHandler(function(s, e) {
  console.log('The document contains ' + e.pageCount + ' page(s).');
});

You can use the OnDocumentFormatted(String) method on the server or the documentFormatted property on the client to assign a handler to the event.

#documentLoaded Property

Enables you to dynamically add (or remove) a handler to (or from) the DocumentLoaded event.

#Declaration

TypeScript
readonly documentLoaded: DocumentLoadedEvent

#Property Value

Type Description
DocumentLoadedEvent

The event object.

#Remarks

The DocumentLoaded event occurs when a document model is loaded into the control.

richEdit.events.documentLoaded.addHandler(function(s, e) {
  console.log('The document has been loaded');
});

You can use the OnDocumentLoaded(String) method on the server or the documentLoaded property on the client to assign a handler to the event.

#gotFocus Property

Enables you to dynamically add (or remove) a handler to (or from) the GotFocus event.

#Declaration

TypeScript
readonly gotFocus: GotFocusEvent

#Property Value

Type Description
GotFocusEvent

The event object.

#Remarks

The GotFocus event occurs when the control receives focus.

richEdit.events.gotFocus.addHandler(function(s, e) { /* your custom actions */ });

You can use the OnGotFocus(String) method on the server or the gotFocus property on the client to assign a handler to the event.

#horizontalRulerVisibleChanged Property

#Declaration

TypeScript
readonly horizontalRulerVisibleChanged: HorizontalRulerVisibleChangedEvent

#Property Value

Type
HorizontalRulerVisibleChangedEvent

#hyperlinkClick Property

Enables you to dynamically add (or remove) a handler to (or from) the HyperlinkClick event.

#Declaration

TypeScript
readonly hyperlinkClick: HyperlinkClickEvent

#Property Value

Type Description
HyperlinkClickEvent

The event object.

#Remarks

The HyperlinkClick event occurs when a hyperlink is clicked. The event handler receives an argument of the HyperlinkClickEventArgs type. The argument’s properties provide information specific to this event.

richEdit.events.hyperlinkClick.addHandler(function(s, e) {
  console.log('Navigates to ' + e.hyperlink.hyperlinkInfo.url);
});

You can use the OnHyperlinkClick(String) method on the server or the hyperlinkClick property on the client to assign a handler to the event.

#keyDown Property

Enables you to dynamically add (or remove) a handler to (or from) the KeyDown event.

#Declaration

TypeScript
readonly keyDown: KeyDownEvent

#Property Value

Type Description
KeyDownEvent

The event object.

#Remarks

The KeyDown event occurs when a key is pressed while the RichEdit’s document has focus. The event handler receives an argument of the KeyboardEventArgs type. The argument’s properties provide information specific to this event.

richEdit.events.keyDown.addHandler(function(s, e) {
  console.log('The pressed key is: ' + e.htmlEvent.key);
});

You can use the OnKeyDown(String) method on the server or the keyDown property on the client to assign a handler to the event.

#keyUp Property

Enables you to dynamically add (or remove) a handler to (or from) the KeyUp event.

#Declaration

TypeScript
readonly keyUp: KeyUpEvent

#Property Value

Type Description
KeyUpEvent

The event object.

#Remarks

The KeyUp event occurs when a key is released while the RichEdit’s document has focus. The event handler receives an argument of the KeyboardEventArgs type. The argument’s properties provide information specific to this event.

richEdit.events.keyUp.addHandler(function(s, e) {
  console.log('The released key is: ' + e.htmlEvent.key);
});

You can use the OnKeyUp(String) method on the server or the keyUp property on the client to assign a handler to the event.

#lostFocus Property

Enables you to dynamically add (or remove) a handler to (or from) the LostFocus event.

#Declaration

TypeScript
readonly lostFocus: LostFocusEvent

#Property Value

Type Description
LostFocusEvent

The event object.

#Remarks

The LostFocus event occurs when the control loses focus.

richEdit.events.lostFocus.addHandler(function(s, e) { /* your custom actions */ });

You can use the OnLostFocus(String) method on the server or the lostFocus property on the client to assign a handler to the event.

#paragraphPropertiesChanged Property

Enables you to dynamically add (or remove) a handler to (or from) the ParagraphPropertiesChanged event.

#Declaration

TypeScript
readonly paragraphPropertiesChanged: ParagraphPropertiesChangedEvent

#Property Value

Type Description
ParagraphPropertiesChangedEvent

The event object.

#Remarks

The ParagraphPropertiesChanged event occurs when a paragraph’s formatting is changed. The event handler receives an argument of the ParagraphPropertiesChangedEventArgs type. The argument’s properties provide information specific to this event.

richEdit.events.paragraphPropertiesChanged.addHandler(function(s, e) { /* your custom actions */ });

You can use the OnParagraphPropertiesChanged(String) method on the server or the paragraphPropertiesChanged property on the client to assign a handler to the event.

#pdfExported Property

Enables you to dynamically add (or remove) a handler to (or from) the PdfExported event.

#Declaration

TypeScript
readonly pdfExported: PdfExportedEvent

#Property Value

Type Description
PdfExportedEvent

The event object.

#Remarks

The PdfExported event occurs after an exported PDF document has been processed on the server side. The event handler receives an argument of the PdfExportedEventArgs type. The argument’s properties provide information specific to this event.

richEdit.events.pdfExported.addHandler(function(s, e) {
  if (e.success)
    console.log('The PDF document is successfully processed on the server.');
});

You can use the OnPdfExported(String) method on the server or the pdfExported property on the client to assign a handler to the event.

#pdfExporting Property

Enables you to dynamically add (or remove) a handler to (or from) the PdfExporting event.

#Declaration

TypeScript
readonly pdfExporting: PdfExportingEvent

#Property Value

Type Description
PdfExportingEvent

The event object.

#Remarks

The PdfExporting event allows you to save an exported PDF document. The event handler receives an argument of the PdfExportingEventArgs type. The argument’s properties provide information specific to this event.

richEdit.events.pdfExporting.addHandler(function(s, e) {
    e.handled = true;
    console.log(e.base64);
});

You can use the OnPdfExporting(String) method on the server or the pdfExporting property on the client to assign a handler to the event.

#pointerDown Property

Enables you to dynamically add (or remove) a handler to (or from) the PointerDown event.

#Declaration

TypeScript
readonly pointerDown: PointerDownEvent

#Property Value

Type Description
PointerDownEvent

The event object.

#Remarks

For a mouse pointer, the PointerDown event occurs when a user presses a mouse button or wheel while the mouse pointer is over the Rich Text Editor. For touch and pen pointers, this event occurs when a pointer contacts a digitizer.

The event handler receives an argument of the PointerEventArgs type. The argument’s properties provide information specific to this event.

richEdit.events.pointerDown.addHandler(function(s, e) { /* your custom actions */ });

You can use the OnPointerDown(String) method on the server or the pointerDown property on the client to assign a handler to the event.

#pointerUp Property

Enables you to dynamically add (or remove) a handler to (or from) the PointerUp event.

#Declaration

TypeScript
readonly pointerUp: PointerUpEvent

#Property Value

Type Description
PointerUpEvent

The event object.

#Remarks

For a mouse pointer, the PointerUp event occurs when a user releases a mouse button or wheel while the mouse pointer is over the Rich Text Editor. For touch and pen pointers, this event occurs when a pointer stops physical contact with a digitizer.

The event handler receives an argument of the PointerEventArgs type. The argument’s properties provide information specific to this event.

richEdit.events.pointerUp.addHandler(function(s, e) { /* your custom actions */ });

You can use the OnPointerUp(String) method on the server or the pointerUp property on the client to assign a handler to the event.

#saved Property

Enables you to dynamically add (or remove) a handler to (or from) the Saved event.

#Declaration

TypeScript
readonly saved: SavedEvent

#Property Value

Type Description
SavedEvent

The event object.

#Remarks

The Saved event occurs after a document is saved on the server side. The event handler receives an argument of the SavedEventArgs type. The argument’s properties provide information specific to this event.

richEdit.events.saved.addHandler(function(s, e) {
    if (e.success)
      console.log('The document is successfully processed on the server.');
});

You can use the OnSaved(String) method on the server or the saved property on the client to assign a handler to the event.

#saving Property

Enables you to dynamically add (or remove) a handler to (or from) the Saving event.

#Declaration

TypeScript
readonly saving: SavingEvent

#Property Value

Type Description
SavingEvent

The event object.

#Remarks

The Saving event allows you to save a document. The event handler receives an argument of the SavingEventArgs type. The argument’s properties provide information specific to this event.

richEdit.events.saving.addHandler(function(s, e) {
  e.handled = true; 
  console.log(e.base64);
  console.log(e.fileName);
  console.log(e.format);
});

You can use the OnSaving(String) method on the server or the saving property on the client to assign a handler to the event.

#selectionChanged Property

Enables you to dynamically add (or remove) a handler to (or from) the SelectionChanged event.

#Declaration

TypeScript
readonly selectionChanged: SelectionChangedEvent

#Property Value

Type Description
SelectionChangedEvent

The event object.

#Remarks

The SelectionChanged event occurs when selection is changed in the document.

richEdit.events.selectionChanged.addHandler(function(s, e) {
  console.log('The current position is ' + s.selection.active);
});

You can use the OnSelectionChanged(String) method on the server or the selectionChanged property on the client to assign a handler to the event.

#Methods

#clear Method

Removes all client event handlers.

#Declaration

TypeScript
clear(): void

#Remarks

richEdit.events.clear();