ContextQMD
Back to Devexpress

Enable Text Editor Functionality

dashboard-401572-web-dashboard-create-dashboards-on-the-web-dashboard-item-settings-text-box-enable-text-editor-functionality.md

latest6.9 KB
Original Source

Enable Text Editor Functionality

  • Oct 29, 2025
  • 7 minutes to read

The Web Dashboard supports the Rich Text Editor used to edit Text Box item content: add data items, format and edit characters, paragraphs, lists, tables, and so on.

You need to enable Rich Edit control functionality before use.

ASP.NET Web Forms

Set the ASPxDashboard.EnableTextBoxItemEditor property to true.

aspx
<dx:ASPxDashboard ID="ASPxDashboard1" runat="server" EnableTextBoxItemEditor="true">
</dx:ASPxDashboard>

All required libraries are added automatically.

ASP.NET MVC

  1. Add ClientRichEdit scripts and styles.

  2. Pass the TextBoxItemEditorExtension instance as the DashboardControl.registerExtension method parameter before the Web Dashboard control is rendered:

ASP.NET Core

  1. Install the devexpress-richedit and jszip npm packages in addition to scripts the Web Dashboard requires:

  2. Add Rich Edit scripts, styles, and JSZip library to the bundleconfig.json file in the following order:

  3. Add the Rich Edit’s icon fonts to the libman.json file to copy them to the application’s static content folder. If this file does not exist, create it in the root directory of the project next to bundleconfig.json and package.json files:

  4. Pass the TextBoxItemEditorExtension instance as the DashboardControl.registerExtension method parameter before the Web Dashboard control is rendered:

Dashboard Component for Blazor

  1. In the wwwroot/js folder, create the custom dashboard-events-scripts.js file. Add the following code to register the TextBoxItemEditorExtension extension:

  2. Reference the RichEdit’s stylesheet and the created dashboard-events-scripts.js file on the _Layout.cshtml page. The order of attachments is important:

  3. In the wwwroot/js folder, create a custom dashboard-events-scripts.js file. Attach it to the page after DevExtreme and Web Dashboard scripts:

  4. In the Dashboard component, call the RegisterRichEditScripts method to register required scripts. Pass the name of the object created in the window to the Identifier property:

Dashboard Component for Angular

  1. Install devexpress-richedit and jszip npm packages in addition to scripts the Web Dashboard requires.

  2. Import the TextBoxItemEditorExtension module.

  3. In the tsconfig.json file, add a path to map the jszip module.

  4. Handle the onBeforeRender event. Use the e.component property to get the dashboard control instance. Pass the TextBoxItemEditorExtension instance as the control’s registerExtension method parameter:

  5. Add Rich Edit styles. The order of attachments is important:

Dashboard Component for React

  1. Install devexpress-richedit and jszip npm packages in addition to scripts the Web Dashboard requires.

  2. Import the TextBoxItemEditorExtension module. Handle the onBeforeRender event. Use the e.component property to get a dashboard control instance. Pass this TextBoxItemEditorExtension instance as the control’s registerExtension method parameter:

  3. Add Rich Edit styles. The order of attachments is important:

Dashboard Component for Vue

  1. Install devexpress-richedit and jszip npm packages in addition to scripts the Web Dashboard requires.

  2. Import the TextBoxItemEditorExtension module and pass the TextBoxItemEditorExtension instance as the DashboardControl.registerExtension method parameter before the Web Dashboard control is rendered:

  3. Add Rich Edit styles. The order of attachments is important:

Dashboard Control for JavaScript Applications

  1. Install devexpress-richedit and jszip npm packages in addition to scripts the Web Dashboard requires.

  2. Attach Rich Edit scripts, styles, and the JSZip library to the project inside the <head> section in the following order:

  3. Pass the TextBoxItemEditorExtension instance as the DashboardControl.registerExtension method parameter before the Web Dashboard control is rendered: