Search results

Set custom animation for popup mode in ASP.NET MVC In-place Editor control

20 Apr 2021 / 1 minute 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.

razor
controller.cs
Copied to clipboard
@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>
Copied to clipboard
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