Search results

Mention

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.

Properties

actionFailureTemplate

string

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’

allowSpaces

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

cssClass

string

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

Defaults to null

dataSource

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.

Defaults to []

displayTemplate

string

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

Defaults to null

enablePersistence

boolean

Enable or disable persisting component’s state between page reloads. If enabled, following list of states will be persisted.

  1. value

Defaults to false

enableRtl

boolean

Enable or disable rendering component in right to left direction.

Defaults to false

enabled

boolean

Specifies a value that indicates whether the component is enabled or not.

Defaults to true

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.

Defaults to { text: null, value: null, iconCss: null, groupBy: null}

filterType

string

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’

groupTemplate

string

Accepts the template design and assigns it to the group headers present in the popup list.

Defaults to null

highlight

boolean

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

Defaults to false

ignoreAccent

boolean

ignoreAccent set to true, then ignores the diacritic characters or accents when filtering.

ignoreCase

boolean

Specifies whether the searches are case sensitive to find suggestions.

Defaults to true

itemTemplate

string

Specifies the template for the suggestion list.

Defaults to null

locale

string

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

Defaults to ‘en-US’

mentionChar

string

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

Defaults to ’@’

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.

Defaults to 0

noRecordsTemplate

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’

popupHeight

string | number

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

Defaults to ‘300px’

popupWidth

string | number

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

Defaults to ‘auto’

query

Query

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

Defaults to null

showMentionChar

boolean

Specifies whether to show the configured mentionChar with the text.

Defaults to false

sortOrder

string

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’

spinnerTemplate

string

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

Defaults to null

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.

Defaults to null

suggestionCount

number

Specifies the number of items in the suggestion list.

Defaults to 25

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.

zIndex

number

specifies the z-index value of the component popup element.

Defaults to 1000

Methods

addEventListener

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

addItem

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 Object`[]` |Object | 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

appendTo

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

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

destroy

Removes the component from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.

Returns void

getDataByValue

Gets the data Object that matches the given value.

Parameter Type Description
value string | number | boolean Specifies the value of the list item.

Returns Object | string | number | boolean

getItems

Gets all the list items bound on this component.

Returns Element[]

getLocalData

Returns the persistence data for component

Returns any

getRootElement

Returns the route element of the component

Returns HTMLElement

hidePopup

Hides the popup if it is in an open state.

Returns void

hideSpinner

Hides the spinner loader.

Returns void

refresh

Applies all the pending property changes and render the component again.

Returns void

removeEventListener

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

showPopup

Opens the popup that displays the list of items.

Returns void

Inject

Dynamically injects the required modules to the component.

Parameter Type Description
moduleList Function[] ?

Returns void

Events

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.

dataBound

EmitType<Object>

Triggers when data source is populated in the popup list..

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.