Value Binding in React MultiSelect Dropdown

Value binding in the MultiSelect control associates data values with each list item, enabling efficient management and retrieval of selected values. The component supports flexible binding for both primitive data types and complex objects.

Primitive Data Types

The MultiSelect provides flexible binding for primitive data types such as strings and numbers. Bind local arrays, remote data sources, or customize binding to meet specific requirements. Set the value of primitive data using the value property.

Supported primitive data types:

• String
• Number
• Boolean
• Null

The following example demonstrates preselecting values with primitive data types.

[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 array of string
    constructor(props) {
        super(props);
        this.records = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7", "Item 8", "Item 9", "Item 10", "Item 11", "Item 12", "Item 13", "Item 14", "Item 15"]
    }
    fields = { text: 'text', value: 'id' };
    value = ["Item 1", "Item 2"];

    render() {
        return (
            // specifies the tag for render the DropDownList component
            <MultiSelectComponent id="datas" dataSource={this.records} value={this.value} placeholder="e.g. Item 1" allowFiltering={false} popupHeight="200px" >
            </MultiSelectComponent>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));

index.tsx

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

export default class App extends React.Component<{}, {}> {
  // maps the appropriate column to fields property
  private fields: object = { text: 'text', value: 'id' };

  // define the array of string
  private records: { [key: string]: Object }[] = [];
  private value: number[] | string[] = ["Item 1", "Item 2"];
  // define the array of string
  constructor(props) {
    super(props);
    this.records = Array.from({ length: 150 }, (_, i) => ({
      id: 'id' + (i + 1),
      text: `Item ${i + 1}`,
    }));
  }
  public render() {
    return (
      // specifies the tag for render the DropDownList component
      <MultiSelectComponent id="datas" dataSource={this.records} value={this.value} placeholder="e.g. Item 1" allowFiltering={false} popupHeight="200px" >
      </MultiSelectComponent>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('sample'));

Object Data Types

Object binding in the MultiSelect allows you to bind a dataset of objects. When allowObjectBinding is enabled, the component’s value becomes an object of the same type as the selected item in the value property. This seamlessly binds object arrays from local sources, remote endpoints, or custom implementations.

The following example demonstrates preselecting values with object data types.

[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 array of string
    constructor(props) {
        super(props);
        this.records = Array.from({ length: 150 }, (_, i) => ({
            id: 'id' + (i + 1),
            text: `Item ${i + 1}`,
        }));
    }
    fields = { text: 'text', value: 'id' };
    value = [{ id: 'id1', text: 'Item 1'}, { id: 'id2', text: 'Item 2'}];

    render() {
        return (
            // specifies the tag for render the DropDownList component
            <MultiSelectComponent id="datas" dataSource={this.records} value={this.value} placeholder="e.g. Item 1" allowObjectBinding={true} allowFiltering={false} fields={this.fields} popupHeight="200px" >
            </MultiSelectComponent>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));

index.tsx

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

export default class App extends React.Component<{}, {}> {
  // maps the appropriate column to fields property
  private fields: object = { text: 'text', value: 'id' };

   // define the array of string
   private records: { [key: string]: Object }[] = [];
   private value: object[] = [{ id: 'id1', text: 'Item 1'}, { id: 'id2', text: 'Item 2'}];
   // define the array of string
   constructor(props) {
    super(props);
    this.records = Array.from({ length: 150 }, (_, i) => ({
        id: 'id' + (i + 1),
        text: `Item ${i + 1}`,
    }));
  }
  public render() {
    return (
      // specifies the tag for render the DropDownList component
      <MultiSelectComponent id="datas" dataSource={this.records} value={this.value} placeholder="e.g. Item 1" allowObjectBinding={true} allowFiltering={false} fields={this.fields} popupHeight="200px" >
  </MultiSelectComponent>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('sample'));