Skip to main content
All docs
V25.1
  • DxHtmlEditorMention.DisplayFieldName Property

    Specifies the data source field that populates display values for mentions.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.dll

    NuGet Package: DevExpress.Blazor

    Declaration

    [Parameter]
    public string DisplayFieldName { get; set; }

    Property Value

    Type Description
    String

    The name of the data source field.

    Remarks

    <DxHtmlEditor> supports mention functionality. When a user types a predefined marker, the component displays a list of available items. Use the Data property to bind the DxHtmlEditorMention component to an IEnumerable<T> data source. Once complete, use the DisplayFieldName property to specify what field values the component displays in the list.

    To enable search operations for mentions, assign corresponding names of data source fields to the SearchFieldNames property.

    Example

    The following code snippet implements mentions to emulate the functionality common to many collaboration tools:

    Html Editor - Mentions

    <DxHtmlEditor Markup="@Markup" Height="200px">
        <DxHtmlEditorMentions>
            <DxHtmlEditorMention Data="@EmployeesData"
                                 DisplayFieldName="@nameof(MentionData.Name)"
                                 SearchFieldNames="@SearchFieldNames" />
        </DxHtmlEditorMentions>
    </DxHtmlEditor>
    
    @code {
        string Markup = @"<p>
                          <span class='dx-mention' spellcheck='false' data-marker='@' data-mention-value='Kevin Carter'>
                            <span>
                                <span>@</span>
                                Kevin Carter
                            </span>
                          </span>
                          I think John's expertise can be very valuable in our startup.
                        </p>";
        string[] SearchFieldNames = { nameof(MentionData.Name) };
    
        class MentionData {
            public string Name { get; set; }
            public string Team { get; set; }
        }
        MentionData[] EmployeesData = {
            new MentionData() { Name = "John Heart", Team = "Engineering" },
            new MentionData() { Name = "Kevin Carter", Team = "Engineering" },
            new MentionData() { Name = "Olivia Peyton", Team = "Management" },
            new MentionData() { Name = "Robert Reagan", Team = "Management" },
            new MentionData() { Name = "Cynthia Stanwick", Team = "Engineering" },
            new MentionData() { Name = "Brett Wade", Team = "Analysis" },
            new MentionData() { Name = "Greta Sims", Team = "QA" },
        };
    }
    

    Run Demo: HTML Editor - Mentions

    See Also