TextBoxItemEditorExtensionOptions Interface
Provides options for customizing the TextBoxItemEditorExtension.
Declaration
export interface TextBoxItemEditorExtensionOptionsRemarks
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) => voidProperty 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) => voidProperty 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.