Search results

Positions

The toast position can be updated based on predefined positions or customizable positions. The predefined position combinations are updated in the X and Y position properties.

Predefined

X Positions

  • Left
  • Center
  • Right

Y Positions

  • Top
  • Bottom

In multiple toast display, the new toast position will not be updated on dynamic change of property values until the old toast messages removed. The toast occupies full width when you set the width to ‘100%’, so the X positions will not affect the changes when the width is ‘100%‘.

Custom

Custom X and Y positions can be given as pixels/numbers/percentage. The number value is considered as pixels based on the top and left values updated in the toast.

@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.Buttons
@using Syncfusion.EJ2.Blazor.Notifications
@using Syncfusion.EJ2.Blazor.DropDowns
@using Syncfusion.EJ2.Blazor.Inputs
@using System.Threading

<EjsToast @ref="ToastObj" Target="@ToastTarget" Title="Matt sent you a friend request" Height="@Height" Width="@Width" Content="@ToastContent">
    <ToastPosition X="@PositionX" Y="@PositionY"></ToastPosition>
</EjsToast>
<div class="col-lg-12 col-sm-12 col-md-12 center">
    <div id="toastBtnDefault" style="margin: auto; text-align: center">
        <EjsButton @onclick="ShowOnClick"> Show Toast </EjsButton>
        <EjsButton @onclick="HideOnClick"> Hide All </EjsButton>
    </div>
</div>
<div class='row' style="padding-top: 20px" id="toast_pos_target">
    <div id="toast_pos"> </div>
    <div id="toast_pos_property">
        <table style="width: 100%">
            <tr>
                <td>
                    <div style='padding:25px 0 0 0;'>
                        <EjsRadioButton Label="Position" Name="toastPos" Value="Position" Checked="true" ValueChange="CheckboxChange2"></EjsRadioButton>
                    </div>
                </td>
                <td>
                    <div style='padding:25px 0 0 0;'>
                        <EjsRadioButton Label="Custom" Name="toastPos" Value="Custom" ValueChange="CheckboxChange3"></EjsRadioButton>
                    </div>
                </td>
            </tr>
            <tr>
                <td id="dropdownChoose" colspan="2" style="display:@DispVal2;">
                    <EjsDropDownList @ref="ListObj" Index="5" Placeholder="Select a position" PopupHeight="200PX" DataSource="@ddlData" TValue="string">
                        <DropDownListEvents ValueChange="DDLvalueChange" TValue="string"></DropDownListEvents>
                        <DropDownListFieldSettings text="id" value="text"></DropDownListFieldSettings>
                    </EjsDropDownList>
                </td>
            </tr>

            <tr>
                <td colspan="2" id="customChoose" style="display:@DispVal1">
                    <form id="formId" class="form-horizontal">
                        <div class='e-row'>
                            <EjsTextBox @ref="TextXpos" Value="50" Placeholder="X Position" FloatLabelType="@FloatLabelType.Auto"></EjsTextBox>
                        </div>
                        <div class='e-row'>
                            <EjsTextBox @ref="TextYpos" Value="50" Placeholder="Y Position" FloatLabelType="@FloatLabelType.Auto"></EjsTextBox>
                        </div>
                    </form>
                </td>
            </tr>
            <tr>
                <td>
                    <div style='padding:25px 0 0 0;'>
                        <EjsRadioButton Label="Target" Name="toast" Value="Target" ValueChange="@CheckboxChange"></EjsRadioButton>
                    </div>
                </td>
                <td>
                    <div style='padding:25px 0 0 0;'>
                        <EjsRadioButton Label="Global" Name="toast" Value="Global" Checked="true" ValueChange="@CheckboxChange1"></EjsRadioButton>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</div>

<style>
    #toast_default .e-meeting::before {
        content: "\e705";
        font-size: 17px;
    }

    #toast_pos_property {
        width: 250px;
    }

    #toast_pos_property td {
        width: 50%;
    }

    #toast_pos_target {
        margin: 50px 200px;
    }
</style>

@code {
    EjsToast ToastObj;
    EjsDropDownList<string> ListObj;
    EjsTextBox TextXpos;
    EjsTextBox TextYpos;

    public class DDLfields
    {
        public string id { get; set; }
        public string text { get; set; }
    }

    List<DDLfields> ddlData = new List<DDLfields>()
{
        new DDLfields(){ id= "topleft", text= "Top Left" },
        new DDLfields(){ id= "topright", text= "Top Right" },
        new DDLfields(){ id= "topcenter", text= "Top Center" },
        new DDLfields(){ id= "bottomleft", text= "Bottom Left" },
        new DDLfields(){ id= "bottomright", text= "Bottom Right" },
        new DDLfields(){ id= "bottomcenter", text= "Bottom Center" }
    };

    // default values for component initialization.
    public string ToastContent = "You have a new friend request yet to accept";
    public string PositionX = "Center";
    public string PositionY = "Bottom";
    public string ToastTarget = null;
    public string Width = "300";
    public string Height = "auto";
    public bool CustomFlag;
    public string DispVal1 { get; set; } = "none";
    public string DispVal2 { get; set; } = "";
    private void DDLvalueChange(ChangeEventArgs<string> e)
    {
        ToastObj.Hide("All");
        setToastPosValue(e.Value.ToString());
        toastShow(1000);
    }

    private void setToastPosValue(string value)
    {
        switch (value)
        {

            case "Top Left":
                PositionX = "Left";
                PositionY = "Top";
                break;

            case "Top Right":
                PositionX = "Right";
                PositionY = "Top";
                break;

            case "Top Center":
                PositionX = "Center";
                PositionY = "Top";
                break;

            case "Bottom Left":
                PositionX = "Left";
                PositionY = "Bottom";
                break;

            case "Bottom Right":
                PositionX = "Right";
                PositionY = "Bottom";
                break;

            case "Bottom Center":
                PositionX = "Center";
                PositionY = "Bottom";
                break;
        }
    }

    private void CheckboxChange(Syncfusion.EJ2.Blazor.Buttons.ChangeArgs e)
    {
        if (e.Value == "Target")
        {
            ToastObj.Hide("All");
            ToastTarget = "#toast_pos_target";
            StateHasChanged();
            toastShow(1000);
        }
    }

    private void CheckboxChange1(Syncfusion.EJ2.Blazor.Buttons.ChangeArgs e)
    {
        if (e.Value == "Global")
        {
            ToastObj.Hide("All");
            ToastTarget = null;
            StateHasChanged();
            toastShow(1000);
        }
    }

    private void CheckboxChange2(Syncfusion.EJ2.Blazor.Buttons.ChangeArgs e)
    {
        if (e.Value == "Position")
        {
            ToastObj.Hide("All");
            DispVal2 = "table-cell";
            DispVal1 = "none";
            setToastPosValue(ListObj.Value.ToString());
            CustomFlag = false;
            toastShow(1000);
        }
    }

    private void CheckboxChange3(Syncfusion.EJ2.Blazor.Buttons.ChangeArgs e)
    {
        if (e.Value == "Custom")
        {
            ToastObj.Hide("All");
            DispVal1 = "table-cell";
            DispVal2 = "none";
            SetcustomPosValue();
            CustomFlag = true;
            toastShow(1000);
        }
    }

    //Setting Toast Custom Position
    private void SetcustomPosValue()
    {
        PositionX = TextXpos.Value;
        PositionY = TextYpos.Value;
    }

    private void toastShow(int timeDelay)
    {
        Thread.Sleep(timeDelay);
        ToastObj.Show();
    }

    private void ShowOnClick()
    {
        if (CustomFlag)
        {
            SetcustomPosValue();
        }
        ToastObj.Show();
    }

    private void HideOnClick()
    {
        ToastObj.Hide("All");
    }

}
Contents
Contents