Syncfusion AI Assistant

How can I help you?

Localization in React Inplace editor component

20 Feb 202624 minutes to read

Localization

Localize the default text content of the In-place Editor for different cultures by setting the locale property. The following keys are localized based on the specified culture.

Locale key en-US (default)
save Close
cancel Cancel
loadingText Loading…
editIcon Click to edit
editAreaClick Click to edit
editAreaDoubleClick Double click to edit

Load translation objects in your application using the load function of the L10n class. In the following sample, the In-place Editor is configured with the French culture and customized tooltip text.

[Class-component]

import { L10n } from '@syncfusion/ej2-base';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
class App extends React.Component {
    inplaceEditorObj;
    dropdownObj;
    editableOnData = ['Click', 'DblClick', 'EditIconClick'];
    model = { placeholder: 'Enter some text' };
    onChange(e) {
        const editType = e.itemData.value;
        this.inplaceEditorObj.editableOn = editType;
        this.inplaceEditorObj.dataBind();
    }
    // set locale culture to In-place Editor
    componentWillMount() {
        L10n.load({
            'fr-BE': {
                'inplace-editor': {
                    'save': 'enregistrer',
                    'cancel': 'Annuler',
                    'loadingText': 'Chargement...',
                    'editIcon': 'Cliquez pour éditer',
                    'editAreaClick': 'Cliquez pour éditer',
                    'editAreaDoubleClick': 'Double-cliquez pour éditer'
                }
            }
        });
    }
    render() {
        return (<div id='container'>
            <table className="table-section">
              <tbody>
                <tr>
                    <td> EditableOn: </td>
                    <td>
                        <DropDownListComponent id='dropDown' dataSource={this.editableOnData} width='auto' value='Click' change={this.onChange = this.onChange.bind(this)} placeholder='Select edit type'/>
                    </td>
                </tr>
                <tr>
                    <td className="sample-td"> Enter your name: </td>
                    <td className="sample-td">
                        <InPlaceEditorComponent ref={(text) => { this.inplaceEditorObj = text; }} id='element' mode='Inline' value='Andrew' locale='fr-BE' model={this.model}/>
                    </td>
                </tr>
              </tbody>
            </table>
        </div>);
    }
}
export default App;
import { L10n } from '@syncfusion/ej2-base';
import { ChangeEventArgs, DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { EditableType, InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';

class App extends React.Component<{},{}> {
  public inplaceEditorObj: InPlaceEditorComponent;
  public dropdownObj: DropDownListComponent;

  public editableOnData = ['Click', 'DblClick', 'EditIconClick'];
  public model = { placeholder: 'Enter some text' };

  public onChange(e: ChangeEventArgs): void {
    const editType: EditableType = e.itemData.value as EditableType;
    this.inplaceEditorObj.editableOn = editType;
    this.inplaceEditorObj.dataBind();
  }

  // set locale culture to In-place Editor
    public componentWillMount() {
        L10n.load({
            'fr-BE': {
                'inplace-editor': {
                  'save': 'enregistrer',
                  'cancel': 'Annuler',
                  'loadingText': 'Chargement...',
                  'editIcon': 'Cliquez pour éditer',
                  'editAreaClick': 'Cliquez pour éditer',
                  'editAreaDoubleClick': 'Double-cliquez pour éditer'
                }
            }
        });
    }

  public render() {
    return (
        <div id='container'>
            <table className="table-section">
              <tbody>
                <tr>
                    <td> EditableOn: </td>
                    <td>
                        <DropDownListComponent id='dropDown' dataSource= {this.editableOnData} width='auto' value='Click' change={ this.onChange=this.onChange.bind(this) } placeholder='Select edit type' />
                    </td>
                </tr>
                <tr>
                    <td  className="sample-td"> Enter your name: </td>
                    <td  className="sample-td">
                        <InPlaceEditorComponent ref={(text) => { this.inplaceEditorObj = text! }} id='element' mode='Inline' value='Andrew' locale='fr-BE' model={this.model} />
                    </td>
                </tr>
              </tbody>
            </table>
        </div>
    );
  }
}

export default App;

[Functional-component]

import { L10n } from '@syncfusion/ej2-base';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
function App() {
    React.useEffect(() => {
        // set locale culture to In-place Editor
        L10n.load({
            'fr-BE': {
                'inplace-editor': {
                    'save': 'enregistrer',
                    'cancel': 'Annuler',
                    'loadingText': 'Chargement...',
                    'editIcon': 'Cliquez pour éditer',
                    'editAreaClick': 'Cliquez pour éditer',
                    'editAreaDoubleClick': 'Double-cliquez pour éditer'
                }
            }
        });
    });
    let inplaceEditorObj;
    let dropdownObj;
    let editableOnData = ['Click', 'DblClick', 'EditIconClick'];
    let model = { placeholder: 'Enter some text' };
    function onChange(e) {
        const editType = e.itemData.value;
        inplaceEditorObj.editableOn = editType;
        inplaceEditorObj.dataBind();
    }
    return (<div id='container'>
            <table className="table-section">
              <tbody>
                <tr>
                    <td> EditableOn: </td>
                    <td>
                        <DropDownListComponent id='dropDown' dataSource={editableOnData} width='auto' value='Click' change={onChange = onChange.bind(this)} placeholder='Select edit type'/>
                    </td>
                </tr>
                <tr>
                    <td className="sample-td"> Enter your name: </td>
                    <td className="sample-td">
                        <InPlaceEditorComponent ref={(text) => { inplaceEditorObj = text; }} id='element' mode='Inline' value='Andrew' locale='fr-BE' model={model}/>
                    </td>
                </tr>
              </tbody>
            </table>
        </div>);
}
export default App;
import { L10n } from '@syncfusion/ej2-base';
import { ChangeEventArgs, DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { EditableType, InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';

function App() {
  React.useEffect(() => {
    // set locale culture to In-place Editor
      L10n.load({
            'fr-BE': {
                'inplace-editor': {
                  'save': 'enregistrer',
                  'cancel': 'Annuler',
                  'loadingText': 'Chargement...',
                  'editIcon': 'Cliquez pour éditer',
                  'editAreaClick': 'Cliquez pour éditer',
                  'editAreaDoubleClick': 'Double-cliquez pour éditer'
                }
            }
        });
    });
  let inplaceEditorObj: InPlaceEditorComponent;
  let editableOnData = ['Click', 'DblClick', 'EditIconClick'];
  let model = { placeholder: 'Enter some text' };

  function onChange(e: ChangeEventArgs): void {
    const editType: EditableType = e.itemData.value as EditableType;
    inplaceEditorObj.editableOn = editType;
    inplaceEditorObj.dataBind();
  }

    return (
        <div id='container'>
            <table className="table-section">
              <tbody>
                <tr>
                    <td> EditableOn: </td>
                    <td>
                        <DropDownListComponent id='dropDown' dataSource= {editableOnData} width='auto' value='Click' change={onChange.bind(this) } placeholder='Select edit type' />
                    </td>
                </tr>
                <tr>
                    <td  className="sample-td"> Enter your name: </td>
                    <td  className="sample-td">
                        <InPlaceEditorComponent ref={(text) => { inplaceEditorObj = text! }} id='element' mode='Inline' value='Andrew' locale='fr-BE' model={model} />
                    </td>
                </tr>
              </tbody>
            </table>
        </div>
    );

}

export default App;

Right to left

Control the text direction of the In-place Editor using the enableRtl property. For languages and writing systems that require right-to-left (RTL) orientation, such as Arabic and Hebrew, enable this property.

The RTL direction is not automatically determined by the locale property and must be set explicitly.

[Class-component]

import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
class App extends React.Component {
    render() {
        return (<div id='container'>
            <span className="content-title"> Enter your name: </span>
            <InPlaceEditorComponent id='rtlelement' mode='Inline' value='Andrew' enableRtl={true}/>
        </div>);
    }
}
export default App;
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';

class App extends React.Component<{},{}> {
  public render() {
    return (
        <div id='container'>
            <span className="content-title"> Enter your name: </span>
            <InPlaceEditorComponent id='rtlelement' mode='Inline' value='Andrew' enableRtl={true} />
        </div>
    );
  }
}

export default App;

[Functional-component]

import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
function App() {
    return (<div id='container'>
            <span className="content-title"> Enter your name: </span>
            <InPlaceEditorComponent id='rtlelement' mode='Inline' value='Andrew' enableRtl={true}/>
        </div>);
}
export default App;
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';

function App () {

    return (
        <div id='container'>
            <span className="content-title"> Enter your name: </span>
            <InPlaceEditorComponent id='rtlelement' mode='Inline' value='Andrew' enableRtl={true} />
        </div>
    );
}

export default App;

Format

Format the displayed values by configuring the format property of the In-place Editor’s child component through the model property. The following components support format customization:

[Class-component]

import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
class App extends React.Component {
    value = new Date('11/23/2018');
    model = { placeholder: 'Select date', format: 'yyyy-MM-dd' };
    render() {
        return (<div id='container'>
            <span className="content-title"> Select date: </span>
            <InPlaceEditorComponent id='element' type='Date' value={this.value} 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 value = new Date('11/23/2018');
  public model = { placeholder: 'Select date', format: 'yyyy-MM-dd' };
  public render() {
    return (
        <div id='container'>
            <span className="content-title"> Select date: </span>
            <InPlaceEditorComponent id='element' type='Date' value={this.value} model={this.model} />
        </div>
    );
  }
}

export default App;

[Functional-component]

import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
function App() {
    const value = new Date('11/23/2018');
    const model = { placeholder: 'Select date', format: 'yyyy-MM-dd' };
    return (<div id='container'>
            <span className="content-title"> Select date: </span>
            <InPlaceEditorComponent id='element' type='Date' value={value} model={model}/>
        </div>);
}
export default App;
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';

function App () {
  const value : Date = new Date('11/23/2018');
  const model : object = { placeholder: 'Select date', format: 'yyyy-MM-dd' };

    return (
        <div id='container'>
            <span className="content-title"> Select date: </span>
            <InPlaceEditorComponent id='element' type='Date' value={value} model={model} />
        </div>
    );
  
}

export default App;