Positions
21 Dec 202224 minutes to read
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
NOTE
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.
<div class="col-lg-12 control-section toast-pos-section">
<div class="control_wrapper" id="toast_pos_target">
<ejs-toast id="toast_pos" title="Matt sent you a friend request" content="You have a new friend request yet to accept" icon="e-laura">
<e-toast-position X="Right" Y="Bottom"></e-toast-position>
</ejs-toast>
<div id="toast_pos_property">
<table style="width: 100%">
<tbody>
<tr>
<td>
<div style="padding:25px 0 0 0;">
<ejs-radiobutton id="dropdownRadio" label="Position" name="toastPos" value="Position" change="checkboxChange2" checked="true"></ejs-radiobutton>
</div>
</td>
<td>
<div style="padding:25px 0 0 0;">
<ejs-radiobutton id="customRedio" label="Custom" name="toastPos" value="Custom" change="checkboxChange3"></ejs-radiobutton>
</div>
</td>
</tr>
<tr>
<td id="dropdownChoose" colspan="2">
<div id="dropdown" style="padding-top:25px;">
<ejs-dropdownlist id="position" dataSource="@ViewBag.data" placeholder="Select a position" index="5" popupHeight="200px" change="valueChange">
<e-dropdownlist-fields text="Value" value="Id"></e-dropdownlist-fields>
</ejs-dropdownlist>
</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;">
<ejs-radiobutton id="radio1" label="Target" name="toast" value="Target" change="checkboxChange"></ejs-radiobutton>
</div>
</td>
<td>
<div style="padding:25px 0 0 0;">
<ejs-radiobutton id="radio2" label="Global" name="toast" value="Global" change="checkboxChange1" checked="true"></ejs-radiobutton>
</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('https://ej2.syncfusion.com/demos/src/toast/resource/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 class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.data = new Position().Positions();
return View();
}
public class Position
{
public string Value { get; set; }
public string Id { get; set; }
public List<Position> Positions()
{
List<Position> position = new List<Position>
{
new Position { Id = "topleft", Value = "Top Left" },
new Position { Id = "topright", Value = "Top Right" },
new Position { Id = "topcenter", Value = "Top Center" },
new Position { Id = "topfullwidth", Value = "Top Full Width" },
new Position { Id = "bottomleft", Value = "Bottom Left" },
new Position { Id = "bottomright", Value = "Bottom Right" },
new Position { Id = "bottomcenter", Value = "Bottom Center" },
new Position { Id = "bottomfullwidth", Value = "Bottom Full Width" }
};
return position;
}
}
}