MentionModel API in JavaScript Mention API control

Interface for a class Mention

Properties

actionBegin

EmitType<Object>

Triggers before fetching data from the remote server.

actionComplete

EmitType<Object>

Triggers after data is fetched successfully from the remote server.

actionFailure

EmitType<Object>

Triggers when the data fetch request from the remote server fails.

beforeOpen

EmitType<PopupEventArgs>

Triggers before the popup is opened.

change

EmitType<MentionChangeEventArgs>

Triggers when an item in a popup is selected and updated in an editor.

closed

EmitType<PopupEventArgs>

Triggers after the popup is closed.

created

EmitType<Object>

Triggers when the component is created.

destroyed

EmitType<Object>

Triggers when the component is destroyed.

filtering

EmitType<FilteringEventArgs>

Triggers on typing a character in the component.

opened

EmitType<PopupEventArgs>

Triggers after the popup opens.

select

EmitType<SelectEventArgs>

Triggers when an item in the popup is selected by the user either with the mouse/tap or with keyboard navigation.

allowSpaces

boolean

Defines whether to allow the space in the middle of mention while searching. When disabled, the space ends the mention component search.

cssClass

string

Defines class/multiple classes separated by a space for the mention component.

dataSource

{ [key: string]: Object }[] | DataManager | string[] | number[] | boolean[]

Accepts the list items either through local or remote service and binds it to the component. It can be an array of JSON Objects or an instance of DataManager.

displayTemplate

string | Function

Specifies the template for the selected value from the suggestion list.

fields

FieldSettingsModel

Defines the fields of the Mention to map with the data source and binds the data to the component.

• text - Specifies the text that maps the text filed from the data source for each list item.
• value - Specifies the value that maps the value filed from the data source for each list item.
• iconCss - Specifies the iconCss that map the icon class filed from the data source for each list item.
• groupBy - Specifies the groupBy that groups the list items with its related items by mapping groupBy field.

filterType

FilterType

Determines on which filter type, the component needs to be considered on search action. and its supported data types are

The default value set to Contains, all the suggestion items which contain typed characters to listed in the suggestion popup.

highlight

boolean

Specifies whether to highlight the searched characters on suggestion list items.

ignoreCase

boolean

Specifies whether the searches are case sensitive to find suggestions.

itemTemplate

string

Specifies the template for the suggestion list.

locale

string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

mentionChar

string

Specifies the symbol or single character which triggers the search action in the mention component.

minLength

number

Specifies the minimum length of user input to initiate the search action. The default value is zero, where suggestion the list opened as soon as the user inputs the mention character.

noRecordsTemplate

string

Specifies the template for no matched item which is displayed when there are no items to display in the suggestion list.

popupHeight

string | number

Specifies the height of the popup in pixels/number/percentage. The number value is considered as pixels.

popupWidth

string | number

Specifies the width of the popup in pixels/number/percentage. The number value is considered as pixels.

query

Query

Specifies the external query, which can be customized and filtered against the data source.

showMentionChar

boolean

Specifies whether to show the configured mentionChar with the text.

sortOrder

SortOrder

Specifies the order to sort the data source. The possible sort orders are,

• None - The data source is not sorted.
• Ascending - The data source is sorted in ascending order.
• Descending - The data source is sorted in descending order.

spinnerTemplate

string | Function

Specifies the template for showing until data is loaded in the popup.

suffixText

string

Specifies the custom suffix to append along with the mention component selected item while inserting. You can append space or new line character as suffix.

suggestionCount

number

Specifies the number of items in the suggestion list.

target

HTMLElement | string

Specifies the target selector where the mention component needs to be displayed. The mention component listens to the target’s user input and displays suggestions as soon as the user inputs the mention character.