Value binding in DropDownList

14 Mar 20248 minutes to read

Value binding in the DropDown List control allows you to associate data values with each list item. This facilitates managing and retrieving selected values efficiently. The DropDown List component provides flexibility in binding both primitive data types and complex objects.

Primitive Data Types

The DropDown List control provides flexible binding capabilities for primitive data types like strings and numbers. You can effortlessly bind local primitive data arrays, fetch and bind data from remote sources, and even custom data binding to suit specific requirements. Bind the value of primitive data to the value property of the DropDown List.

Primitive data types include:

  • String
  • Number
  • Boolean
  • Null

The following sample shows the example for preselect values for primitive data type

[Class-component]

import { DropDownListComponent } 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"];
    }
    fields = { text: 'text', value: 'id' };
    value = "item 5";

    render() {
        return (
            // specifies the tag for render the DropDownList component
            <DropDownListComponent id="datas" dataSource={this.records} placeholder="e.g. Item 1" value={this.value} allowFiltering={false} popupHeight="200px" >
            </DropDownListComponent>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));
import { DropDownListComponent } 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: string[] = [];

   
   
   // 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"];
  }
  private value: string = "item 1";

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

Object Data Types

In the DropDown List control, object binding allows you to bind to a dataset of objects. When allowObjectBinding is enabled, the value of the control will be an object of the same type as the selected item in the value property. This feature seamlessly binds arrays of objects, whether sourced locally, retrieved from remote endpoints, or customized to suit specific application needs.

The following sample shows the example for preselect values for object data type

[Class-component]

import { DropDownListComponent } 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 = { text: 'Item 1', id: 'id1'};

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

   
   
   // define the array of string
   constructor(props) {
    super(props);
    this.records = Array.from({ length: 150 }, (_, i) => ({
        id: 'id' + (i + 1),
        text: `Item ${i + 1}`,
    }));
  }
  private value: { [key: string]: Object } = { text: 'Item 1', id: 'id1'}

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