Unexpected behavior using HideAsync() with key parameter

Hello,


The code in the attachment is used to better understand use of the ContentTemplate and Key parameters. I am using 19.4.0.53.

The logic is:


1. User clicks the button whose onclick event invokes the ShowToast() method.


2. The ShowToast() method invokes the component's ShowAsync() method, waits three seconds

and invokes the component's HideAsync() method.


3. The OnOpen handler updates the ToastModel to set the ContentTemplate and Key parameters.


4. The Opened and Closed handlers simply displays the Key parameter.


Observations:

1. When the Key parameter is static between invocations of the Toast: [see code fragment (1)]

a. The first time the button is clicked the Toast is displayed correctly and, after three

seconds, is hidden. The debug output confirms the Key parameter.

b. Subsequent clicks of the button display the Toast but it is never hidden.


2. When the value of Key changes between invocations of the Toast: [see code fragment (2)]

a. Every time the button is clicked, the Toast is displayed for three seconds

and then hidden.


3. A side issue...The ContentTemplate property can be defined on the control but seems to have

no effect. The only way to inject the ContentTemplate is through the ToastModel in the OnOpenHandler

method as shown in the code.


Question:

1. Is it really a requirement to change the Key parameter between invocation of the Toast?

2. Is the only method for setting the ContentTemplate parameter is through the ToastModel?


Peter



Attachment: Toast_Issue_f59fb04.zip


6 Replies

BS Buvana Sathasivam Syncfusion Team March 18, 2022 03:45 AM UTC

Hi Peter, 
 
Currently, we are validating your reported query with high priority. We will update you the further details on March 21, 2022. 
 
Regards, 
Buvana S 



BS Buvana Sathasivam Syncfusion Team March 21, 2022 03:48 PM UTC

Hi Peter, 
 
Query #1: “Is it really a requirement to change the Key parameter between invocation of the Toast?” 
Yes. There is a need to change the Key parameters for each SfToast. Because we have hidden a specific toast based on Key parameters, If you wish to hide all toast components, you can pass the ‘All’ parameter to HideAsync public method. The Timeout property is used to control how long the toast component is displayed. If you wish to hide each toast for 3000 milliseconds, you can set the Timeout property to 3000 milliseconds. 


Query #2: “Is the only method for setting the ContentTemplate parameter is through the ToastModel?” 
No, you should be able to achieve your requirement with the ToastTemplates tag as well. In this template, you can define toast content and title using class names like toast-content, toast-title etc. Please find the below toast template demo sample for your reference. 

Please check if the above sample meets your requirements. If not, can you please share more detailed information about your requirements? 

Regards, 
Buvana S 



PE Peter March 22, 2022 02:21 AM UTC

Thank you for the quick and, as always, professional response.


Query 1:

Understood. I was playing with the idea of using the same SfToast component to display toasts with different content and observed the behavior. In reality, I would have to track each toast so I can selectively hide them which, after more thought, would require discrete Key values.


Query 2:

My question was too general. Let me try to be specific. As observed, the component exposes the ContentTemplate parameter though seems to ignore its value.


As a demonstration, using the core originally provided, add ContentTemplate=@template to SfToast definition AND comment out the args.Options.ContentTemplate = template; in the OnOpenHandler() method. The toast is displayed with no content.


Examining the args.Options field when using a breakpoint in the OpenedHandler() method shows that both Content and ContentTemplate are null (which I assume are their default values).


2022-03-21_15-17-25.png


So, to restate my question more specifically: Why is the ContentTemplate parameter ignored?


The following are the code changes described above:

<SfToast    @ref=@ToastObj
            Timeout=0
            ContentTemplate=@template
            >
    <ToastEvents Opened=@OpenedHandler
                    OnOpen=@OnOpenHandler
                    Closed=@ClosedHandler
                    >
    </ToastEvents>
</SfToast>


===AND===


private void OnOpenHandler(ToastBeforeOpenArgs args)
{
Debug.WriteLine("OnOpenHandler method invoked.");

//args.Options.ContentTemplate = template;

// (1): Use the following code to implement a static Key
args.Options.Key = toastKey;

// (2): Use the following code to implement a dynamic Key
//args.Options.Key = ++toastKey;
}





BS Buvana Sathasivam Syncfusion Team March 22, 2022 05:56 PM UTC

Hi Peter, 
You will be able to insert the template using the ContentTemplate property when passing it as a parameter of the ShowAsync public method. It will be used to create different toast content on each toast. Can you please find the below code and sample for your reference? 
  
private async Task ShowToast() { 
    await this.ToastObj.ShowAsync(new ToastModel { ContentTemplate = template }); 
} 


Please let us know if you have any concerns. 

Regards, 
Buvana S 



PE Peter March 23, 2022 03:47 AM UTC

Thanks for the response and the suggestion to set the ContentTemplate through a ToastModel. I used this method in the code submitted with this issue and, yes, it does work.


I will assume that the ContentTemplate parameter exposed by the SfToast component is actually not functional per my last post and lack of a direct response. 


I truly appreciate Syncfusion's support of the community. I report my observations/questions as a way of "giving back". Your support staff is very helpful and, seemingly, appreciative of my comments and I am appreciative of your help.


Peter



BS Buvana Sathasivam Syncfusion Team March 23, 2022 01:18 PM UTC

Thank you for your valuable feedback. Yes, as per your assumption ContentTemplate works on when use with Toast Model or Toast instance.  We are glad to assist you. 


Loader.
Up arrow icon