Notification Question

Radzen.Blazor Components
1

Hi,
I am trying to display a notification after OnSubmit but somehow notification message does not display on the screen.

I added Notification Service on the Program.cs.
builder.Services.AddScoped<NotificationService>();

Here is my OnSubmit:

async Task OnSubmit(BulkPurchaseRequest model)
    {
        bulkPurchaseRequest = new BulkPurchaseRequest
        {
            ProductCode = productCode,
            TotalAmount = totalAmount,
            Email = user.Identity.Name,
            Description = description
        };

        //Save
        await AddBulkPurchaseRequestsViewCase.ExecuteAsync(bulkPurchaseRequest);
        _bulkPurchaseRequest = await ViewBulkPurchaseRequestViewCase.ExecuteAsync();
        NotificationService.Notify(new NotificationMessage { Severity = NotificationSeverity.Success, Summary = "Success Summary", Detail = "Success Detail", Duration = 4000 });

        StateHasChanged();
        
    }

Here is the Form:

<RadzenCard Class="my-2">
    <RadzenTemplateForm TItem="BulkPurchaseRequest" Data=@bulkPurchaseRequest Submit=@OnSubmit InvalidSubmit=@OnInvalidSubmit>
        <RadzenFieldset Text="">
            <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Start" Wrap="FlexWrap.Wrap">
                <RadzenStack Orientation="Orientation.Vertical" Gap="10px">
                    Game
                    <RadzenDropDown AllowClear="true" TValue="ProductCode" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" AllowFiltering="true" Class="w-100"
                                    Placeholder="Select..." Data=@_products TextProperty="ClientCode" ValueProperty="GameCode" Change=@(args => OnCodeChange(args)) Name="product"/>
                    <RadzenNumericRangeValidator Component="product" Min="1" Text="Product Code is Required!" Popup=@popup Style="position: relative;"/>
                </RadzenStack>
                <RadzenStack Orientation="Orientation.Vertical" Gap="10px">
                    Quantity
                    <RadzenNumeric TValue="int" Change=@(args => OnAmountChange(args)) Class="w-100" Name="TotalAmount" @bind-Value=@bulkPurchaseRequest.TotalAmount/>
                    <RadzenNumericRangeValidator Component="TotalAmount" Min="1" Max="20000" Text="Quantity should be between 1 and 20000" Popup=@popup Style="position: relative"/>
                </RadzenStack>
                <RadzenStack Orientation="Orientation.Vertical" Gap="10px">
                    Description
                    <RadzenTextBox Class="w-100" Name="Description" id="description" Change=@(args => OnDescriptionChange(args)) @bind-Value=@bulkPurchaseRequest.Description/>
                    <RadzenRequiredValidator Component="Description" Text="Description is required" Popup=@popup Style="position: relative"/>
                </RadzenStack>
                <RadzenStack Orientation="Orientation.Vertical" Gap="10px">
                    &nbsp;
                    <RadzenButton Text="Purchase" id="btn" ButtonType="ButtonType.Submit"/>
                </RadzenStack>
            </RadzenStack>
        </RadzenFieldset>
    </RadzenTemplateForm>
</RadzenCard>
2

Hi @Robot,

Make sure you have added <RadzenNotification /> to the layout of your app. Check here for more info.

1 Like
3

Thank you @korchev for your help.

4

@korchev can I customize the style of this notification popup? I mean the length or height etc...

5

You can customize everything with CSS. Here is the implementation: radzen-blazor/_notification.scss at master · radzenhq/radzen-blazor · GitHub

1 Like