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.

razor
HomeController.cs
@using Syncfusion.EJ2
@using Syncfusion.EJ2.DropDowns
@using EJ2MVCSampleBrowser.Models

<div class="col-lg-12 control-section toast-pos-section">
                    <div class="control_wrapper" id="toast_pos_target">
                      @Html.EJS().Toast("toast_pos").Title("Matt sent you a friend request").Content("You have a new friend request yet to accept").Icon("e-laura").Position(p => p.X("Right").Y("Bottom")).Render()
                        <div id="toast_pos_property">
                            <table style="width: 100%">
                                <tbody>
                                    <tr>
                                        <td>
                                            <div style="padding:25px 0 0 0;">
                                                @Html.EJS().RadioButton("dropdownRadio").Label("Position").Name("toastPos").Value("Position").Change("checkboxChange2").Checked(true).Render()
                                             </div>
                                        </td>
                                        <td>
                                            <div style="padding:25px 0 0 0;">
                                                @Html.EJS().RadioButton("customRedio").Label("Custom").Name("toastPos").Value("Custom").Change("checkboxChange3").Render()
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td id="dropdownChoose" colspan="2">
                                            <div id="dropdown" style="padding-top:25px;">
                                                @Html.EJS().DropDownList("position").Placeholder("Select a position").PopupHeight("200px").Index(5).DataSource(
                    (IEnumerable<Pos>)ViewBag.data).Change("valueChange").Fields(new DropDownListFieldSettings { Text = "Value", Value = "Id" }).Render()
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2" id="customChoose" style="display: none">
                                            <form id="formId" class="form-horizontal">
                                                <div class="e-row">
                                                    <div class="e-float-input">
                                                        <input class="e-input" id="xPos" name="Digits" value="50" digits="true" data-digits-message="Please enter digits only." required="">
                                                        <span class="e-float-line"></span>
                                                        <label class="e-float-text" for="Digits">X Position</label>
                                                    </div>
                                                </div>
                                                <div class="e-row">
                                                    <div class="e-float-input">
                                                        <input class="e-input" id="yPos" name="Digits" value="50" digits="true" data-digits-message="Please enter digits only." required="">
                                                        <span class="e-float-line"></span>
                                                        <label class="e-float-text" for="Digits">Y Position</label>
                                                    </div>
                                                </div>
                                            </form>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div style="padding:25px 0 0 0;">
                                                @Html.EJS().RadioButton("radio1").Label("Target").Name("toast").Value("Target").Change("checkboxChange").Render()
                                            </div>
                                        </td>
                                        <td>
                                            <div style="padding:25px 0 0 0;">
                                                @Html.EJS().RadioButton("radio2").Label("Global").Name("toast").Value("Global").Change("checkboxChange1").Checked(true).Render()
                                             </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <div id="toast_btn" style="padding-top: 25px">
                                <button class="e-btn e-control" id="show_Toast" style="margin-right: 15px"> Show Toast </button>
                                <button class="e-btn e-control" id="hideTosat"> Hide All </button>
                            </div>
                        </div>
                    </div>
                </div>
                <script type="text/javascript">
                    setTimeout(
                        () => {
                            var toastObj = document.getElementById('toast_pos').ej2_instances[0];
                            toastObj.target = document.body;
                            toastObj.show();
                        }, 200);
                    function toastShow() {
                        setTimeout(
                            () => {
                                var toastObj = document.getElementById('toast_pos').ej2_instances[0];
                                toastObj.show();
                            }, 200);
                    }

                    var btnEle = document.getElementById('show_Toast');
                    btnEle.onclick = function () {
                        if (customFlag) {
                            setcustomPosValue();
                        }
                        var toastObj = document.getElementById('toast_pos').ej2_instances[0];
                        toastObj.show();
                    };

                    document.getElementById('hideTosat').onclick = function () {
                        var toastObj = document.getElementById('toast_pos').ej2_instances[0];
                        toastObj.hide('All');
                    };

                    document.onclick = function (e) {
                        var toastObj = document.getElementById('toast_pos').ej2_instances[0];
                        if (e.target !== btnEle && toastObj.target === document.body) {
                            toastObj.hide('All');
                        }
                    };

                    var customFlag = false;

                    function checkboxChange(e) {
                        var toastObj = document.getElementById('toast_pos').ej2_instances[0];
                        if (this.checked) {
                            toastObj.hide('All');
                            toastObj.target = document.getElementById('toast_pos_target');
                            toastShow(1000);
                        }
                    }

                    function checkboxChange1(e) {
                        var toastObj = document.getElementById('toast_pos').ej2_instances[0];
                        if (this.checked) {
                            toastObj.hide('All');
                            toastObj.target = document.body;
                            toastShow(1000);
                        }
                    }

                    function checkboxChange2(e) {
                        var toastObj = document.getElementById('toast_pos').ej2_instances[0];
                        var listObj = document.getElementById('position').ej2_instances[0];
                        if (this.checked) {
                            toastObj.hide('All');
                            document.getElementById('dropdownChoose').style.display = 'table-cell';
                            document.getElementById('customChoose').style.display = 'none';
                            setToastPosValue(listObj.value.toString()); customFlag = false; toastShow(1000);
                        }
                    }

                    function checkboxChange3(e) {
                        var toastObj = document.getElementById('toast_pos').ej2_instances[0];
                        if (this.checked) {
                            toastObj.hide('All');
                            document.getElementById('dropdownChoose').style.display = 'none';
                            document.getElementById('customChoose').style.display = 'table-cell';
                            setcustomPosValue(); customFlag = true; toastShow(1000);
                        }
                    }

                    //Setting Toast Custom Position
                    function setcustomPosValue() {
                        var toastObj = document.getElementById('toast_pos').ej2_instances[0];
                        var initialWid = toastObj.width.toString();
                        toastObj.width = initialWid;
                        toastObj.position.X = parseInt((document.getElementById('xPos')).value, 10);
                        toastObj.position.Y = parseInt((document.getElementById('yPos')).value, 10);
                    }

                    //Setting Toast Position
                    function setToastPosValue(value) {
                        var toastObj = document.getElementById('toast_pos').ej2_instances[0];
                        var initialWid = toastObj.width.toString();
                        toastObj.width = initialWid;
                        switch (value) {
                            case 'topleft':
                                toastObj.position.X = 'Left'; toastObj.position.Y = 'Top'; break;
                            case 'topright':
                                toastObj.position.X = 'Right'; toastObj.position.Y = 'Top'; break;
                            case 'topcenter':
                                toastObj.position.X = 'Center'; toastObj.position.Y = 'Top'; break;
                            case 'topfullwidth':
                                toastObj.width = '100%'; toastObj.position.X = 'Center'; toastObj.position.Y = 'Top'; break;
                            case 'bottomleft':
                                toastObj.position.X = 'Left'; toastObj.position.Y = 'Bottom'; break;
                            case 'bottomright':
                                toastObj.position.X = 'Right'; toastObj.position.Y = 'Bottom'; break;
                            case 'bottomcenter':
                                toastObj.position.X = 'Center'; toastObj.position.Y = 'Bottom'; break;
                            case 'bottomfullwidth':
                                toastObj.width = '100%'; toastObj.position.X = 'Center'; toastObj.position.Y = 'Bottom'; break;
                        }
                    }

                    function valueChange(e) {
                        var toastObj = document.getElementById('toast_pos').ej2_instances[0];
                        toastObj.hide('All'); setToastPosValue(e.value.toString()); toastShow(1000);
                    }
                </script>
                <style>
                    .toast-pos-section #toast_pos_property {
                        height: 500px;
                        border: none;
                        margin: auto;
                    }

                    #toast_pos_property td {
                        width: 50%;
                    }

                    .e-toast-icon.e-laura.e-icons {
                        border-radius: 50%;
                        background-image: url('./../css/Toast/laura.png');
                        background-repeat: no-repeat;
                        background-size: cover;
                        height: 50px !important;
                        width: 100px !important;
                        background-size: 50px 50px;
                        margin: 0;
                    }


                    @@media (min-width: 740px) {
                        #toast_pos_property {
                            width: 450px;
                        }
                    }
                </style>
public ActionResult Toast()
{
    ViewBag.data = new Pos().Positions();
    return View();
}
 public class Pos
        {
            public string Value { get; set; }
            public string Id { get; set; }
            public List<Pos> Positions()
            {
                List<Pos> position = new List<Pos>();
                position.Add(new Pos { Id="topleft", Value = "Top Left" });
                position.Add(new Pos { Id="topright", Value = "Top Right" });
                position.Add(new Pos { Id="topcenter", Value = "Top Center" });
                position.Add(new Pos { Id="topfullwidth", Value = "Top Full Width" });
                position.Add(new Pos { Id="bottomleft", Value = "Bottom Left" });
                position.Add(new Pos { Id="bottomright", Value = "Bottom Right" });
                position.Add(new Pos { Id="bottomcenter", Value = "Bottom Center" });
                position.Add(new Pos { Id="bottomfullwidth", Value = "Bottom Full Width" });
                return position;
            }
        }

See Also