Set custom animation for popup mode

6 Dec 20243 minutes to read

In popup mode, the In-place Editor rendered with the Syncfusion® ASP.NET Core 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 Syncfusion® ASP.NET Core DropDownList control change event.

<div id='container'>
    <table class="table-section">
        <tr>
            <td> Open Animation: </td>
            <td>
                <ejs-dropdownlist id="openDropDown" dataSource="ViewBag.openAnimateData" change="onChange" value="ViewBag.textValue" placeholder="Select a animate type" popupHeight="150px"></ejs-dropdownlist>
            </td>
        </tr>
        <tr>
            <td class="sample-td"> Enter your name: </td>
            <td class="sample-td">
                <ejs-inplaceeditor id="element" mode="Popup" model="ViewBag.model" value="ViewBag.value" popupSettings="ViewBag.popupSettings">
                </ejs-inplaceeditor>
            </td>
        </tr>
    </table>
</div>
<style>
    #container {
        display: flex;
        justify-content: center;
    }

    .table-section {
        margin: 0 auto;
    }

    tr td:first-child {
        text-align: right;
        padding-right: 20px;
    }

    .sample-td {
        padding-top: 10px;
        min-width: 230px;
        height: 100px;
    }
</style>
<script>
    function onChange(e) {
        var editObj = document.getElementById('element').ej2_instances[0];
        editObj.popupSettings.model.animation.open.effect = e.value;
        editObj.dataBind();
    }
</script>
public class HomeController : Controller
{
    public ActionResult Index()
    {
        ViewBag.model = new { placeholder = "Enter some text" };
        ViewBag.openAnimateData = new string[] { "None", "FadeIn", "FadeZoomIn", "ZoomIn" };
        ViewBag.textValue = "ZoomIn";
        ViewBag.value = "Andrew";
        ViewBag.popupSettings = new Syncfusion.EJ2.InPlaceEditor.InPlaceEditorPopupSettings { Model = new { animation = new { open = new { effect = "ZoomIn", duration = 1000, delay = 0 } } } };
        return View();
    }
}

The output will be as follows.

custom-animation