Custom animation in EJ2 JavaScript In place editor control

19 Apr 20234 minutes to read

In popup mode, the In-place Editor rendered with the Essential JS 2 Tooltip control. 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 DropDownList control change event.

index.js
index.html
ej.base.enableRipple(true);

var openAnimateData = ['None', 'FadeIn', 'FadeZoomIn', 'ZoomIn'];

var openDropObj = new ej.dropdowns.DropDownList({
    value: 'ZoomIn',
    dataSource: openAnimateData,
    placeholder: 'Select a animate type',
    popupHeight: '150px',
    change: function(e) {
        editObj.popupSettings.model.animation.open.effect = e.value;
        editObj.dataBind();
    }
});
openDropObj.appendTo('#openDropDown');

//Initialize In-place Editor control
var editObj = new ej.inplaceeditor.InPlaceEditor({
    mode: 'Popup',
    value: 'Andrew',
    model: {
        placeholder: 'Enter some text'
    },
    popupSettings: {
        model: {
            animation: {
                open: { effect: 'ZoomIn', duration: 1000, delay: 0 }
            }
        }
    }
});
//Render initialized In-place Editor control
editObj.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 In-place Editor</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript In-place Editor Control">
    <meta name="author" content="Syncfusion">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/material.css" rel="stylesheet">
    <link href="index.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <table class="table-section">
            <tbody><tr>
                <td> Open Animation: </td>
                <td>
                    <div id="openDropDown"></div>
                </td>
            </tr>
            <tr>
                <td class="sample-td"> Enter your name: </td>
                <td class="sample-td">
                    <div id="element"></div>
                </td>
            </tr>
        </tbody></table>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>