Search results

Set custom animation for popup mode

In popup mode, the In-place Editor rendered with the Blazor 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 example, popup animation can be customized by passing animation effect using the Model property and the dynamic animation effect changes configured from the Blazor DropDownList component ValueChange event.

@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.InPlaceEditor
@using Syncfusion.EJ2.Blazor.DropDowns
@using Syncfusion.EJ2.Blazor.Inputs

<div id='container'>
    <table class="table-section">
        <tr>
            <td> Open Animation: </td>
            <td>
                <EjsDropDownList PopupHeight="150px" Fields="DropDownFields" Value="DropdownValue" Placeholder="Select a animate type" DataSource="OpenAnimateData">
                    <DropDownListEvents ValueChange="OnChange" TValue="string"></DropDownListEvents>
                </EjsDropDownList>
            </td>
        </tr>
        <tr>
            <td class="sample-td"> Enter your name: </td>
            <td class="sample-td">
                <EjsInPlaceEditor Mode="RenderMode.Popup" Type="InputType.Text" PopupSettings="InplacePopup" Value="TextValue" Model="TModel">
                </EjsInPlaceEditor>
            </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>

@code {
    public List<object> OpenAnimateData = new List<object>
{
        new { text= "None" },
        new { text= "FadeIn" },
        new { text= "FadeZoomIn" },
        new { text= "ZoomIn" }
    };

    public DropDownListFieldSettings DropDownFields = new DropDownListFieldSettings()
    {
        Text = "text"
    };

    public string TextValue = "Andrew";
    public string DropdownValue = "ZoomIn";

    public TextBoxModel TModel = new TextBoxModel()
    {
        Placeholder = "Enter some text"
    };

    public void OnChange(ChangeEventArgs<string> args)
    {
        InplacePopup = new InPlaceEditorPopupSettings()
        {
            Model = new
            {
                animation = new
                {
                    open = new
                    {
                        effect = args.Value,
                        duration = 1000,
                        delay = 0
                    }
                }
            }
        };
    }

    public InPlaceEditorPopupSettings InplacePopup = new InPlaceEditorPopupSettings()
    {
        Model = new
        {
            animation = new
            {
                open = new
                {
                    effect = "ZoomIn",
                    duration = 1000,
                    delay = 0
                }
            }
        }
    };
}