Server Actions in React InPlaceEditor component

02 Dec 2022 / 4 minutes to read

By passing In-place Editor component value to the server, the primaryKey property value must required otherwise action not performed for remote data.

If the URL property value is empty, data passing will handled at local and also the actionSuccess event will trigger with null as argument value.

The following arguments are passed to the server when submit actions perform.

Arguments	Explanations
value	For processing edited value, like DB value updating.
primaryKey	For value mapping to the server, like selecting DB.
name	For field mapping to the server, like DB column field mapping.

Find the following sample server codes for defining models and controller functions to configure processing data.

  public class SubmitModel {
      public string Name { get; set; }
      public string PrimaryKey { get; set; }
      public string Value { get; set; }
  }

public IEnumerable<SubmitModel> UpdateData([FromBody]SubmitModel value) {
  // User can process data
  return value;
}

When Server actions successfully done, the actionSuccess event will be fired with returned server data.
If the server is not responding, the actionFailure event will be fired with data, but value not updated in the Editor.

In the following sample, the actionSuccess event will trigger once the value submitted successfully into the server. In this sample, both actionSuccess and actionFailure were configured and resulted value will be converted to chips.

[Class-component]

Source

Preview

App.jsx

App.tsx

import { Inject, InPlaceEditorComponent, MultiSelect } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.serviceUrl = 'https://ej2services.syncfusion.com/development/web-services/api/Editor/UpdateData';
        this.frameWorkList = ['Android', 'JavaScript', 'jQuery', 'TypeScript', 'Angular', 'React', 'Vue', 'Ionic'];
        this.value = ['JavaScript', 'jQuery'];
        this.model = { mode: 'Box', dataSource: this.frameWorkList, placeholder: 'Select skill' };
    }
    chipOnCreate() {
        this.inplaceEditorObj.element.querySelector('.e-editable-value').innerHTML = this.chipCreation(this.inplaceEditorObj.value, true);
    }
    onActionSuccess(e) {
        e.value = this.chipCreation(e.value.split(','), true);
    }
    onActionFailure(e) {
        e.value = this.chipCreation(e.value.split(','), false);
    }
    chipCreation(data, isSuccess) {
        let value = '<div class="e-chip-list">';
        [].slice.call(data).forEach((val) => {
            value += '<div class="e-chip"> <span class="e-chip-text' + (!isSuccess ? 'e-highlight' : '') + '"> ' + val + '</span></div>';
        });
        value += '</div>';
        return value;
    }
    create() {
        this.chipOnCreate();
    }
    render() {
        return (<div id='container'>
      <span className="content-title"> Select frameworks: </span>
      <InPlaceEditorComponent ref={(text) => { this.inplaceEditorObj = text; }} id='multiselect' data-underline='false' mode='Inline' type='MultiSelect' value={this.value} name='skill' url={this.serviceUrl} primaryKey='FrameWork' adaptor='UrlAdaptor' model={this.model} actionSuccess={this.onActionSuccess = this.onActionSuccess.bind(this)} actionFailure={this.onActionFailure = this.onActionFailure.bind(this)} created={this.create = this.create.bind(this)}>
      <Inject services={[MultiSelect]}/>
      </InPlaceEditorComponent>
  </div>);
    }
}
export default App;

import { ActionEventArgs, Inject, InPlaceEditorComponent, MultiSelect } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';

class App extends React.Component<{},{}> {
  public inplaceEditorObj: InPlaceEditorComponent;
  
  public serviceUrl = 'https://ej2services.syncfusion.com/development/web-services/api/Editor/UpdateData';
  public frameWorkList = ['Android', 'JavaScript', 'jQuery', 'TypeScript', 'Angular', 'React', 'Vue', 'Ionic'];
  public value = ['JavaScript', 'jQuery'];
  public model = { mode: 'Box', dataSource: this.frameWorkList, placeholder: 'Select skill' };

  public chipOnCreate(): void {
(this.inplaceEditorObj as any).element.querySelector('.e-editable-value').innerHTML = this.chipCreation((this.inplaceEditorObj.value as string[]), true);
  }

  public onActionSuccess(e: ActionEventArgs): void {
e.value = this.chipCreation(e.value.split(','), true);
  }

  public onActionFailure(e: ActionEventArgs): void {
e.value = this.chipCreation(e.value.split(','), false);
  }

  public chipCreation(data: string[], isSuccess: boolean): string {
let value: string = '<div class="e-chip-list">';
[].slice.call(data).forEach((val: string) => {
    value += '<div class="e-chip"> <span class="e-chip-text' + (!isSuccess ? 'e-highlight' : '') + '"> ' + val + '</span></div>';
});
value += '</div>';
return value;
  }

  public create(): void {
this.chipOnCreate();
  }

  public render() {
return (
  <div id='container'>
      <span className="content-title"> Select frameworks: </span>
      <InPlaceEditorComponent ref={(text) => { this.inplaceEditorObj = text! }} id='multiselect' data-underline='false' mode='Inline' type='MultiSelect' value={this.value} name='skill' url={this.serviceUrl} primaryKey='FrameWork' adaptor='UrlAdaptor' model={this.model} actionSuccess={ this.onActionSuccess=this.onActionSuccess.bind(this) } actionFailure={ this.onActionFailure=this.onActionFailure.bind(this) } created={this.create=this.create.bind(this)} >
      <Inject services={[MultiSelect]} />
      </InPlaceEditorComponent>
  </div>
);
  }
}

export default App;

[Functional-component]

Source

Preview

App.jsx

App.tsx

import { Inject, InPlaceEditorComponent, MultiSelect } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
function App() {
    const inplaceEditorObj;
    const serviceUrl = 'https://ej2services.syncfusion.com/development/web-services/api/Editor/UpdateData';
    const frameWorkList = ['Android', 'JavaScript', 'jQuery', 'TypeScript', 'Angular', 'React', 'Vue', 'Ionic'];
    const value = ['JavaScript', 'jQuery'];
    const model = { mode: 'Box', dataSource: frameWorkList, placeholder: 'Select skill' };
    function chipOnCreate() {
        inplaceEditorObj.element.querySelector('.e-editable-value').innerHTML = chipCreation(inplaceEditorObj.value, true);
    }
    function onActionSuccess(e) {
        e.value = chipCreation(e.value.split(','), true);
    }
    function onActionFailure(e) {
        e.value = chipCreation(e.value.split(','), false);
    }
    function chipCreation(data, isSuccess) {
        let value = '<div class="e-chip-list">';
        [].slice.call(data).forEach((val) => {
            value += '<div class="e-chip"> <span class="e-chip-text' + (!isSuccess ? 'e-highlight' : '') + '"> ' + val + '</span></div>';
        });
        value += '</div>';
        return value;
    }
    function create() {
        chipOnCreate();
    }
    return (<div id='container'>
      <span className="content-title"> Select frameworks: </span>
      <InPlaceEditorComponent ref={(text) => { inplaceEditorObj = text; }} id='multiselect' data-underline='false' mode='Inline' type='MultiSelect' value={value} name='skill' url={serviceUrl} primaryKey='FrameWork' adaptor='UrlAdaptor' model={model} actionSuccess={onActionSuccess = onActionSuccess.bind(this)} actionFailure={onActionFailure = onActionFailure.bind(this)} created={create = create.bind(this)}>
      <Inject services={[MultiSelect]}/>
      </InPlaceEditorComponent>
  </div>);
}
export default App;

import { ActionEventArgs, Inject, InPlaceEditorComponent, MultiSelect } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';

function App () {
  const inplaceEditorObj: InPlaceEditorComponent;
  
  const serviceUrl : string = 'https://ej2services.syncfusion.com/development/web-services/api/Editor/UpdateData';
  const frameWorkList : string[] = ['Android', 'JavaScript', 'jQuery', 'TypeScript', 'Angular', 'React', 'Vue', 'Ionic'];
  const value : string[]= ['JavaScript', 'jQuery'];
  const model : object = { mode: 'Box', dataSource: frameWorkList, placeholder: 'Select skill' };

  function chipOnCreate(): void {
(inplaceEditorObj as any).element.querySelector('.e-editable-value').innerHTML = chipCreation((inplaceEditorObj.value as string[]), true);
  }

  function onActionSuccess(e: ActionEventArgs): void {
e.value = chipCreation(e.value.split(','), true);
  }

  function onActionFailure(e: ActionEventArgs): void {
e.value = chipCreation(e.value.split(','), false);
  }

  function chipCreation(data: string[], isSuccess: boolean): string {
let value: string = '<div class="e-chip-list">';
[].slice.call(data).forEach((val: string) => {
    value += '<div class="e-chip"> <span class="e-chip-text' + (!isSuccess ? 'e-highlight' : '') + '"> ' + val + '</span></div>';
});
value += '</div>';
return value;
  }

  function create(): void {
chipOnCreate();
  }

return (
  <div id='container'>
      <span className="content-title"> Select frameworks: </span>
      <InPlaceEditorComponent ref={(text) => { inplaceEditorObj = text! }} id='multiselect' data-underline='false' mode='Inline' type='MultiSelect' value={value} name='skill' url={serviceUrl} primaryKey='FrameWork' adaptor='UrlAdaptor' model={model} actionSuccess={ onActionSuccess=onActionSuccess.bind(this) } actionFailure={ onActionFailure=onActionFailure.bind(this) } created={create=create.bind(this)} >
      <Inject services={[MultiSelect]} />
      </InPlaceEditorComponent>
  </div>
);
  }
}

export default App;

Server Actions in React InPlaceEditor component

See Also