Search results

Set custom Animation for popup mode in React InPlaceEditor component

25 Jan 2023 / 2 minutes to read

In popup mode, the In-place Editor rendered with the Essential JS 2 React Tooltip component. You can use tooltip properties and events to customize the popup by configure properties into the model property inside the popupSettings API.

In the following sample, popup animation can be customized by passing animation effect using the model property and the dynamic animation effect changes configured from the Essential JS 2 React DropDownList component change event.

[Class-component]

Source
Preview
App.jsx
App.tsx
Copied to clipboard
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
import './App.css';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.openAnimateData = ['None', 'FadeIn', 'FadeZoomIn', 'ZoomIn'];
        this.model = { placeholder: 'Enter some text' };
        this.popupSettings = { model: { animation: { open: { effect: 'ZoomIn', duration: 1000, delay: 0 } } } };
    }
    onChange(e) {
        this.inplaceEditorObj.popupSettings.model.animation.open.effect = e.value;
        this.inplaceEditorObj.dataBind();
    }
    render() {
        return (<div id='container'>
        <table className="table-section">
          <tbody>
            <tr>
                <td> Open Animation: </td>
                <td>
                  <DropDownListComponent id='openDropDown' value='ZoomIn' dataSource={this.openAnimateData} placeholder='Select a animate type' popupHeight='150px' change={this.onChange = this.onChange.bind(this)}/>
                </td>
            </tr>
            <tr>
                <td className="sample-td"> Enter your name: </td>
                <td className="sample-td">
                  <InPlaceEditorComponent ref={(text) => { this.inplaceEditorObj = text; }} id='element' mode='Popup' value='Andrew' model={this.model} popupSettings={this.popupSettings}/>
                </td>
            </tr>
          </tbody>
        </table>
     </div>);
    }
}
export default App;
Copied to clipboard
import { ChangeEventArgs, DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
import './App.css';

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

  public openAnimateData = ['None', 'FadeIn', 'FadeZoomIn', 'ZoomIn'];
  public model = { placeholder: 'Enter some text' };
  public popupSettings = { model: { animation: { open: { effect: 'ZoomIn', duration: 1000, delay: 0 } } } };

  public onChange(e: ChangeEventArgs): void {
    (this.inplaceEditorObj as any).popupSettings.model.animation.open.effect = e.value;
    this.inplaceEditorObj.dataBind();
  }

  public render() {
    return (
    <div id='container'>
        <table className="table-section">
          <tbody>
            <tr>
                <td> Open Animation: </td>
                <td>
                  <DropDownListComponent id='openDropDown' value='ZoomIn' dataSource= {this.openAnimateData} placeholder='Select a animate type' popupHeight='150px' change={ this.onChange=this.onChange.bind(this) } />
                </td>
            </tr>
            <tr>
                <td  className="sample-td"> Enter your name: </td>
                <td  className="sample-td">
                  <InPlaceEditorComponent ref={(text) => { this.inplaceEditorObj = text! }} id='element' mode='Popup' value='Andrew' model={this.model} popupSettings={this.popupSettings} />
                </td>
            </tr>
          </tbody>
        </table>
     </div>
    );
  }
}

export default App;

[Functional-component]

Source
Preview
App.jsx
App.tsx
Copied to clipboard
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
import './App.css';
function App() {
    let inplaceEditorObj;
    let dropdownObj;
    let openAnimateData = ['None', 'FadeIn', 'FadeZoomIn', 'ZoomIn'];
    let model = { placeholder: 'Enter some text' };
    let popupSettings = { model: { animation: { open: { effect: 'ZoomIn', duration: 1000, delay: 0 } } } };
    function onChange(e) {
        inplaceEditorObj.popupSettings.model.animation.open.effect = e.value;
        inplaceEditorObj.dataBind();
    }
    return (<div id='container'>
        <table className="table-section">
          <tbody>
            <tr>
                <td> Open Animation: </td>
                <td>
                  <DropDownListComponent id='openDropDown' value='ZoomIn' dataSource={openAnimateData} placeholder='Select a animate type' popupHeight='150px' change={onChange = onChange.bind(this)}/>
                </td>
            </tr>
            <tr>
                <td className="sample-td"> Enter your name: </td>
                <td className="sample-td">
                  <InPlaceEditorComponent ref={(text) => { inplaceEditorObj = text; }} id='element' mode='Popup' value='Andrew' model={model} popupSettings={popupSettings}/>
                </td>
            </tr>
          </tbody>
        </table>
     </div>);
}
export default App;
Copied to clipboard
import { ChangeEventArgs, DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
import './App.css';

function App () {
  let inplaceEditorObj: InPlaceEditorComponent;
  let dropdownObj: DropDownListComponent;

  let openAnimateData = ['None', 'FadeIn', 'FadeZoomIn', 'ZoomIn'];
  let model = { placeholder: 'Enter some text' };
  let popupSettings = { model: { animation: { open: { effect: 'ZoomIn', duration: 1000, delay: 0 } } } };

  function onChange(e: ChangeEventArgs): void {
    (inplaceEditorObj as any).popupSettings.model.animation.open.effect = e.value;
    inplaceEditorObj.dataBind();
  }

    return (
    <div id='container'>
        <table className="table-section">
          <tbody>
            <tr>
                <td> Open Animation: </td>
                <td>
                  <DropDownListComponent id='openDropDown' value='ZoomIn' dataSource= {openAnimateData} placeholder='Select a animate type' popupHeight='150px' change={ onChange=onChange.bind(this) } />
                </td>
            </tr>
            <tr>
                <td  className="sample-td"> Enter your name: </td>
                <td  className="sample-td">
                  <InPlaceEditorComponent ref={(text) => { inplaceEditorObj = text! }} id='element' mode='Popup' value='Andrew' model={model} popupSettings={popupSettings} />
                </td>
            </tr>
          </tbody>
        </table>
     </div>
    );

}

export default App;