Skip to content

Commit 60d1c6f

Browse files
dimodidimodi
authored
kb(Notification): Add KB for single Notification instance (#2450)
* kb(Notification): Add KB for single Notification instance * add a note
1 parent 3a913c4 commit 60d1c6f

File tree

2 files changed

+203
-1
lines changed

2 files changed

+203
-1
lines changed

‎components/notification/overview.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,4 +130,4 @@ You can find more information on opening, closing and hiding the Notification in
130130

131131
* [Live Demo: Notification](https://demos.telerik.com/blazor-ui/notification/overview)
132132
* [Notification API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikNotification)
133-
* [One Notification Instance for All Components Sample Project](https://github.com/telerik/blazor-ui/tree/master/notification/single-instance-per-app)
133+
* [Reuse One Notification Instance]({%slug notification-kb-single-instance%})

‎knowledge-base/notification-single-app-instance.md‎

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
---
2+
title: Reuse One Notification Instance in the App
3+
description: Learn how to define and use a single Telerik Notification component instance in a Blazor application.
4+
type: how-to
5+
page_title: How to Reuse a Single Notification Component Instance in the App
6+
slug: notification-kb-single-instance
7+
tags: telerik, blazor, notification
8+
ticketid: 1627975, 1602587, 1591578, 1579647
9+
res_type: kb
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>Notification for Blazor</td>
19+
</tr>
20+
</tbody>
21+
</table>
22+
23+
## Description
24+
25+
This KB article answers the following questions:
26+
27+
* How to use a single Telerik Notification component for Blazor in multiple other Razor files?
28+
* How to reuse one Notification instance in the whole Blazor application?
29+
30+
## Solution
31+
32+
There are two possible ways to implement a reusable Notification component instance:
33+
34+
* [Pass the Notification in a Cascading Value](#pass-the-notification-in-a-cascading-value)
35+
* [Use the Notification as a Service](#use-the-notification-as-a-service)
36+
37+
The Notification component in both scenarios must be defined:
38+
39+
1. As a descendant (or child) of the [`<TelerikRootComponent>`]({%slug rootcomponent-overview%}).
40+
1. In a `.razor` file with enabled interactive render mode. The `MainLayout` is interactive only if the Blazor app has **Global** interactivity location.
41+
42+
### Pass the Notification in a Cascading Value
43+
44+
1. [Define a Telerik Notification component]({%slug notification-overview%}#creating-blazor-notification) in `MainLayout.razor`.
45+
1. [Set the Notification `@ref` attribute]({%slug notification-overview%}#notifications-reference-and-methods). Use an `internal` or `public` accessor.
46+
1. Wrap the `@Body` in `MainLayout` in a `<CascadingValue>` that passes the `MainLayout` instance itself. This avoids potential issues with missing Notification instance in child components on initial app load. Set `IsFixed="true"` to the `CascadingValue` to avoid unnecessary renders.
47+
1. Consume the `MainLayout` instance in child Razor components as a `[CascadingParameter]` and access the Notification instance methods through the `MainLayout` instance.
48+
49+
>caption Reuse a Notification as a CascadingValue
50+
51+
<div class="skip-repl"></div>
52+
53+
````MainLayout.razor
54+
@inherits LayoutComponentBase
55+
56+
<TelerikRootComponent>
57+
58+
<TelerikNotification @ref="@NotificationRef" />
59+
60+
<CascadingValue Value="@this" Name="MainLayoutRef" IsFixed="true">
61+
@Body
62+
</CascadingValue>
63+
64+
</TelerikRootComponent>
65+
66+
@code {
67+
internal TelerikNotification? NotificationRef { get; set; }
68+
}
69+
````
70+
````_Imports.razor
71+
@using YourAppName.Components.Layout
72+
````
73+
````Home.razor
74+
@page "/"
75+
76+
<PageTitle>Home</PageTitle>
77+
78+
<TelerikButton OnClick="@ShowNotification">Show Notification</TelerikButton>
79+
80+
<TelerikButton OnClick="@HideNotifications">Hide All Notifications</TelerikButton>
81+
82+
@code {
83+
[CascadingParameter(Name = "MainLayoutRef")]
84+
public MainLayout? MainLayoutRef { get; set; }
85+
86+
private void ShowNotification()
87+
{
88+
MainLayoutRef?.NotificationRef?.Show(new NotificationModel()
89+
{
90+
Text = $"Notification at {DateTime.Now.ToString("HH:mm:ss.fff")}"
91+
});
92+
}
93+
94+
private void HideNotifications()
95+
{
96+
MainLayoutRef?.NotificationRef?.HideAll();
97+
}
98+
}
99+
````
100+
101+
### Use the Notification as a Service
102+
103+
1. Implement a service that holds a Notification component instance as a property and executes component methods.
104+
1. Register the service in `Program.cs`.
105+
1. [Define a Telerik Notification component]({%slug notification-overview%}#creating-blazor-notification) in `MainLayout.razor`.
106+
1. Inject the service in `MainLayout.razor` and [set the Notification `@ref` attribute]({%slug notification-overview%}#notifications-reference-and-methods) to a property of the service.
107+
1. Inject and use the service in other Razor components.
108+
109+
>caption Reuse a Notification in a service
110+
111+
<div class="skip-repl"></div>
112+
113+
````NotificationService.cs
114+
using Telerik.Blazor.Components;
115+
116+
namespace YourAppName.Services
117+
{
118+
public class NotificationService
119+
{
120+
public TelerikNotification? NotificationRef { get; set; }
121+
122+
public void Show(string text, string? themeColor = null)
123+
{
124+
NotificationRef?.Show(new NotificationModel()
125+
{
126+
Text = text,
127+
ThemeColor = themeColor
128+
});
129+
}
130+
131+
public void Show(NotificationModel notificationModel)
132+
{
133+
NotificationRef?.Show(notificationModel);
134+
}
135+
136+
public void HideAll()
137+
{
138+
NotificationRef?.HideAll();
139+
}
140+
}
141+
}
142+
````
143+
````Program.cs
144+
builder.Services.AddSingleton<NotificationService>();
145+
````
146+
````_Imports.razor
147+
@using YourAppName.Services
148+
````
149+
````MainLayout.razor
150+
@inherits LayoutComponentBase
151+
152+
@inject NotificationService NotificationService
153+
154+
<TelerikRootComponent>
155+
156+
<TelerikNotification @ref="@NotificationService.NotificationRef" />
157+
158+
<CascadingValue Value="@this" Name="MainLayoutRef" IsFixed="true">
159+
@Body
160+
</CascadingValue>
161+
162+
</TelerikRootComponent>
163+
````
164+
````Home.razor
165+
@page "/"
166+
167+
@inject NotificationService NotificationService
168+
169+
<PageTitle>Home</PageTitle>
170+
171+
<TelerikButton OnClick="@ShowTextNotification">Show Simple Notification</TelerikButton>
172+
173+
<TelerikButton OnClick="@ShowIconNotification">Show Rich Notification</TelerikButton>
174+
175+
<TelerikButton OnClick="@HideNotifications">Hide All Notifications</TelerikButton>
176+
177+
@code {
178+
private void ShowTextNotification()
179+
{
180+
NotificationService.Show($"Notification at {DateTime.Now.ToString("HH:mm:ss.fff")}");
181+
}
182+
183+
private void ShowIconNotification()
184+
{
185+
NotificationService.Show(new NotificationModel()
186+
{
187+
Icon = SvgIcon.Check,
188+
Text = $"Notification at {DateTime.Now.ToString("HH:mm:ss.fff")}",
189+
ThemeColor = ThemeConstants.Notification.ThemeColor.Success
190+
});
191+
}
192+
193+
private void HideNotifications()
194+
{
195+
NotificationService.HideAll();
196+
}
197+
}
198+
````
199+
200+
## See Also
201+
202+
* [Notification Overview]({%slug notification-overview%})

0 commit comments

Comments
 (0)