Set custom animation for popup mode

17 Feb 20223 minutes to read

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

@using Syncfusion.EJ2.InPlaceEditor;

<div id='container'>
    <table class="table-section">
        <tr>
            <td> Open Animation: </td>
            <td>
                @Html.EJS().DropDownList("openDropDown").DataSource(ViewBag.openAnimateData).Value(ViewBag.textValue).Change("onChange").Placeholder("Select a animate type").PopupHeight("150px").Render()
            </td>
        </tr>
        <tr>
            <td class="sample-td"> Enter your name: </td>
            <td class="sample-td">
                @Html.EJS().InPlaceEditor("element").Mode(RenderMode.Popup).Value(ViewBag.value).PopupSettings(ViewBag.popupSettings).Model(ViewBag.model).Render()
            </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