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. Image for the cookie policy date

Unable to set toast position or show more than once

I am trying to set the X position of a toast notification.  The documentation shows that this can be set using the following:

<ToastPosition X="Center"></ToastPosition>

However, if I try to do this directly in the HTML (on a server-side Blazor project), it shows the following error message:

The name 'Center' does not exist in the current context

And if I try to set it directly in code via the controls reference like so:

toastSuccess.Position = "Center"

It gives the following error:

Cannot implicitly convert type 'string' to 'Syncfusion.EJS2.Blazor.Notifications.ToastPosition'

However, if I write one of the following:

<ToastPosition X=@(new ToastPosition(){ X = "Center" }))></ToastPosition>
toastSuccess.Position = new ToastPosition() { X = "Center" };

Then no error message is reported and the project compiles/runs but the toast won't show.  If I completely remove all code trying to set the position, then the toast will successfully show in the upper right hand corner of the window.  However, once it disappears, if I click the button to open it again, it won't open and the following error is reported in the Google Chrome console:

e.match is not a function
TypeError: e.match is not a function
    at https://cdn.syncfusion.com/ej2/17.2.34/dist/ej2.min.js:1:11837
    at le (https://cdn.syncfusion.com/ej2/17.2.34/dist/ej2.min.js:1:13181)
    at Object.Db.compile.e.compile (https://cdn.syncfusion.com/ej2/17.2.34/dist/ej2.min.js:1:477637)
    at ce (https://cdn.syncfusion.com/ej2/17.2.34/dist/ej2.min.js:1:13424)
    at t.fetchEle (https://cdn.syncfusion.com/ej2/17.2.34/dist/ej2.min.js:1:7523367)
    at t.setContent (https://cdn.syncfusion.com/ej2/17.2.34/dist/ej2.min.js:1:7528933)
    at t.personalizeToast (https://cdn.syncfusion.com/ej2/17.2.34/dist/ej2.min.js:1:7525455)
    at t.show (https://cdn.syncfusion.com/ej2/17.2.34/dist/ej2.min.js:1:7521287)
    at call (https://cdn.syncfusion.com/ej2/17.2.34/dist/ejs.interop.min.js:1:7115)
    at https://localhost:44361/_framework/blazor.server.js:8:21434

If I refresh the page, then clicking the button shows the toast message again, but only on the first click and all subsequent clicks show the above error message.


1 Reply

PM Pandiyaraj Muniyandi Syncfusion Team July 30, 2019 10:35 AM UTC

Hi Dominick, 

Greetings from Syncfusion support.  
 
Query 1: I am trying to set the X position of a toast notification.  The documentation shows that this can be set using the following 

We have validated the reported issue and able reproduce from our end, we confirmed “Position property has object type instead of specific type in Toast” as a defect from our end and logged a report for the same. We will validate and include the fix in upcoming nuget patch release. 
You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link, 

Also we suggest you to use the following workaround until then the fix included. Create and bind the X, Y position value from code behind as mentioned below. 

<EjsToast @ref="Toast1Obj" Title="Matt sent you a friend request" Content=@ToastContent> 
    <ToastPosition X=@XPos Y=@YPos></ToastPosition> 
</EjsToast> 

@code{ 
    public string XPos = "Center"; 
    public string YPos = "Top"; 
} 
 
Query 2: However, once it disappears, if I click the button to open it again, it won't open and the following error is reported in the Google Chrome console 
 
We have tried to replicate the issue with the given code and the following ways, but we were not able to reproduce the issue at our end. The toast notification is showed every time on click. 
  • Binding position value from code behind
  • Without configure a position property
We have prepared sample for your reference, get it from below link  

Still if you face same issue, please share your code or modify the above sample to reproduce your issue and revert it to us. This will help us provide a solution.
   
 
Regards, 
Pandiyaraj M 


Loader.
Live Chat Icon For mobile
Up arrow icon