1. Home
  2. Forum
  3. Blazor
  4. Shared Component's Toast is not display on parent Component

Shared Component's Toast is not display on parent Component

Hi

I want to call the Toast from the Shared Component but It does not display. It shows afterwards if any other event occured.

Parent Component Code

<MessageBox @ref="myToast" messageType="@messageType"></MessageBox>


@code {

    public string ToastContent { get; set; } = "";
    public MessageBox.MessageType messageType { get; set; }
    MessageBox myToast;

public async Task DeleteCountry(long CountryId)
    {
        var country = countryList.First(c => c.CountryId == CountryId);
        var result = await http.DeleteAsync(apiPath + "/" + CountryId);
        string Message = "Record Successfully Deleted !!!";
        if (result.StatusCode == HttpStatusCode.NotFound)
        {
            Message = "No such Country found to Delete Country";
        }
        else if (result.StatusCode == HttpStatusCode.BadRequest)
        {
            Message = result.ReasonPhrase;
        }
        else if (result.StatusCode == HttpStatusCode.OK)
        {
            await LoadCountryList();
            grid.Refresh();

//Here I want to call the message as per the given MessageType
            messageType = MessageBox.MessageType.Delete;
            await myToast.ShowMessage();
        }
}


---------------------------------------------------------------------------------------

Child Component Code

<SfToast @ref="@ToastObj" Title="@ToastTitle" NewestOnTop="true" ShowProgressBar="true" ShowCloseButton="true" TimeOut=3000 Content="@ToastContent">
    <ToastPosition X="Center"></ToastPosition>
</SfToast>

@code {



    public SfToast ToastObj { get; set; } = new SfToast();

    [Parameter]
    public string ToastTitle { get; set; } = "eBiz";

    [Parameter]
    public string ToastContent { get; set; } = "";

    [Parameter]
    public MessageType messageType { get; set; }

    public enum MessageType
    {        Save,
        Delete,
        Error
    }

    public async Task ShowMessage()
    {
        if (ToastContent == "")
        {
            switch (messageType)
            {
                case MessageType.Save:
                    ToastContent = "Record Successfully Saved";
                    break;
                case MessageType.Delete:
                    ToastContent = "Record Successfully Deleted";
                    break;
                case MessageType.Error:
                    ToastContent = "Error Occured... Please contact Administrator";
                    break;
            }
        }
        this.ToastContent = ToastContent;
        await Task.Delay(100);
        await this.ToastObj.Show();
    }
}


Please help in this matter.

7 Replies
IS Indrajith Srinivasan Syncfusion Team April 15, 2020 02:22 PM UTC

Hi Salimkhan, 
 
Greetings from Syncfusion Support, 
 
We have validated the share code blocks. The default enum value takes the initial value hence the MessageType is not received as updated at first. It is updated correctly from the next time. To resolve this issue, manually pass the assigned MessageType to the Show method of SfToast and display the content in SfToast based on it.  
 
We have prepared a sample with a shared code block by achieving your requirements.
Sample: https://www.syncfusion.com/downloads/support/forum/153330/ze/Blazor_toast-1259626034 
 
Can you please check the above sample and let us know if it meets your requirements? 
 
Regards,
Indrajith 


SP Salimkhan Pathan April 15, 2020 05:00 PM UTC

Hi Indrajith Srinivasan

Thanks for your reply. But the problem is not resolved. I have attached the Video and razor components page to get the idea of error.

It includes 3 errors.

1) Toast Message does not show even delete function executed. It get called inappropriate way.
2) Required Field Validator does not show red border around textbox and invoked OnValidSubmit even the required field is blank.
3) When I go to AddCountry Page and I press Cancel button, it redirected to ViewCountry Page but the Grid does not show and in this case if I press Add Country button nothing happen and it shows error when I inspect with F12 in browser.

Need to know

4) I am unable to change the background color of the SfCard as well. How will I do it?
5) Do we have equivalent of Panel Control in syncfusion?

I have attached the required things along with the message.

Thanks in advance.

Attachment: SyncFusionQueryData_abed1604.zip

IS Indrajith Srinivasan Syncfusion Team April 16, 2020 01:40 PM UTC

Hi Salimkhan,

Good day to you,

We are currently validating the reported queries from our end and will update you with further details in two business days by 20th April.

Regards, 
Indrajith 


IS Indrajith Srinivasan Syncfusion Team April 20, 2020 11:53 AM UTC

Hi Salimkhan, 
 
Thanks for your patience, 
 
We have validated your reported queries and below are the responses for it. 
 
Query 1: “Toast Message does not show even delete function executed. It get called inappropriate way.” 
 
We have checked the code blocks shared. We suspect if the DeleteCountry function is called and this.ToastObj.Show(messageType) is executed, the toast message will be displayed as expected. With the already shared demo of showing the appropriate toast, in a button click which works fine. 
 
Query 2: “Required Field Validator does not show red border around textbox and invoked OnValidSubmit even the required field is blank.” 
 
To display the TextBox component with a border based on the validation success or error, we can achieve it by using CssClass property as mentioned in the below code example.   
   
@page "/"   
   
@using Syncfusion.Blazor.Inputs   
@using Syncfusion.Blazor.Buttons   
@using System.ComponentModel.DataAnnotations;   
   
<div class="row">   
    <div style="width:100%;margin:20px;">   
        <EditForm EditContext="@editContext">   
            <DataAnnotationsValidator />   
            <div class="form-group">   
   
                <SfTextBox Placeholder="Test Property" FloatLabelType='@FloatLabelType.Always' @bind-Value="model.TestProperty" CssClass="@cssClass" Blur="TestPropertyBlurEvent"></SfTextBox>   
                <ValidationMessage For="() => model.TestProperty" />   
            </div>   
            <SfButton IsPrimary="true" HtmlAttributes="@(new Dictionary<string, object> { { "type", "submit" } })">Save</SfButton>   
        </EditForm>   
    </div>   
</div>   
@code{   
    private void click()   
    {   
        cssClass = "cssclasschag";   
    }   
    private Test model;   
    private EditContext editContext;   
    private string cssClass { get; set; }   
    protected override void OnInitialized()   
    {   
        model = new Test();   
        editContext = new EditContext(model);   
    }   
    public class Test   
    {   
        [Required]   
        public string TestProperty { get; set; }   
    }   
    public void TestPropertyBlurEvent(FocusOutEventArgs args)   
    {   
        if (!editContext.Validate())   
        {   
            cssClass = "e-error";   
        }   
        else   
        {   
            cssClass = "e-success";   
        }   
        StateHasChanged();   
    }   
}   
 
Query 3: “When I go to AddCountry Page and I press Cancel button, it redirected to ViewCountry Page but the Grid does not show and in this case if I press Add Country button nothing happen and it shows error when I inspect with F12 in browser.” 
 
We have analyzed the provided video demo and from that we could see that delete operation is not working in Grid. This is because you have not defined the IsPrimaryKey to any of the available column whose value is unique. Because based on the PrimaryKey value only CRUD operation will take place. So kindly define the IsPrimaryKey property to any of the available column whose value must be unique.   
  
Refer our UG documentation for your reference: https://blazor.syncfusion.com/documentation/datagrid/editing/       
  
After navigating back to ViewCountry page, we suspect that data source is not getting loaded properly into you application. Because you have displayed text “No record found in the Database.....” only when data count is zero. So kindly ensure that data source is getting loaded when navigating back to Grid page.  
  
Kindly get back to us if you have further queries. 
 
Query 4: “I am unable to change the background color of the SfCard as well. How will I do it?” 
  
With SfCard background can be changed through its styles.  Please find the code snippet for changing the background for the card component.  
  
Code snippet:   
<SfCard ID="CardSample">  
    <CardHeader Title="Debunking Five Data Science Myths" SubTitle="By John Doe | Jan 20, 2018" />  
    <CardContent Content="Tech evangelists are currently pounding their pulpits about all things AI, machine learning, analytics—anything that sounds like the future and probably involves lots of numbers. Many of these topics can be grouped under the intimidating term data science." />  
</SfCard>  
  
<style>  
    #CardSample {  
        background-color: aliceblue;  
    }  
</style> 
  
Query 5: “Do we have equivalent of Panel Control in Syncfusion? “ 
 
Yes, we have SfDashboardLayout component which is a grid structured layout component that helps to create a static and dynamic dashboard layout with panels.  
  
  
  
  
Could you please confirm us that whether you are expecting this component to achieve your requirement? If yes, then please share us more details of your expected requirement. This information would help us to understand your requirement and to help you to achieve your requirement with SfDashboard Layout component.  

Please let us know if the solution helps, 
 
Regards, 
Indrajith 


SP Salimkhan Pathan April 24, 2020 06:02 PM UTC

Hi Indrajith Srinivasan

Hope you fine there.

I am still struggling with the unexpected behavior of the Toast Messages on Grid Delete Operation.

After Adding the data and redirect to the grid page it shows error in Blazor.Server.js file but still load the data.

Also during deleting process, everything works fine but Toast Display as a bunch after few clicks.

Cascading dropdown list fills the dropdown correctly but it's corresponding value is not shown as selectedValue in case of Edit Mode.

I'm new to the Syncfusion community.




Attachment: SyncFusionQueryData24042020_b660fa3.zip

IS Indrajith Srinivasan Syncfusion Team April 29, 2020 03:16 PM UTC

Hi Salimkhan,

Sorry for the delayed response,

 
Query 1: “I am still struggling with the unexpected behavior of the Toast Messages on Grid Delete Operation., Also during deleting process, everything works fine but Toast Display as a bunch after few clicks.” 
 
We have created a new incident under your Direct trac account to follow up with this query. We suggest you to follow up with the incident for further updates. Please log in using the below link.  
 
 
Query 2: “Cascading dropdown list fills the dropdown correctly but it's corresponding value is not shown as selectedValue in case of Edit Mode.” 
  
You can get the Grid RowData in the actionBegin event args and update the value to the dropdownlist component value’s property. Kindly refer the below code and sample,  
  
public void OnActionBegin(ActionEventArgs<OrdersDetails> args)  
    {  
        DDLValue1 = args.RowData.ShipCountry;  
        DDLValue2 = args.RowData.ShipState;  
  
    }  
  
  
Regards, 
Indrajith 


IS Indrajith Srinivasan Syncfusion Team April 29, 2020 03:42 PM UTC

Hi Salimkhan, 
 
Query 3: “After Adding the data and redirect to the grid page it shows error in Blazor.Server.js file but still load the data.”  
  
We have prepared a sample using your code example and we are not able to reproduce the reported issue (script error thrown while navigating back to Grid page) at our end. Please find the sample from below   
  
Note: We have just navigated to AddCountry page and clicking on Cancel button will navigate back to Grid.   
  
And also in the provided code example we found that you have used in built delete operation to remove the record from your database. To perform CRUD operation in Grid, IsPrimaryKey property must be defined to any of the available column whose value is unique. Because based on the PrimaryKey value only CRUD operation will take place. So kindly define the IsPrimaryKey property to any of the available column whose value must be unique.     
    
Refer our UG documentation for your reference: https://blazor.syncfusion.com/documentation/datagrid/editing/         
 
After referring the sample, if you are still facing the issue, kindly get back to us with issue reproducible sample or try to reproduce the reported issue in provided sample and get back to us. 
 
Regards, 
Indrajith 


Loader.
Up arrow icon