mentions[]

Configures mentions.

Default Value: null

dataSource

Provides data for the suggestion list.

Default Value: null

If you use DevExtreme ASP.NET MVC Controls, refer to the Data Binding article.

Depending on your data source, specify this option as described in the following list. The data source can provide string values or objects. In the latter case, also specify the displayExpr and valueExpr.

  • Data Array
    Assign the array to the dataSource option.

  • Read-Only Data in JSON Format
    Set the dataSource option to the URL of a JSON file or service that returns JSON data.

  • OData
    Implement an ODataStore.

  • Web API, PHP, MongoDB
    Use one of the following extensions to enable the server to process data according to the protocol DevExtreme widgets use:

    Then, use the createStore method to configure access to the server on the client as shown below. This method is part of DevExtreme.AspNet.Data.

    jQuery
    JavaScript
    $(function() {
        let serviceUrl = "https://url/to/my/service";
        $("#htmlEditorContainer").dxHtmlEditor({
            // ...
            mentions: [{
                dataSource: DevExpress.data.AspNet.createStore({
                    key: "ID",
                    loadUrl: serviceUrl + "/GetAction"
                })
            }]
        })
    });
    Angular
    app.component.ts
    app.component.html
    app.module.ts
    import { Component } from '@angular/core';
    import CustomStore from 'devextreme/data/custom_store';
    import { createStore } from 'devextreme-aspnet-data-nojquery';
    
    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
    })
    export class AppComponent {
        store: CustomStore;
        constructor() {
            let serviceUrl = "https://url/to/my/service";
            this.store = createStore({
                key: "ID",
                loadUrl: serviceUrl + "/GetAction"
            })
        }
    }
    <dx-html-editor ... >
        <dxi-mention [dataSource]="store"></dxi-mention>
    </dx-html-editor>
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { AppComponent } from './app.component';
    
    import { DxHtmlEditorModule } from 'devextreme-angular';
    
    @NgModule({
        declarations: [
            AppComponent
        ],
        imports: [
            BrowserModule,
            DxHtmlEditorModule
        ],
        providers: [],
        bootstrap: [AppComponent]
    })
    export class AppModule { }
    Vue
    App.vue
    <template> 
        <dx-html-editor ... >
            <dx-mention :data-source="store"></dx-mention>
        </dx-html-editor>
    </template>
    
    <script>
    import 'devextreme/dist/css/dx.common.css';
    import 'devextreme/dist/css/dx.light.css';
    
    import CustomStore from 'devextreme/data/custom_store';
    import { createStore } from 'devextreme-aspnet-data-nojquery';
    import { DxHtmlEditor, DxMention } from 'devextreme-vue/html-editor';
    
    export default {
        components: {
            DxHtmlEditor,
            DxMention
        },
        data() {
            const serviceUrl = "https://url/to/my/service";
            const store = createStore({
                key: "ID",
                loadUrl: serviceUrl + "/GetAction"
            });
            return {
                store
            }
        }
    }
    </script>
    React
    App.js
    import React from 'react';
    import 'devextreme/dist/css/dx.common.css';
    import 'devextreme/dist/css/dx.light.css';
    
    import CustomStore from 'devextreme/data/custom_store';
    import { createStore } from 'devextreme-aspnet-data-nojquery';
    import HtmlEditor, { Mention } from 'devextreme-react/html-editor';
    
    const serviceUrl = "https://url/to/my/service";
    const store = createStore({
        key: "ID",
        loadUrl: serviceUrl + "/GetAction"
    });
    
    class App extends React.Component {
        render() {
            return (
                <HtmlEditor ... >
                    <Mention dataSource={store} />
                </HtmlEditor>
            );
        }
    }
    export default App;
  • Any other data source
    Implement a CustomStore.

NOTE

The stores are immutable. You cannot change their configurations at runtime. Instead, create a new store or DataSource and assign it to the dataSource option as shown in the articles about changing options in jQuery, Angular, React, and Vue.

displayExpr

Specifies the data field whose values should be displayed in the suggestion list.

Type:

String

|

Function

Function parameters:
item:

Object

The current mention's data object.

Return Value:

String

The displayed value.

Default Value: 'this'

Set this option to the name of a data field that provides displayed values...

displayExpr: "name"

... or to a function that returns the displayed value:

displayExpr: function(item) {
    // "item" can be null
    return item && 'ID: ' + item.id + ', Name: ' + item.name;
}

Do not change the default value if the data source contains primitives.

See Also

itemTemplate

Specifies a custom template for suggestion list items.

Type:

template

Function parameters:
itemData:

Object

The item's data object.

itemIndex:

Number

The item's index.

itemElement:

Element (jQuery or HTML)

The item's container. It is an HTML Element or a jQuery Element when you use jQuery.

Return Value:

String

|

DOM Node

|

jQuery

A template name or container.

Default Value: 'item'
See Also

marker

Specifies the prefix that a user enters to activate mentions. You can use different prefixes with different dataSources.

Type:

String

Default Value: '@'

minSearchLength

Specifies the minimum number of characters that a user should type to trigger the search.

Type:

Number

Default Value: 0
See Also

searchExpr

Specifies one or several data fields to search.

Type:

getter

|

Array<getter>

Default Value: 'this'
JavaScript
// Search a single data field
searchExpr: "name"
// Search several data fields
searchExpr: ["firstName", "lastName"]

searchTimeout

Specifies the delay between when a user stops typing and when the search is executed.

Type:

Number

Default Value: 500
See Also

template

Specifies a custom template for mentions.

Type:

template

Function parameters:
mentionData:

Object

The current mention's data.

Object structure:
marker:

String

The marker that precedes the mention.

id:

String

|

Number

The mention's identifier provided by the valueExpr.

value: any

The displayed value provided by the displayExpr.

contentElement:

Element (jQuery or HTML)

The mention's container. It is an HTML Element or a jQuery Element when you use jQuery.

Return Value:

String

|

DOM Node

|

jQuery

The name or container of a template.

Default Value: null
See Also

valueExpr

Specifies which data field provides unique values to the template's id parameter.

Type:

String

|

Function

Default Value: 'this'

Alternatively, you can specify the key in the store assigned to the dataSource.

NOTE
You cannot specify valueExpr as a function when the widget is bound to a remote data source. This is because valueExpr is used in a filter the widget sends to the server when querying data. Functions with custom logic cannot be serialized for this filter.
See Also