Disabled Items in React Mention component

23 Sep 202411 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.

[Class-component]

import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";
export default class App extends React.Component {
    mentionTarget = '#mentionElement';
    // define the data with category
    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 }
    ];
  // map the groupBy field with Category column
    fields = { value: 'Status', disabled: 'State' };
    render() {
        return (<div id='mention_default'>
        <table>
          <tr>
            <td>
              <label id="comment">Comments</label>
              <div id="mentionElement" placeholder='Type @ and tag sport'></div>
            </td>
          </tr>
        </table>
        <MentionComponent target={this.mentionTarget} dataSource={this.statusData} fields={this.fields} ></MentionComponent>
      </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";

export default class App extends React.Component<{}, {}> {
  private mentionTarget: string = '#mentionElement';
  // define the data with category
  private 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 }
  ];
  // map the groupBy field with Category column
  private fields = { value: 'Status', disabled: 'State' };

  public render() {
    return (
      <div id='mention_default'>
        <table>
          <tr>
            <td>
              <label id="comment">Comments</label>
              <div id="mentionElement" placeholder='Type @ and tag sport' ></div>
            </td>
          </tr>
        </table>
        <MentionComponent target={this.mentionTarget} dataSource={this.statusData} fields={this.fields} ></MentionComponent>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('sample'));

[Functional-component]

import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
    let mentionTarget = '#mentionElement';
    // define the data with category
    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 }
  ];
  // map the groupBy field with Category column
  const fields = { value: 'Status', disabled: 'State' };
    return (<div id='mention_default'>
        <table>
          <tr>
            <td>
              <label id="comment">Comments</label>
              <div id="mentionElement" placeholder='Type @ and tag sport'></div>
            </td>
          </tr>
        </table>
        <MentionComponent target={mentionTarget} dataSource={statusData} fields={fields}></MentionComponent>
      </div>);
}
ReactDOM.render(<App />, document.getElementById('sample'));
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App (){
  let mentionTarget: string = '#mentionElement';
  // define the data with category
  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 }
  ];
  // map the groupBy field with Category column
  const fields = { value: 'Status', disabled: 'State' };

  return (
      <div id='mention_default'>
        <table>
          <tr>
            <td>
              <label id="comment">Comments</label>
              <div id="mentionElement" placeholder='Type @ and tag sport' ></div>
            </td>
          </tr>
        </table>
        <MentionComponent target={mentionTarget} dataSource={statusData} fields={fields} ></MentionComponent>
      </div>
  );
}

ReactDOM.render(<App />, document.getElementById('sample'));

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.