We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Toast - Error or Success

Thread ID:





140649 Oct 30,2018 03:19 PM UTC Nov 1,2018 11:31 AM UTC React - EJ 2 3
Tags: Toast
DeBao Chua
Asked On October 30, 2018 03:19 PM UTC

Hi expert,

I cannot find the example - source codes on Syncfusion so I am wondering if it is possible to toggle by displaying "Error" or "Success" (toast) by clicking "Submit button".

Let's say if I have form validator and try to click Submit, it will display error messages (Toast). If all values are not empty, it will show success.

However for my case, it shows two toast like Error then Success. I am wondering if I can only show success instead of error? I try to hide error toast but it will hide 1 second then success toast appear. I don't like it. Any advice?

What am I missing?

public toastObj: ToastComponent; --> it should show either success or error

public toasts: { [key: string]: Object }[] = [
{ cssClass: 'e-toast-success', icon: 'e-success toast-icons', title: 'Success', content: 'Success.' }
        { cssClass: 'e-toast-danger', icon: 'e-error toast-icons', title: 'Error', content: 'Error.' }

// if all values are clear, it will show success message
private handleOnSubmit = (values: VeMaContract) => {
     document.getElementById("hideToast").style.display = 'none'; // hide error toast but not working
     this.props.saveContract(values); // save contract

// this is submit button --> it will always display error toast
private handleOnValidation = () => {
private onclose(e: ToastCloseArgs): void {
const btnEleHide: HTMLElement = document.getElementById('hideToast');
(e.toastContainer.childElementCount === 0) ? btnEleHide.style.display = 'none' : btnEleHide.style.display = 'inline-block';

private onbeforeOpen(): void {
const btnEleHide: HTMLElement = document.getElementById('hideToast');
btnEleHide.style.display = 'inline-block';

Christopher Issac Sunder K [Syncfusion]
Replied On October 31, 2018 05:45 PM UTC

Hi DeBao Chua, 
Thank you for contacting Syncfusion support. 
We have validated this scenario and as per the Toast control behavior, it is just created on the page and only a show and hide is required to make it display or not display. So we have to show and hide this based on our use case only.  At initially we can hide this toast globally on before every action and then show or hide it. 

  contactSubmit(e) { 
    if (this.handleValidation()) { 
    } else { 

Please check the demo sample and let us know if you have further queries. 


DeBao Chua
Replied On October 31, 2018 05:50 PM UTC

Hi Christo,

Thanks for the source codes and explaination about Toast component. I get the picture clearly. :)

Yes it looks great - works perfectly. Thank you!

Deepa Loganathan [Syncfusion]
Replied On November 1, 2018 11:31 AM UTC

Hi DeBao, 
Most welcome. Please let us know if you have any further queries. 
Deepa L. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon