Questions on UI for Blazor Forum

1 answer

12 views

[Notification] When the page jumps, the appearance position of the Notification component is reset.

Hi,

When the page jumps, the appearance position of the Notification component is reset.

Calling code：

await AlertController.ShowSuccessNotification("[Complete Work Task]:Success");
NavigationController.Navigate(new WorkViewParam());

Controller code：

public static class AlertController
{
    private static Notification NotificationReference { get; set; }

    public static async Task ShowSuccessNotification(string message = "Success",int closeAfter = 60000,object icon = null,AnimationType animationType = AnimationType.Fade,NotificationHorizontalPosition horizontalPosition = NotificationHorizontalPosition.Center, NotificationVerticalPosition verticalPosition = NotificationVerticalPosition.Top)
    {
        if (NotificationReference != null)
        {
            NotificationReference.Animation = animationType;
            NotificationReference.HorizontalPosition = horizontalPosition;
            NotificationReference.VerticalPosition = verticalPosition;
            NotificationReference.Text = message;
            NotificationReference.CloseAfter = closeAfter;
            NotificationReference.Icon = icon;
            await NotificationReference.ShowSuccess();
        }
    }

    internal static void SetNotificationReference(Notification notificationReference)
    {
        NotificationReference = notificationReference;
    }


}

Notification Component Code(.razor)：

@using Telerik.Blazor
@using Telerik.Blazor.Components

<style>
    .custom-notification-parent {
        position: fixed;
        left: 50%;
        top: 20px;
        transform: translateX(-50%);
        z-index: 99999999;
    }

    .custom-positioned-notifications {
        position: relative;
        flex-wrap: nowrap !important;
    }

    .k-notification {
        box-shadow: var(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12));
        font-size: 16px;
    }
</style>

<div class="custom-notification-parent">
    <TelerikNotification @ref="@notification"
                         AnimationType="@Animation"
                         Class="custom-positioned-notifications"
                         VerticalPosition="@VerticalPosition"
                         HorizontalPosition="@HorizontalPosition">
    </TelerikNotification>
</div>

@code {

}

Notification Component Code(.razor.cs)：

publicpartialclassNotification
{
    private TelerikNotification notification { get; set; }
    public NotificationHorizontalPosition HorizontalPosition { get; set; } = NotificationHorizontalPosition.Center;
    public NotificationVerticalPosition VerticalPosition { get; set; } = NotificationVerticalPosition.Top;
    public AnimationType Animation { get; set; }
    publicstring Text { get; set; }
    publicint CloseAfter { get; set; }
    publicobject Icon { get; set; } = null;

    public async Task ShowSuccess()
    {
        notification.Show(new NotificationModel
        {
            Text = Text,
            ThemeColor = ThemeConstants.Notification.ThemeColor.Success,
            CloseAfter = CloseAfter,
            Icon = Icon
        });
    }protected override async Task OnInitializedAsync()
    {
        awaitbase.OnInitializedAsync();
        AlertController.SetNotificationReference(this);
    }
}

Notification

answered on 14 May 2024

0 answers

5 views

[Notification] When the page jumps, the appearance position of the Notification component is reset.

Hi,

When the page jumps, the appearance position of the Notification component is reset.

My project code：

public static async Task ShowSuccessNotification(string message = "Success",int closeAfter = 60000,object icon = null,AnimationType animationType = AnimationType.Fade,NotificationHorizontalPosition horizontalPosition = NotificationHorizontalPosition.Center, NotificationVerticalPosition verticalPosition = NotificationVerticalPosition.Top)
{
    if (NotificationReference != null)
    {
        NotificationReference.Animation = animationType;
        NotificationReference.HorizontalPosition = horizontalPosition;
        NotificationReference.VerticalPosition = verticalPosition;
        NotificationReference.Text = message;
        NotificationReference.CloseAfter = closeAfter;
        NotificationReference.Icon = icon;
        await NotificationReference.ShowSuccess();
    }
}

Notification Component Code(.razor)：

@using Telerik.Blazor
@using Telerik.Blazor.Components

<style>
    .custom-notification-parent {
        position: fixed;
        left: 50%;
        top: 20px;
        transform: translateX(-50%);
        z-index: 99999999;
    }

    .custom-positioned-notifications {
        position: relative;
        flex-wrap: nowrap !important;
    }

    .k-notification {
        box-shadow: var(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12));
        font-size: 16px;
    }
</style>

<div class="custom-notification-parent">
    <TelerikNotification @ref="@notification"
                         AnimationType="@Animation"
                         Class="custom-positioned-notifications"
                         VerticalPosition="@VerticalPosition"
                         HorizontalPosition="@HorizontalPosition">
    </TelerikNotification>
</div>

@code {

}

Notification Component Code(.razor.cs)：

public partial class Notification
    {
        private TelerikNotification notification { get; set; }
        public NotificationHorizontalPosition HorizontalPosition { get; set; } = NotificationHorizontalPosition.Center;
        public NotificationVerticalPosition VerticalPosition { get; set; } = NotificationVerticalPosition.Top;
        public AnimationType Animation { get; set; }
        public string Text { get; set; }
        public int CloseAfter { get; set; }
        public object Icon { get; set; } = null;

        public async Task ShowSuccess()
        {
            notification.Show(new NotificationModel
            {
                Text = Text,
                ThemeColor = ThemeConstants.Notification.ThemeColor.Success,
                CloseAfter = CloseAfter,
                Icon = Icon
            });
        }

        public async Task ShowError()
        {
            notification.Show(new NotificationModel
            {
                Text = Text,
                ThemeColor = ThemeConstants.Notification.ThemeColor.Error,
                CloseAfter = CloseAfter,
                Icon = Icon
            });
        }

        public async Task ShowWarning()
        {
            notification.Show(new NotificationModel
            {
                Text = Text,
                ThemeColor = ThemeConstants.Notification.ThemeColor.Warning,
                CloseAfter = CloseAfter,
                Icon = Icon
            });
        }

        public async Task ShowInfo()
        {
            notification.Show(new NotificationModel
            {
                Text = Text,
                ThemeColor = ThemeConstants.Notification.ThemeColor.Info,
                CloseAfter = CloseAfter,
                Icon = Icon
            });
        }

        protected override async Task OnInitializedAsync()
        {
            await base.OnInitializedAsync();
            AlertController.SetNotificationReference(this);
        }
    }

Calling code：

try
{
    var response = await CoreDataSource.Request(bulkRequest);

    await AlertController.ShowSuccessNotification("[Complete Work Task]:Success");
    NavigationController.Navigate(new WorkViewParam());
}
catch (Exception e)
{
    await AlertController.ShowWarningNotification("[Complete Work Task]:" + e.Message);
}

Notification

asked on 09 May 2024

1 answer

91 views

How can I show notifications in the foreground for modal forms using the "OneNotificationPerApp" example in Github?

Using the approach in the example code of "OneNotificationPerApp" works great for non-modal forms. However, modal forms that use this approach do show the notfication but its in the background, not easily visible. Is there a way to change that? I tried chaning the z order to a high number but that didn't work. Any suggestions would be great. Thanks in advance!

Let me know if you need to see the code and I can zip it up and attach it.

https://github.com/telerik/blazor-ui/tree/master/notification/single-instance-per-app

Notification

updated answer on 18 Mar 2024

1 answer

226 views

Issue with Telerik Notification Component in Blazor Server: Notifications Not Rendering Across Threads

I'm encountering an issue with the Telerik Notification component in my Blazor Server. The problem arises when I attempt to display a notification from a function that is not on the same thread as the component. In such cases, the notification item doesn't render in the UI.

To address this, I've made a modification to my component by replacing StateHasChanged with InvokeAsync(StateHasChanged) to ensure thread safety during invocation.

I'd like to seek input to determine whether this is a bug in the Telerik component or if there's a better approach to solving this issue. Any advice or suggestions would be greatly appreciated. Thank you!

USE:::

BEFORE:::

AFTER FIX::::

Notification

answered on 18 Sep 2023

1 answer

55 views

Notification overlaps Textbox

Even if the TelerikNotification Component is not visible it kind of blocks the Textbox for getting focused. I made a screenshot to demonstrate that with the BrowserTools. I only can focus the Textbox if I am clicking in the area marked with the red box.

Is there a solution for it ?

Notification

answered on 18 Jul 2023

0 answers

54 views

Notifications breaking change

Hello,

After updating to 4.3.0 for Blazor, the close button on the notifications seem to be appearing at the bottom left.

Thanks,

Tony

Notification

asked on 11 Jul 2023

1 answer

522 views

Access to Blazor components' source code

I recall being told I would have access to source code once I buy a licence.

Now that I have a licence, how do I get access to the source so I can do a local build?

answered on 30 Dec 2022

0 answers

76 views

Multiple Progress Bar updates

Hello,

I have a scenario where I have a Telerik Notification with a Telerik progress bar embedded. I am looking to update the progress bar of multiple instances of the notification independently based in separate threads.

Would this be possible?

Thanks,

Tony

Notification

ProgressBar

asked on 20 Dec 2022

1 answer

88 views

Limit number of shown notifications

If I have multiple incoming notifications, how do I limit the number that are visible ? Is there a property to set or is there a way I can programmatically remove certain toasts?

Thank you

Notification

answered on 25 Nov 2022

1 answer

91 views

Notification Position

I have a notification component defined on my MasterLayout page like below. and then shared with all my other pages via a cascading parameter.

<TelerikNotification @ref="@NotificationReference" AnimationType="@AnimationType.ZoomOut" Class="notification"
                                                 HorizontalPosition="NotificationHorizontalPosition.Center" VerticalPosition="NotificationVerticalPosition.Top"/>

Everything works fine, but I am noticing that if i am scrolled down on a child page, the notification stays at the top of the page (off the visible screen) instead of being relative to the top of the window. How can i make sure the notification is always visible to the end users regardless of how far down a page they might be scrolled too?

Thanks in advance,

Notification