All docs
V19.2
19.2
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Enable Text Editor Functionality (CTP)

  • 4 min to read

All Web Dashboard controls support Rich Text Editor to edit the Text Box item's content: add data items, format and edit characters, paragraphs, lists, tables and so on.

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 the ClientRichEdit scripts and styles required for Rich Edit.

    <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 npm package in addition to scripts the Web Dashboard requires.

    npm i devexpress-richedit
    
    NOTE

    Rich Edit requires the JSZip library. Make sure you have jszip npm package installed.

  2. Add Rich Edit's scripts and styles and the 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 attachment 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:

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

HTML JavaScript Dashboard (Modular Approach)

  1. Install the devexpress-richedit npm package in addition to scripts the Web Dashboard requires.

    npm i devexpress-richedit
    
    NOTE

    Rich Edit requires the JSZip library. Make sure you have jszip npm package installed.

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

    import { Component, AfterViewInit, ElementRef, OnDestroy } from '@angular/core';
    import { DashboardControl, ResourceManager } from 'devexpress-dashboard';
    import {TextBoxItemEditorExtension} from 'devexpress-dashboard/designer/text-box-item-editor-extension';
    
    @Component({
    selector: 'app-dashboard',
    templateUrl: './dashboard.component.html',
    styleUrls: ['./dashboard.component.css']
    })
    
    export class DashboardComponent implements AfterViewInit, OnDestroy {
        private dashboardControl!: DashboardControl;
        constructor(private element: ElementRef) {       
            ResourceManager.embedBundledResources();
        }
        ngAfterViewInit(): void {
            this.dashboardControl = new DashboardControl(this.element.nativeElement.querySelector(".dashboard-container"), {
                endpoint: "https://demos.devexpress.com/services/dashboard/api",
                workingMode: "Designer"
            });
            // Register the Text Box item editor extension.
            this.dashboardControl.registerExtension(new TextBoxItemEditorExtension(this.dashboardControl));
            this.dashboardControl.render();
        }
        ngOnDestroy(): void {
            this.dashboardControl && this.dashboardControl.dispose();
        }
    }
    
  3. Add the Rich Edit's styles:

    @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");  
    

HTML JavaScript Dashboard (Global Namespaces)

  1. Install the devexpress-richedit npm package.

    npm i devexpress-richedit
    
    NOTE

    Rich Edit requires the JSZip library. Make sure you have jszip npm package installed.

  2. Attach Rich Edit's scripts and 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>
    
    TIP

    A full list of scripts and styles required for the Web Dashboard you can find here: Required Client Libraries - Global Namespaces.

    IMPORTANT

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

    1. Pass the TextBoxItemEditorExtension instance as the DashboardControl.registerExtension method parameter before the Web Dashboard control is rendered:
    <script>
        window.onload = function () {
            DevExpress.Dashboard.ResourceManager.embedBundledResources();
            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>