Skip to main content
All docs
V24.2

TextBoxItemEditorExtensionOptions Interface

Provides options for customizing the TextBoxItemEditorExtension.

Declaration

export interface TextBoxItemEditorExtensionOptions

Remarks

See the following topic for information on how to use the DashboardControl’s client-side API: Extensions Overview.

Example 1: Modify RichEdit Fonts

This example modifies the RichEdit‘s font collection in the Text Box Editor for an ASP.NET Core Dashboard application.

On the client, link the font’s CSS files to your head section if you use custom fonts:

<head>
    ...
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Emilys+Candy&family=Sankofa+Display&display=swap" rel="stylesheet">
    <script type="text/javascript">
        function onBeforeRender(dashboardControl) {
            ...
        }
    </script>
</head>

Modify font collection before RichEdit is rendered:

function onBeforeRender(dashboardControl) {
    dashboardControl.registerExtension(new DevExpress.Dashboard.Designer.TextBoxItemEditorExtension(dashboardControl));
    var textEditExtension = dashboardControl.findExtension('textBoxItemEditor');
    if (textEditExtension) {
        textEditExtension.on('richEditOptionsPrepared', customizeRichEditOptions);
    }
}
function customizeRichEditOptions(e) {
    if (e.itemName === 'textBoxDashboardItem1') {
        e.richEditOptions.fonts.fonts = [
            { name: 'Segoe UI', fontFamily: 'Segoe UI' },
            {
                name: 'Sankofa Display',
                fontFamily: 'Sankofa Display',
                regularFontUri: 'https://fonts.gstatic.com/s/sankofadisplay/v2/Ktk1ALSRd4LucUDghJ2rTqXOoh3HEKOYd4xI5g.woff2',
            },
            {
                name: 'Emilys Candy',
                fontFamily: 'Emilys Candy',
                regularFontUri: 'https://fonts.gstatic.com/s/emilyscandy/v19/2EbgL-1mD1Rnb0OGKudbk0yJptZqb84.woff2',
            }
        ];
    }
}

On the server, add required fonts to the font repository to eliminate font substitution effects:

DXFontRepository.Instance.AddFont(@"Fonts\EmilysCandy-Regular.ttf");
DXFontRepository.Instance.AddFont(@"Fonts\SankofaDisplay-Regular.ttf");

See the following help topic for details on how to use DXFontRepository: Use DXFontRepository to Add Custom Fonts.

Example 2: Modify RichEdit Tabs

The example adds the Page Layout, References, and View tabs to the underlying RichEdit widget in an ASP.NET Core Dashboard application:

function onBeforeRender(dashboardControl) {
   dashboardControl.registerExtension(new DevExpress.Dashboard.Designer.TextBoxItemEditorExtension(dashboardControl));
   var textEditExtension = dashboardControl.findExtension('textBoxItemEditor');
   if (textEditExtension) {
       textEditExtension.on('richEditOptionsPrepared', customizeRichEditOptions);
   }
}
function customizeRichEditOptions(e) {
   if (e.itemName === 'textBoxDashboardItem1') {        
       const tmpOptions = DevExpress.RichEdit.createOptions();
       e.richEditOptions.ribbon.insertTab(tmpOptions.ribbon.getTab(DevExpress.RichEdit.RibbonTabType.PageLayout));
       e.richEditOptions.ribbon.insertTab(tmpOptions.ribbon.getTab(DevExpress.RichEdit.RibbonTabType.References));
       e.richEditOptions.ribbon.insertTab(tmpOptions.ribbon.getTab(DevExpress.RichEdit.RibbonTabType.View));
   }
}

Properties

onRichEditCreated Property

Specifies a handler for the event that occurs when the underlying RichEdit widget in the Text Box dashboard item is created.

Declaration

onRichEditCreated?: (args: RichEditCreatedEventArgs) => void

Property Value

Type Description
(args: RichEditCreatedEventArgs) => void

A function that is executed when the client widget is created.

Remarks

Enable Text Box Editor before you handle the event. For this, add the RichEdit scripts, styles, fonts, and register TextBoxItemEditorExtension in the Web Dashboard. See the following topic for details: Enable Text Editor Functionality.

onRichEditOptionsPrepared Property

Specifies a handler for the event allowing you to access the underlying RichEdit widget in the Text Box dashboard item and configure its options.

Declaration

onRichEditOptionsPrepared?: (args: RichEditOptionsPreparedEventArgs) => void

Property Value

Type Description
(args: RichEditOptionsPreparedEventArgs) => void

A function that is executed before the client widget is prepared.

Remarks

Enable Text Box Editor before you handle the event. For this, add the RichEdit scripts, styles, fonts, and register TextBoxItemEditorExtension in the Web Dashboard. See the following topic for details: Enable Text Editor Functionality.