Custom indication in React Inplace editor component

24 Jan 20237 minutes to read

You can add custom indication to unsaved input value by using the actionSuccess event, when data not submitted to the server.

In this sample, the actionSuccess event configured and the URL property not included. Then submit button clicked, the current editor value saved into input and data sending to server action prevented due to the URL property not configured.

But actionSuccess event will trigger the handler function with null argument values. In handler function data property primaryKey value checked, whether it empty or not. If it is empty custom class, added in the e-value-wrapper element to customize its styles.

To send input value to local, set the URL property as empty.

[Class-component]

app.jsx

import { isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
import './App.css';
class App extends React.Component {
    inplaceEditorObj;
    model = { placeholder: 'Enter some text' };
    actionSuccess(e) {
        const keyVal = 'PrimaryKey';
        const primeKey = e.data[keyVal];
        if (isNOU(primeKey) || primeKey === '') {
            document.querySelector('.e-editable-value').classList.add('e-send-error');
        }
    }
    render() {
        return (<div id='container'>
        <span className="content-title"> Enter your name: </span>
        <InPlaceEditorComponent id='customtextbox' mode='Inline' value='Andrew' model={this.model} actionSuccess={this.actionSuccess = this.actionSuccess.bind(this)}/>
     </div>);
    }
}
export default App;

app.tsx

import { isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
import { ActionEventArgs, InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
import './App.css';

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

  public model = { placeholder: 'Enter some text' };

  public actionSuccess(e: ActionEventArgs): void {
    const keyVal = 'PrimaryKey';
    const primeKey: string = e.data[keyVal];
    if (isNOU(primeKey) || primeKey === '') {
      ((document.querySelector('.e-editable-value') as any)).classList.add('e-send-error');
    }
  }

  public render() {
    return (
    <div id='container'>
        <span className="content-title"> Enter your name: </span>
        <InPlaceEditorComponent id='customtextbox' mode='Inline' value='Andrew' model={this.model} actionSuccess={ this.actionSuccess = this.actionSuccess.bind(this) } />
     </div>
    );
  }
}

export default App;

[Functional-component]

app.jsx

import { isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
import './App.css';
function App() {
    let inplaceEditorObj;
    let model = { placeholder: 'Enter some text' };
    function actionSuccess(e) {
        const keyVal = 'PrimaryKey';
        const primeKey = e.data[keyVal];
        if (isNOU(primeKey) || primeKey === '') {
            document.querySelector('.e-editable-value').classList.add('e-send-error');
        }
    }
    return (<div id='container'>
        <span className="content-title"> Enter your name: </span>
        <InPlaceEditorComponent id='customtextbox' mode='Inline' value='Andrew' model={model} actionSuccess={actionSuccess = actionSuccess.bind(this)}/>
     </div>);
}
export default App;

app.tsx

import { isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
import { ActionEventArgs, InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
import './App.css';

function App () {
  let inplaceEditorObj: InPlaceEditorComponent;

  let model = { placeholder: 'Enter some text' };

  function actionSuccess(e: ActionEventArgs): void {
    const keyVal = 'PrimaryKey';
    const primeKey: string = e.data[keyVal];
    if (isNOU(primeKey) || primeKey === '') {
      ((document.querySelector('.e-editable-value') as any)).classList.add('e-send-error');
    }
  }

    return (
    <div id='container'>
        <span className="content-title"> Enter your name: </span>
        <InPlaceEditorComponent id='customtextbox' mode='Inline' value='Andrew' model={model} actionSuccess={ actionSuccess = actionSuccess.bind(this) } />
     </div>
    );

}

export default App;