Disabled Items in React MultiSelect component

21 Feb 202611 minutes to read

The MultiSelect supports enabling or disabling individual items as needed. Map the disabled field from your data source to control item availability. Disabled items cannot be selected. Configure the disabled state mapping using the fields.disabled property.

The following example demonstrates disabling specific states using the disabled field.

[Class-component]

index.jsx

import { MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
    // define the data with category
    tagData = [
        { "Text": "Add to KB", "State": false },
        { "Text": "Crisis", "State": false },
        { "Text": "Enhancement", "State": true },
        { "Text": "Presale", "State": false },
        { "Text": "Needs Approval", "State": false },
        { "Text": "Approved", "State": true },
        { "Text": "Internal Issue", "State": true },
        { "Text": "Breaking Issue", "State": false },
        { "Text": "New Feature", "State": true },
        { "Text": "New Component", "State": false },
        { "Text": "Mobile Issue", "State": false }
    ];
    // map the groupBy field with Category column
    fields = { value: 'Text', disabled: 'State' };
    render() {
        return (
        // specifies the tag for render the MultiSelect component
        <MultiSelectComponent id="atcelement" fields={this.fields} dataSource={this.tagData} placeholder="Select Tags"/>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));

index.tsx

import { MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

export default class App extends React.Component<{}, {}> {
    // define the data with category
    private tagData: { [key: string]: Object }[] = [
        { "Text": "Add to KB", "State": false },
        { "Text": "Crisis", "State": false },
        { "Text": "Enhancement", "State": true },
        { "Text": "Presale", "State": false },
        { "Text": "Needs Approval", "State": false },
        { "Text": "Approved", "State": true },
        { "Text": "Internal Issue", "State": true },
        { "Text": "Breaking Issue", "State": false },
        { "Text": "New Feature", "State": true },
        { "Text": "New Component", "State": false },
        { "Text": "Mobile Issue", "State": false }
    ];

    // map the groupBy field with Category column
    private fields: object = { value: 'Text', disabled: 'State' };

    public render() {
        return (
             // specifies the tag for render the MultiSelect component
            <MultiSelectComponent id="atcelement" fields={this.fields} dataSource={this.tagData} placeholder="Select Tags" />
        );
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));

[Functional-component]

index.jsx

import { MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
    // define the data with category
    let tagData = [
        { "Text": "Add to KB", "State": false },
        { "Text": "Crisis", "State": false },
        { "Text": "Enhancement", "State": true },
        { "Text": "Presale", "State": false },
        { "Text": "Needs Approval", "State": false },
        { "Text": "Approved", "State": true },
        { "Text": "Internal Issue", "State": true },
        { "Text": "Breaking Issue", "State": false },
        { "Text": "New Feature", "State": true },
        { "Text": "New Component", "State": false },
        { "Text": "Mobile Issue", "State": false }
    ];
    // map the groupBy field with Category column
    const fields = { value: 'Text', disabled: 'State' };
    return (
    // specifies the tag for render the MultiSelect component
    <MultiSelectComponent id="atcelement" fields={fields} dataSource={tagData} placeholder="Select Tags"/>);
}
ReactDOM.render(<App />, document.getElementById('sample'));

index.tsx

import { MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function App() {
    // define the data with category
    let tagData: { [key: string]: Object }[] = [
        { "Text": "Add to KB", "State": false },
        { "Text": "Crisis", "State": false },
        { "Text": "Enhancement", "State": true },
        { "Text": "Presale", "State": false },
        { "Text": "Needs Approval", "State": false },
        { "Text": "Approved", "State": true },
        { "Text": "Internal Issue", "State": true },
        { "Text": "Breaking Issue", "State": false },
        { "Text": "New Feature", "State": true },
        { "Text": "New Component", "State": false },
        { "Text": "Mobile Issue", "State": false }
    ];

    // map the groupBy field with Category column
    const fields: object = { value: 'Text', disabled: 'State' };
    return (
    // specifies the tag for render the MultiSelect component
        <MultiSelectComponent id="atcelement" fields={fields} dataSource={tagData} placeholder="Select Tags" />
    );
}
ReactDOM.render(<App />, document.getElementById('sample'));

Disable Item Method

Use the disableItem method to dynamically disable individual items. To disable multiple items, iterate this method through your items list or array. The disabled state updates in the dataSource when items are disabled. If a selected item is disabled, its selection is automatically cleared.

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.

Disable the Component

To disable the entire component, set the enabled property to false.