Contact Support
Disabled Items in EJ2 JavaScript Mention control
31 Jan 20254 minutes to read
The Mention provides options for individual items to be either in an enabled or disabled state for specific scenarios. The category of each list item can be mapped through the disabled field in the data table. Once an item is disabled, it cannot be selected as a value for the component. To configure the disabled item columns, use the fields.disabled
property.
In the following sample, State are grouped according on its category using disabled
field.
let statusData = [
{ "Status": "Open", "State": false },
{ "Status": "Waiting for Customer", "State": false },
{ "Status": "On Hold", "State": true },
{ "Status": "Follow-up", "State": false },
{ "Status": "Closed", "State": true },
{ "Status": "Solved", "State": false },
{ "Status": "Feature Request", "State": false }
];
// initialize Mention component
var mentionObj = new ej.dropdowns.Mention({
//set the data to dataSource property
dataSource: statusData,
// maps the appropriate column to fields property
fields: { value: 'Status', disabled: 'State' },
// set placeholder to DropDownList input element
});
mentionObj.appendTo('#mentionElement');
<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2 Mention</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="styles.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-base/styles/bootstrap5.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-dropdowns/styles/bootstrap5.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/29.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container" style="width:200px;">
<!--element which is the Mention target to list the suggestions-->
<label style="font-size: 15px; font-weight: 600;">Comments</label>
<div id="mentionElement" style="min-height: 100px; border: 1px solid #D7D7D7; border-radius: 4px; padding: 8px; font-size: 14px; width: 600px;"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Disable Item Method
The disableItem method can be used to handle dynamic changing in disable state of a specific item. Only one item can be disabled in this method. To disable multiple items, this method can be iterated with the items list or array. The disabled field state will to be updated in the dataSource, when the item is disabled using this method.
Parameter | Type | Description |
---|---|---|
itemHTMLLIElement | HTMLLIElement |
It accepts the HTML Li element of the item to be removed. |
itemValue |
string | number | boolean | object
|
It accepts the string, number, boolean and object type value of the item to be removed. |
itemIndex | number |
It accepts the index of the item to be removed. |