Data binding in React Inplace editor component

24 Jan 202321 minutes to read

The Essential JS2 React In-place Editor component can load the data either from local data sources or remote data services using the dataSource property and it supports the data type of an array or DataManager. Also supports different kind of data services such as OData, OData V4, Web API and data formats such as XML, JSON, JSONP with the help of DataManager adaptors.

Local

To bind local data to the Essential JS2 React In-place Editor component, you have to assign a JavaScript array of object or string to the dataSource property. The local data source can also be provided as an instance of the DataManager.

[Class-component]

app.jsx

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;

app.tsx

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]

app.jsx

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;

app.tsx

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

To bind remote data to the Essential JS2 React In-place Editor component, assign service data as an instance of DataManager to the dataSource property. To interact with remote data source, provide the endpoint URL.

OData V4

The OData V4 is an improved version of OData protocols, and the DataManager can also retrieve and consume OData V4 services. To fetch data from the server by using DataManager with the adaptor property configure as ODataV4Adaptor.

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

[Class-component]

app.jsx

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;

app.tsx

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]

app.jsx

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;

app.tsx

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

Data can fetch from the server by using DataManager with the adaptor property configure as WebApiAdaptor.

In the following sample, In-place Editor render a DropDownList component and its dataSource property configured for fetching a data from the server by using WebApiAdaptor with DataManager.

[Class-component]

app.jsx

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;

app.tsx

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]

app.jsx

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;

app.tsx

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;