Syncfusion AI Assistant

How can I help you?

Data binding in React Inplace editor component

20 Feb 202621 minutes to read

The Essential® JS 2 React In-place Editor component supports data binding from local data sources or remote data services using the dataSource property. It accepts an array or DataManager instance and supports various data services such as OData, OData V4, and Web API with data formats including XML, JSON, and JSONP through DataManager adaptors.

Local

Bind local data to the In-place Editor by assigning a JavaScript array of objects or strings to the dataSource property. You can also provide the local data source as a DataManager instance.

[Class-component]

import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
class App extends React.Component {
    inplaceEditorObj;
    // define the JSON of data
    gameList = [
        { Id: '1', Name: 'Maria Anders' },
        { Id: '2', Name: 'Ana Trujillo' },
        { Id: '3', Name: 'Antonio Moreno' },
        { Id: '4', Name: 'Thomas Hardy' },
        { Id: '5', Name: 'Chiristina Berglund' },
        { Id: '6', Name: 'Hanna Moos' }
    ];
    model = { dataSource: this.gameList, fields: { text: 'Name' }, placeholder: 'Select a customer' };
    render() {
        return (<div id='container'>
        <span className="content-title"> Select customer name: </span>
        <InPlaceEditorComponent ref={(text) => { this.inplaceEditorObj = text; }} id='dropdownelement' mode='Inline' type='DropDownList' value='Maria Anders' model={this.model}/>
     </div>);
    }
}
export default App;
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';

class App extends React.Component {
  public inplaceEditorObj: InPlaceEditorComponent;

 // define the JSON of data
 public gameList: object[] = [
    { Id: '1', Name: 'Maria Anders' },
    { Id: '2', Name: 'Ana Trujillo' },
    { Id: '3', Name: 'Antonio Moreno' },
    { Id: '4', Name: 'Thomas Hardy' },
    { Id: '5', Name: 'Chiristina Berglund' },
    { Id: '6', Name: 'Hanna Moos' }
 ];

  public model = { dataSource: this.gameList, fields: { text: 'Name' }, placeholder: 'Select a customer' };

  public render() {
    return (
    <div id='container'>
        <span className="content-title"> Select customer name: </span>
        <InPlaceEditorComponent ref={(text) => { this.inplaceEditorObj = text! }} id='dropdownelement' mode='Inline' type='DropDownList' value='Maria Anders' model={this.model} />
     </div>
    );
  }
}
export default App;

[Functional-component]

import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
function App() {
    let inplaceEditorObj;
    // define the JSON of data
    let gameList = [
        { Id: '1', Name: 'Maria Anders' },
        { Id: '2', Name: 'Ana Trujillo' },
        { Id: '3', Name: 'Antonio Moreno' },
        { Id: '4', Name: 'Thomas Hardy' },
        { Id: '5', Name: 'Chiristina Berglund' },
        { Id: '6', Name: 'Hanna Moos' }
    ];
    let model = { dataSource: gameList, fields: { text: 'Name' }, placeholder: 'Select a customer' };
    return (<div id='container'>
        <span className="content-title"> Select customer name: </span>
        <InPlaceEditorComponent ref={(text) => { inplaceEditorObj = text; }} id='dropdownelement' mode='Inline' type='DropDownList' value='Maria Anders' model={model}/>
     </div>);
}
export default App;
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';

function App(){
  let inplaceEditorObj: InPlaceEditorComponent;

 // define the JSON of data
 let gameList: object[] = [
    { Id: '1', Name: 'Maria Anders' },
    { Id: '2', Name: 'Ana Trujillo' },
    { Id: '3', Name: 'Antonio Moreno' },
    { Id: '4', Name: 'Thomas Hardy' },
    { Id: '5', Name: 'Chiristina Berglund' },
    { Id: '6', Name: 'Hanna Moos' }
 ];

  let model = { dataSource: gameList, fields: { text: 'Name' }, placeholder: 'Select a customer' };

    return (
    <div id='container'>
        <span className="content-title"> Select customer name: </span>
        <InPlaceEditorComponent ref={(text) => { inplaceEditorObj = text! }} id='dropdownelement' mode='Inline' type='DropDownList' value='Maria Anders' model={model} />
     </div>
    );
}
export default App;

Remote

Bind remote data to the In-place Editor by assigning a DataManager instance to the dataSource property. Provide the endpoint URL to enable communication with the remote data source.

OData V4

OData V4 is an improved version of the OData protocol. The DataManager can retrieve and consume OData V4 services by configuring the adaptor property to ODataV4Adaptor.

In the following sample, the In-place Editor renders a DropDownList component with its dataSource property configured to fetch data from the server using ODataV4Adaptor and DataManager.

[Class-component]

import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
class App extends React.Component {
    query = new Query().from('Customers').select(['ContactName', 'CustomerID']).take(6);
    model = {
        dataSource: new DataManager({
            adaptor: new ODataV4Adaptor,
            crossDomain: true,
            url: 'https://services.odata.org/V4/Northwind/Northwind.svc/'
        }),
        fields: { text: 'ContactName', value: 'CustomerID' },
        placeholder: 'Select a customer',
        query: this.query
    };
    render() {
        return (<div id='container'>
        <span className="content-title"> Select customer name: </span>
        <InPlaceEditorComponent id='dropdownelement' mode='Inline' type='DropDownList' value='Maria Anders' model={this.model}/>
     </div>);
    }
}
export default App;
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';

class App extends React.Component {
  public query: Query = new Query().from('Customers').select(['ContactName', 'CustomerID']).take(6);
  public model = {
        dataSource: new DataManager({
          adaptor: new ODataV4Adaptor,
          crossDomain: true,  
          url: 'https://services.odata.org/V4/Northwind/Northwind.svc/'
        }),
        fields: { text: 'ContactName', value: 'CustomerID' },
        placeholder: 'Select a customer',
        query: this.query
        };

  public render() {
    return (
    <div id='container'>
        <span className="content-title"> Select customer name: </span>
        <InPlaceEditorComponent id='dropdownelement' mode='Inline' type='DropDownList' value='Maria Anders' model={this.model}/>
     </div>
    );
  }
}
export default App;

[Functional-component]

import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
function App() {
    let query = new Query().from('Customers').select(['ContactName', 'CustomerID']).take(6);
    let model = {
        dataSource: new DataManager({
            adaptor: new ODataV4Adaptor,
            crossDomain: true,
            url: 'https://services.odata.org/V4/Northwind/Northwind.svc/'
        }),
        fields: { text: 'ContactName', value: 'CustomerID' },
        placeholder: 'Select a customer',
        query: query
    };
    return (<div id='container'>
        <span className="content-title"> Select customer name: </span>
        <InPlaceEditorComponent id='dropdownelement' mode='Inline' type='DropDownList' value='Maria Anders' model={model}/>
     </div>);
}
export default App;
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';

function App (){
  let query: Query = new Query().from('Customers').select(['ContactName', 'CustomerID']).take(6);
  let model = {
        dataSource: new DataManager({
          adaptor: new ODataV4Adaptor,
          crossDomain: true,  
          url: 'https://services.odata.org/V4/Northwind/Northwind.svc/'
        }),
        fields: { text: 'ContactName', value: 'CustomerID' },
        placeholder: 'Select a customer',
        query: query
        };

    return (
    <div id='container'>
        <span className="content-title"> Select customer name: </span>
        <InPlaceEditorComponent id='dropdownelement' mode='Inline' type='DropDownList' value='Maria Anders' model={model}/>
     </div>
    );
}
export default App;

Web API

Fetch data from the server by using DataManager with the adaptor property configured as WebApiAdaptor.

In the following sample, the In-place Editor renders a DropDownList component with its dataSource property configured to fetch data from the server using WebApiAdaptor and DataManager.

[Class-component]

import { DataManager, Query, ODataV4Adaptor } from '@syncfusion/ej2-data';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
class App extends React.Component {
    model = {
         dataSource: new DataManager({
            url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers',
            adaptor: new ODataV4Adaptor
        }),
        fields: { text: 'ContactName', value: 'CustomerID' },
        query : new Query().select(['ContactName', 'CustomerID']).take(6),
        placeholder: 'Select a customer'
    };
    render() {
        return (<div id='container'>
        <span className="content-title"> Select customer name: </span>
        <InPlaceEditorComponent id='dropdownelement' mode='Inline' type='DropDownList' value='Maria Anders' model={this.model}/>
     </div>);
    }
}
export default App;
import { DataManager, Query, ODataV4Adaptor } from '@syncfusion/ej2-data';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';

class App extends React.Component {
  public model: any = {
    dataSource: new DataManager({
        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers',
        adaptor: new ODataV4Adaptor
    }),
    fields: { text: 'ContactName', value: 'CustomerID' },
    query : new Query().select(['ContactName', 'CustomerID']).take(6),
    placeholder: 'Select a customer'
};

  public render() {
    return (
    <div id='container'>
        <span className="content-title"> Select customer name: </span>
        <InPlaceEditorComponent id='dropdownelement' mode='Inline' type='DropDownList' value='Maria Anders' model={this.model}/>
     </div>
    );
  }
}
export default App;

[Functional-component]

import { DataManager, Query, ODataV4Adaptor } from '@syncfusion/ej2-data';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
function App() {
    let model = {
        dataSource: new DataManager({
            url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers',
            adaptor: new ODataV4Adaptor
        }),
        fields: { text: 'ContactName', value: 'CustomerID' },
        query : new Query().select(['ContactName', 'CustomerID']).take(6),
        placeholder: 'Select a customer'
    };
    return (<div id='container'>
        <span className="content-title"> Select customer name: </span>
        <InPlaceEditorComponent id='dropdownelement' mode='Inline' type='DropDownList' value='Maria Anders' model={model}/>
     </div>);
}
export default App;
import { DataManager, Query, ODataV4Adaptor } from '@syncfusion/ej2-data';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';

function App () {
  let model: any = {
    dataSource: new DataManager({
        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers',
        adaptor: new ODataV4Adaptor
    }),
    fields: { text: 'ContactName', value: 'CustomerID' },
    query : new Query().select(['ContactName', 'CustomerID']).take(6),
    placeholder: 'Select a customer'
};


    return (
    <div id='container'>
        <span className="content-title"> Select customer name: </span>
        <InPlaceEditorComponent id='dropdownelement' mode='Inline' type='DropDownList' value='Maria Anders' model={model}/>
     </div>
    );

}
export default App;