Skip to main content
BuyLog In
Business Intelligence Dashboard
Search in…
Docs > Web Dashboard > Create Dashboards on the Web > Dashboard Item Settings > Text Box > Enable Text Editor Functionality
All docs
V24.2
Business Intelligence Dashboard
Get Started
.NET Support
What's New
Basic Concepts and Terminology
Common Features
WinForms Dashboard
Web Dashboard
Prerequisites
Concepts and Terminology
Integrate the Dashboard Component into a Web App
Create Dashboards on the Web
Create a Dashboard
Provide Data
Add Dashboard Items
Bind Dashboard Items to Data
Dashboard Item Settings
Chart
Scatter Chart
Grid
Pies
Cards
Gauges
Pivot
Choropleth Map
Geo Point Maps
Range Filter
Date Filter
Images
Text Box
Provide Data
Edit Content
Enable Text Editor Functionality
Exporting
Treemap
Filter Elements
Dashboard Item Group
Tab Container
Custom Item
Data Shaping
Interactivity
Appearance Customization
Data Analysis
Custom Request Headers
Convert Dashboard Items
Dashboard Layout
Undo and Redo Operations
Save a Dashboard
Open a Dashboard
Delete a Dashboard
Exporting
UI Elements and Customization
Advanced Customization
WPF Dashboard Viewer
Visual Studio Integration
Redistribution and Deployment
Video Tutorials
Migration Guides
Examples
End-User Documentation
.NET Framework API Reference
.NET API Reference
HTML JS Control API Reference
ASP.NET Client API Reference
Download CHM

Enable Text Editor Functionality

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

Web dashboard - Text box item editor overview

You need to enable the Rich Edit control functionality before use.

ASP.NET Web Forms

Set the ASPxDashboard.EnableTextBoxItemEditor property to true.

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

ASP.NET MVC

  1. Add ClientRichEdit scripts and styles.

    <head>
    <meta charset="UTF-8" />
    <title>Dashboard Web Application</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    @Html.DevExpress().GetStyleSheets(
        new StyleSheet { ExtensionSuite = ExtensionSuite.Dashboard },
        new StyleSheet { ExtensionSuite = ExtensionSuite.ClientRichEdit }
    )
    @Html.DevExpress().GetScripts( 
        new Script { ExtensionSuite = ExtensionSuite.Dashboard },
        new Script { ExtensionSuite = ExtensionSuite.ClientRichEdit }
    )
</head>

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

    function onBeforeRender(sender) {
    var control = sender.GetDashboardControl();
    control.registerExtension(new DevExpress.Dashboard.Designer.TextBoxItemEditorExtension(control));
}

ASP.NET Core

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

    {
    "name": "dxwebapplication3",
    "version": "1.0.0",
    "private": true,
    "dependencies": {
        "devextreme-dist": "24.2.3",
        "@devexpress/analytics-core": "24.2.3",
        "devexpress-dashboard": "24.2.3",
        "devexpress-richedit": "24.2.3",
        "jszip": "3.5.0"
    }
}

    Install the libgdiplus library when you add the application to a Linux container. More information: ASP.NET Core Dashboard Control on Linux and MacOS.

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

    [
    {
        "outputFileName": "wwwroot/css/site.min.css",
        "inputFiles": [
            ...
            "node_modules/devextreme-dist/css/dx.light.css",
            "node_modules/devexpress-richedit/dist/dx.richedit.css",
            "node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css",
            ...
        ],
        "minify": {      
            "enabled": false,
            "adjustRelativePaths": false
        }
    },
    {
        "outputFileName": "wwwroot/js/site.min.js",
        "inputFiles": [
            ...
            "node_modules/jszip/dist/jszip.min.js",
            "node_modules/devextreme-dist/js/dx.all.js",
            "node_modules/devexpress-richedit/dist/dx.richedit.min.js",
            "node_modules/@devexpress/analytics-core/dist/js/dx-analytics-core.min.js",
            ...
        ],
        ...
    }
]

    Important

    The order of script references is important. You should add scripts and styles in the following order: DevExtreme Libraries, Rich Edit, DevExpress Analytics Components, Dashboard.

  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:

    {
"version": "1.0",
"defaultProvider": "filesystem",
"libraries": [        
    // ...
    {
        "library": "node_modules/devexpress-richedit/dist/icons/",
        "destination": "wwwroot/css/icons/",
        "files": [
            "dxre-icons.ttf",
            "dxre-icons.woff",
            "dxre-icons.woff2"
        ]
    }
]
}

    Note

    This step requires the Microsoft.Web.LibraryManager.Build NuGet package to be installed.

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

    function onBeforeRender(dashboardControl) {
    dashboardControl.registerExtension(new DevExpress.Dashboard.Designer.TextBoxItemEditorExtension(dashboardControl));
}

Dashboard Component for Blazor

  1. Download and add the following files to your project in the wwwroot folder:

    • jszip.min.js → wwwroot/js
    • dx.richedit.js → wwwroot/js
    • dx.richedit.css → wwwroot/css

    You can find them in devexpress-richedit and jszip npm packages. Run the following command to install and copy files:

    npm i devexpress-richedit@24.2.3 jszip

  2. The Rich Edit style sheet requires icon fonts located in the devexpress-richedit/dist/icons folder. Add the icons folder to the application’s static content folder next to the dx.richedit.css file (the wwwroot/css folder). The folder should contain the following files:

    • dxre-icons.ttf
    • dxre-icons.woff
    • dxre-icons.woff2

  3. Attach the dx.richedit.css file to the page. The order of attachments is important:

    <head>
    <link href="css/site.css" rel="stylesheet" />

    <link href="_content/DevExpress.Blazor.Dashboard/dx.light.css" rel="stylesheet" />
    <link href="css/dx.richedit.css" rel="stylesheet" />
    <link href="_content/DevExpress.Blazor.Dashboard/dx-analytics.common.css" rel="stylesheet" />
    <link href="_content/DevExpress.Blazor.Dashboard/dx-analytics.light.css" rel="stylesheet" />
    <link href="_content/DevExpress.Blazor.Dashboard/dx-querybuilder.css" rel="stylesheet" />
    <link href="_content/DevExpress.Blazor.Dashboard/dx-dashboard.light.min.css" rel="stylesheet" />
</head>

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

    <head>
    <link href="css/site.css" rel="stylesheet" />

    <link href="_content/DevExpress.Blazor.Dashboard/dx.light.css" rel="stylesheet" />
    <link href="css/dx.richedit.css" rel="stylesheet" />
    <link href="_content/DevExpress.Blazor.Dashboard/dx-analytics.common.css" rel="stylesheet" />
    <link href="_content/DevExpress.Blazor.Dashboard/dx-analytics.light.css" rel="stylesheet" />
    <link href="_content/DevExpress.Blazor.Dashboard/dx-querybuilder.css" rel="stylesheet" />
    <link href="_content/DevExpress.Blazor.Dashboard/dx-dashboard.light.min.css" rel="stylesheet" />
    <script src="js/dashboard-events-scripts.js"></script>
</head>

  5. In the dashboard-events-scripts.js file, add the following code to register the TextBoxItemEditorExtension extension:

    window.dashboardEvents = {
    onBeforeRender: (args) => {
        var dashboardControl = args.component;
        dashboardControl.registerExtension(new DevExpress.Dashboard.Designer.TextBoxItemEditorExtension(dashboardControl));
    }
}

  6. In the Dashboard component, use the DxResourceManager.RegisterScripts() method to add scripts. Register jszip.js and dx.richedit.js in the following order:

    @page "/"
@using DevExpress.Blazor
@DxResourceManager.RegisterScripts((config) => {                                    
        config.Register(new DxResource("/js/jszip.min.js", CommonResources.DevExtremeJS.Position - 1));
        config.Register(new DxResource("/js/dx.richedit.js", CommonResources.DevExtremeJS.Position + 1));
})

<DxDashboard Endpoint="api/dashboard" style="width: 100%; height: 100%;">
    <DxJSCustomization Identifier="dashboardEvents"></DxJSCustomization>
</DxDashboard>

Dashboard Component for Angular

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

    npm i devexpress-richedit@24.2.3 jszip

  2. Import the TextBoxItemEditorExtension module. 

    import { Component } from "@angular/core";
import {TextBoxItemEditorExtension} from 'devexpress-dashboard/designer/text-box-item-editor-extension';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent { 
    // ...
}

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

    { 
    "compilerOptions": { 
        // ...
        "paths": { 
            "jszip": [  
            "node_modules/jszip/dist/jszip.min.js"  
           ]
        }
    }
}

  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:

    <dx-dashboard-control 
    style="display: block;width:100%;height:800px;" 
    endpoint='https://demos.devexpress.com/services/dashboard/api'
    workingMode="Designer"
    (onBeforeRender) = "onBeforeRender($event)"        
>
</dx-dashboard-control>

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

    @import url("../node_modules/ace-builds/css/ace.css");  
@import url("../node_modules/ace-builds/css/theme/dreamweaver.css");  
@import url("../node_modules/ace-builds/css/theme/ambiance.css");  
@import url("../node_modules/devextreme/dist/css/dx.light.css");  
@import url("../node_modules/devexpress-richedit/dist/dx.richedit.css");
@import url("../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css");  
@import url("../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css");  
@import url("../node_modules/@devexpress/analytics-core/dist/css/dx-querybuilder.css");  
@import url("../node_modules/devexpress-dashboard/dist/css/dx-dashboard.light.css");

Dashboard Component for React

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

    npm i devexpress-richedit@24.2.3 jszip

  2. Import the TextBoxItemEditorExtension module. 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:

    import './App.css';
import DashboardControl from 'devexpress-dashboard-react';
import {TextBoxItemEditorExtension} from 'devexpress-dashboard/designer/text-box-item-editor-extension';

function onBeforeRender(e) { 
    e.component.registerExtension(new TextBoxItemEditorExtension(e.component)); 
}

function App() {
    return (
        <div style={{ position : 'absolute', top : '0px', left: '0px', right : '0px', bottom: '0px' }}>
            <DashboardControl style={{ height: '90%' }} 
                endpoint="https://demos.devexpress.com/services/dashboard/api"
                workingMode="Designer"
                onBeforeRender = { onBeforeRender(e)}
            ></DashboardControl>
        </div>
    );
};

export default App;

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

    @import url("../node_modules/devextreme/dist/css/dx.light.css");
@import url("../node_modules/devexpress-richedit/dist/dx.richedit.css");
@import url("../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css");
@import url("../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css");
@import url("../node_modules/@devexpress/analytics-core/dist/css/dx-querybuilder.css");
@import url("../node_modules/devexpress-dashboard/dist/css/dx-dashboard.light.css");

Dashboard Component for Vue

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

    npm i devexpress-richedit@24.2.3 jszip

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

    <template>
    <div>
        <DxDashboardControl 
        style="height:900px; display: 'block'; width: '100%';"
        endpoint="https://demos.devexpress.com/services/dashboard/api"
        @beforeRender="onBeforeRender" />
    </div>  
</template>

<script>
import { DxDashboardControl } from 'devexpress-dashboard-vue';
import {TextBoxItemEditorExtension} from 'devexpress-dashboard/designer/text-box-item-editor-extension';

export default {
    components: {
        DxDashboardControl
    },
    methods: {
        onBeforeRender(e) {
            e.component.registerExtension(new TextBoxItemEditorExtension(e.component));
        }
    }        
}
</script>

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

    import { createApp } from 'vue'
import App from './App.vue'

import "ace-builds/css/ace.css";
import "ace-builds/css/theme/dreamweaver.css";
import "ace-builds/css/theme/ambiance.css"; 
import 'devextreme/dist/css/dx.light.css';
import "devexpress-richedit/dist/dx.richedit.css";
import "@devexpress/analytics-core/dist/css/dx-analytics.common.css";
import "@devexpress/analytics-core/dist/css/dx-analytics.light.css";
import "@devexpress/analytics-core/dist/css/dx-querybuilder.css";
import "devexpress-dashboard/dist/css/dx-dashboard.light.css";

createApp(App).mount('#app')

Dashboard Control for JavaScript Applications

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

    npm i devexpress-richedit@24.2.3 jszip

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

    <head>
    <!-- ... -->        
    <link href="node_modules/devextreme-dist/css/dx.light.css" rel="stylesheet" />
    <link href="node_modules/devexpress-richedit/dist/dx.richedit.css" rel="stylesheet" />
    <link href="node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css" rel="stylesheet" />
    <!-- ... -->
    <script src="node_modules/ace-builds/src-min-noconflict/theme-ambiance.js"></script>
    <script src="node_modules/jszip/dist/jszip.min.js"></script>
    <script src="node_modules/devextreme-dist/js/dx.all.js"></script>
    <script src="node_modules/devexpress-richedit/dist/dx.richedit.min.js"></script>
    <script src="node_modules/@devexpress/analytics-core/dist/js/dx-analytics-core.min.js"></script>
    <!-- ... -->
</head>

    A full list of scripts and styles you can find here: Required Client Libraries.

    Important

    The order of script references is important. You should add scripts and styles in the following order: DevExtreme Libraries, Rich Edit, DevExpress Analytics Components, Dashboard.

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

    <script>
    window.onload = function () {
        var dashboardControl = new DevExpress.Dashboard.DashboardControl(document.getElementById("web-dashboard"), {
            endpoint: "/dashboardControl"
        });
        // Register the Text Box Item Editor extension.
        dashboardControl.registerExtension(new DevExpress.Dashboard.Designer.TextBoxItemEditorExtension(dashboardControl));
        dashboardControl.render();
    };
</script>