BuyLog In
Ticket T264673
Visible to All Users

Toast - Show multiple toasts at the same time

created 10 years ago

I'm investigating whether it's possible to display multiple toasts at the same time in a 'stacked way'.

A good example of the behaviour I'm looking for can be found in the following demo: http://demos.telerik.com/kendo-ui/notification/position-stacking
(click the 'show notification' button multiple times)

This question has already bean asked before but it wasn't properly answered (in my opinion): https://www.devexpress.com/Support/Center/Question/Details/Q504061

I experimented a bit with the position element of the dxToast widget but I'm not able to (consistently) display 2 toasts at once: check this example: http://codepen.io/pfranck/pen/NqYmqg

I suspect that DevExtreme doesn't support showing multiple toasts in a stacked way but I wanted to make sure …
If this is the case, are there any plans to support this functionality in the future?

Sign in to comment on this post

Answers approved by DevExpress Support

created 10 years ago (modified 2 years ago)

Hello,

In v22.1 or later you can use the notify method to complete this task. Please refer to the following demo: Toast - Stack

Previous versions:

Currently, dxToast doesn't allow you to show several toasts at the same time. This is expected behavior of this widget.
If you need to show several messages on a page, you can use the dxPopover and dxPopup widgets instead.

See also:
How to use the same dxPopup or another widget on different views

Although there is still no such feature out of the box, you can use the notify(options) overload and dynamically define the position option based on the previous dxToast position. I've attached an example illustrating this idea.

    Show previous comments (14)
    DevExpress Support Team 6 years ago

      Hi,

      Thank you for your feedback. We will take it into account while enhancing our widget.

      Regards,
      Romeo

      ID ID
      ILKER DURU 1 6 years ago

        I solved the problem using the sample code below.

        JavaScript
        function toastTest() {  
    var top = 0;  
    var lastOffset = $(".dx-toast-content").last().offset();  
    if (lastOffset != null) {  
        top = lastOffset.top;  
    }  
    if (top <= 0)  
        top = 20;  
    else {  
        top = window.innerHeight - top;  
        top += 5;  
    }  
    window.DevExpress.ui.notify({  
        message: "Deneme 123",  
        type: "info",  
        displayTime: 10000,  
        height: "auto",  
        width: "auto",  
        closeOnClick: false,  
        hoverStateEnabled: false,  
        minWidth: 500,  
        position: {  
            my: "bottom center",  
            at: "bottom center",  
            of: null,  
            offset: "0 -" + top  
        }  
    });  
}
        M M
        msoylu 5 years ago

          Hello,

          I just wanted to add something İlker's answer. Otherwise it worked perfrect. Thanks for snippet.

          JavaScript
          var top = 0;  
var lastOffset = null;  
var allObjects = $(".dx-toast-content");  

if (allObjects.length > 0) { /* If there is no toast object it fails to find offset and throws exception. */  
    lastOffset = allObjects.last().offset();  
}  

if (lastOffset !== null) {  
    top = lastOffset.top;  
}  
if (top <= 0)  
    top = 20;  
else {  
    top = window.innerHeight - top;  
    top += 5;  
}  

window.DevExpress.ui.notify({  
    message: "Deneme 123",  
    type: "info",  
    displayTime: 10000,  
    height: "auto",  
    width: "auto",  
    closeOnClick: false,  
    hoverStateEnabled: false,  
    minWidth: 500,  
    position: {  
        my: "bottom center",  
        at: "bottom center",  
        of: null,  
        offset: "0 -" + top  
    },  
    show: { /* To prevent when triggered multiple at the same time, it overlaps during show animation. */  
        duration: 0  
    }  
});
          Sign in to comment on this post

          Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

          Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.