The Mention component is used to list someone or something based on user input in textarea, input, or any other editable element from which the user can select.
string
| Function
Accepts the template and assigns it to the popup list content of the component when the data fetch request from the remote server fails.
Defaults to ‘Request failed’
boolean
Defines whether to allow the space in the middle of mention while searching. When disabled, the space ends the mention component search.
Defaults to false
string
Defines class/multiple classes separated by a space for the mention component.
Defaults to null
{ : }
[]
| 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
.
Defaults to []
string
| Function
Specifies the template for the selected value from the suggestion list.
Defaults to null
boolean
Enable or disable persisting component’s state between page reloads.
Defaults to false
boolean
Enable or disable rendering component in right to left direction.
Defaults to false
Defines the fields of the Mention to map with the data source and binds the data to the component.
Defaults to { text: null, value: null, iconCss: null, groupBy: null}
Determines on which filter type, the component needs to be considered on search action. and its supported data types are
FilterType |
Description |
Supported Types |
StartsWith |
Checks whether a value begins with the specified value. |
String |
EndsWith |
Checks whether a value ends with a specified value. |
String |
Contains |
Checks whether a value contains with a specified value. |
String |
The default value set to Contains
, all the suggestion items which contain typed characters to listed in the suggestion popup.
Defaults to ‘Contains’
string
| Function
Accepts the template design and assigns it to the group headers present in the popup list.
Defaults to null
boolean
Specifies whether to highlight the searched characters on suggestion list items.
Defaults to false
boolean
ignoreAccent set to true, then ignores the diacritic characters or accents when filtering.
boolean
Specifies whether the searches are case sensitive to find suggestions.
Defaults to true
string
Specifies the template for the suggestion list.
Defaults to null
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
Defaults to ‘en-US’
string
Specifies the symbol or single character which triggers the search action in the mention component.
Defaults to ’@’
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.
Defaults to 0
string
Specifies the template for no matched item which is displayed when there are no items to display in the suggestion list.
Defaults to ‘No records found’
string
| number
Specifies the height of the popup in pixels/number/percentage. The number value is considered as pixels.
Defaults to ‘300px’
string
| number
Specifies the width of the popup in pixels/number/percentage. The number value is considered as pixels.
Defaults to ‘auto’
Query
Specifies the external query, which can be customized and filtered against the data source.
Defaults to null
boolean
Specifies whether to show the configured mentionChar with the text.
Defaults to false
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.Defaults to ‘None’
string
| Function
Specifies the template for showing until data is loaded in the popup.
Defaults to null
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.
Defaults to null
number
Specifies the number of items in the suggestion list.
Defaults to 25
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.
number
specifies the z-index value of the component popup element.
Defaults to 1000
Adds the handler to the given event listener.
Parameter | Type | Description |
---|---|---|
eventName | string |
A String that specifies the name of the event |
handler | Function |
Specifies the call to run when the event occurs. |
Returns void
Adds a new item to the popup list. By default, new item appends to the list as the last item, but you can insert based on the index parameter.
Parameter | Type | Description |
---|---|---|
items | { : }[] | { : } | string | boolean | number | string[] | boolean[] | number[] | Specifies an array of JSON data or a JSON data. |
|
itemIndex (optional) | number |
Specifies the index to place the newly added item in the popup list. |
Returns void
Appends the control within the given HTML element
Parameter | Type | Description |
---|---|---|
selector (optional) | string | HTMLElement |
Target element where control needs to be appended |
Returns void
Adding unload event to persist data when enable persistence true
Returns void
When invoked, applies the pending property changes immediately to the component.
Returns void
Removes the component from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.
Returns void
Removing unload event to persist data when enable persistence true
Returns void
Method to disable specific item in the popup.
Parameter | Type | Description |
---|---|---|
item | string | number | object | HTMLLIElement |
Specifies the item to be disabled. |
Returns void
Gets the data Object that matches the given value.
Parameter | Type | Description |
---|---|---|
value | string | number | boolean | object |
Specifies the value of the list item. |
Returns * { : }** | *string | number | boolean
Gets all the list items bound on this component.
Returns Element[]
Returns the persistence data for component
Returns any
Returns the route element of the component
Returns HTMLElement
Handling unload event to persist data when enable persistence true
Returns void
Hides the popup if it is in an open state.
Returns void
Applies all the pending property changes and render the component again.
Returns void
Removes the handler from the given event listener.
Parameter | Type | Description |
---|---|---|
eventName | string |
A String that specifies the name of the event to remove |
handler | Function |
Specifies the function to remove |
Returns void
Search the entered text and show it in the suggestion list if available.
Returns void
Opens the popup that displays the list of items.
Returns void
Dynamically injects the required modules to the component.
Parameter | Type | Description |
---|---|---|
moduleList | Function[] |
? |
Returns void
EmitType<Object>
Triggers before fetching data from the remote server.
EmitType<Object>
Triggers after data is fetched successfully from the remote server.
EmitType<Object>
Triggers when the data fetch request from the remote server fails.
Triggers before the popup is opened.
EmitType<MentionChangeEventArgs>
Triggers when an item in a popup is selected and updated in an editor.
Triggers after the popup is closed.
EmitType<Object>
Triggers when the component is created.
EmitType<Object>
Triggers when data source is populated in the popup list..
EmitType<Object>
Triggers when the component is destroyed.
Triggers on typing a character in the component.
Triggers after the popup opens.
Triggers when an item in the popup is selected by the user either with the mouse/tap or with keyboard navigation.