Skip to content

Commit aa1047e

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent dcbaf94 commit aa1047e

File tree

11 files changed

+436
-6
lines changed

11 files changed

+436
-6
lines changed

‎docs-aspnet/html-helpers/layout/notification/events.md‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
---
2+
title: Events
3+
page_title: Events
4+
description: "Learn how to handle the events of the Telerik UI Notification component for {{ site.framework }}."
5+
slug: events_notification_aspnetcore
6+
position: 7
7+
---
8+
9+
10+
11+
# Events
12+
13+
The Telerik UI Notification for {{ site.framework }} exposes multiple [events](/api/Kendo.Mvc.UI.Fluent/NotificationEventBuilder) that allow you to control and customize the behavior of the UI component.
14+
15+
For a complete example on basic Notification events, refer to the [demo on using the events of the Notification](https://demos.telerik.com/{{ site.platform }}/notification/events).
16+
17+
## Handling by Handler Name
18+
19+
The following example demonstrates how to subscribe to events by handler name.
20+
21+
```HtmlHelper
22+
@(Html.Kendo().Notification()
23+
.Name("notification")
24+
.Position(p=>p.Top(120).Left(20))
25+
.Events(e => e
26+
.Show("notification_show")
27+
.Hide("notification_hide")
28+
)
29+
)
30+
```
31+
{% if site.core %}
32+
```TagHelper
33+
<kendo-notification name="notification" on-show="notification_show" on-hide="notification_hide">
34+
<position top="120" left="20"></position>
35+
</kendo-notification>
36+
```
37+
{% endif %}
38+
```JavaScript
39+
<script>
40+
function notification_show() {
41+
// Handle the show event.
42+
}
43+
44+
function notification_hide() {
45+
// Handle the hide event.
46+
}
47+
</script>
48+
49+
```
50+
51+
## Handling by Template Delegate
52+
53+
The following example demonstrates how to subscribe to events by using a template delegate.
54+
55+
```HtmlHelper
56+
@(Html.Kendo().Notification()
57+
.Name("notification")
58+
.Position(p=>p.Top(120).Left(20))
59+
.Events(e => e
60+
.Show(@<text>
61+
function() {
62+
// Handle the show event inline.
63+
}
64+
</text>)
65+
.Hide(@<text>
66+
function() {
67+
// Handle the hide event inline.
68+
}
69+
</text>)
70+
)
71+
)
72+
```
73+
{% if site.core %}
74+
```TagHelper
75+
<kendo-notification name="notification"
76+
on-show="function() {
77+
//Handle the show event inline.
78+
}"
79+
on-hide="function() {
80+
//Handle the hide event inline.
81+
}">
82+
</kendo-notification>
83+
```
84+
{% endif %}
85+
86+
## Next Steps
87+
88+
* [Using the Notification Events (Demo)](https://demos.telerik.com/{{ site.platform }}/notification/events)
89+
90+
## See Also
91+
92+
* [Using the API of the Notification HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/notification/api)
93+
* [Notification Server-Side API](/api/notification)
94+
* [Notification Client-Side API](https://docs.telerik.com/kendo-ui/api/javascript/ui/notification)

‎docs-aspnet/html-helpers/layout/notification/getting-started.md‎

Lines changed: 266 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,266 @@
1+
---
2+
title: Getting Started
3+
page_title: Getting Started
4+
description: "Make your first steps with the Telerik UI for {{ site.framework }} Notification component by following a complete step-by-step tutorial."
5+
slug: aspnetcore_notification_getting_started
6+
position: 1
7+
---
8+
9+
# Getting Started with the Notification
10+
11+
This tutorial explains how to set up a basic Telerik UI for {{ site.framework }} Notification component and highlights the major steps in the configuration of the component.
12+
13+
You will initialize a Notification component with basic content and an action button. Then, you will use the events of the UI component. {% if site.core %}Finally, you can run the sample code in [Telerik REPL](https://netcorerepl.telerik.com/) and continue exploring the components.{% endif %}
14+
15+
![Sample Telerik UI for {{ site.framework }} Notification](./images/notification-getting-started.png)
16+
17+
@[template](/_contentTemplates/core/getting-started-prerequisites.md#repl-component-gs-prerequisites)
18+
19+
## 1. Prepare the CSHTML File
20+
21+
@[template](/_contentTemplates/core/getting-started-directives.md#gs-adding-directives)
22+
23+
Optionally, you can structure the document by adding the desired HTML elements like headings, divs, paragraphs, and others.
24+
25+
```HtmlHelper
26+
@using Kendo.Mvc.UI
27+
28+
<h4>Notification with a Hide Button</h4>
29+
<div>
30+
31+
</div>
32+
```
33+
{% if site.core %}
34+
```TagHelper
35+
@addTagHelper *, Kendo.Mvc
36+
37+
<h4>Notification with a Hide Button</h4>
38+
<div>
39+
40+
</div>
41+
```
42+
{% endif %}
43+
44+
## 2. Initialize the Notification
45+
46+
Use the Notification HtmlHelper {% if site.core %}or TagHelper{% endif %} to add the component to a page:
47+
48+
* The `Name()` configuration method is mandatory as its value is used for the `id` and the `name` attributes of the Notification element.
49+
* The `Position()` setting allows you to declare offsets that change the position of the component.
50+
51+
This tutorial uses a separate `Kendo().Button()` component with an event handler to display the Notification. In your scenarios, you could have another user action or event handler that displays the Notification component.
52+
53+
```HtmlHelper
54+
@using Kendo.Mvc.UI
55+
56+
<h4>Notification with a Hide Button</h4>
57+
<div>
58+
@(Html.Kendo().Notification()
59+
.Name("notification")
60+
.Position(p=>p.Top(120).Left(20))
61+
)
62+
@(Html.Kendo().Button()
63+
.Name("button")
64+
.Content("Show Notification")
65+
.Events(e=>e.Click("buttonClick"))
66+
)
67+
68+
<script>
69+
function buttonClick(e) {
70+
var notification = $("#notification").data("kendoNotification");
71+
notification.show("You have 1 new message!", "info");
72+
}
73+
</script>
74+
</div>
75+
```
76+
{% if site.core %}
77+
```TagHelper
78+
@addTagHelper *, Kendo.Mvc
79+
80+
<h4>Notification with a Hide Button</h4>
81+
<div>
82+
<kendo-notification name="notification">
83+
<position top="120" left="20"></position>
84+
</kendo-notification>
85+
86+
<kendo-button name="button" on-click="buttonClick">
87+
Show Notification
88+
</kendo-button>
89+
90+
<script>
91+
function buttonClick(e) {
92+
var notification = $("#notification").data("kendoNotification");
93+
notification.show("You have 1 new message!", "info");
94+
}
95+
</script>
96+
</div>
97+
```
98+
{% endif %}
99+
100+
## 3. Hide with a Button
101+
102+
The next step is to make the Notification hide only on manual button click action initiated by the user.
103+
104+
By default, the Notification disappears automatically after a couple of seconds or when the user clicks it. Alternatively, you can use the built-in close button that is controlled by the following properties:
105+
106+
* The `Button()` property determines whether the notifications will include a hide button. This setting works only with the built-in templates.
107+
* The `HideOnClick()` setting determines whether notifications can be hidden by clicking anywhere on their content.
108+
109+
```HtmlHelper
110+
@using Kendo.Mvc.UI
111+
112+
<h4>Notification with a Hide Button</h4>
113+
<div>
114+
@(Html.Kendo().Notification()
115+
.Name("notification")
116+
.Position(p=>p.Top(120).Left(20))
117+
.Button(true)
118+
.HideOnClick(false)
119+
)
120+
@(Html.Kendo().Button()
121+
.Name("button")
122+
.Content("Show Notification")
123+
.Events(e=>e.Click("buttonClick"))
124+
)
125+
126+
<script>
127+
function buttonClick(e) {
128+
var notification = $("#notification").data("kendoNotification");
129+
notification.show("You have 1 new message!", "info");
130+
}
131+
</script>
132+
</div>
133+
```
134+
{% if site.core %}
135+
```TagHelper
136+
@addTagHelper *, Kendo.Mvc
137+
138+
<h4>Notification with a Hide Button</h4>
139+
<div>
140+
<kendo-notification name="notification"
141+
button="true" hide-on-click="false">
142+
<position top="120" left="20"></position>
143+
</kendo-notification>
144+
145+
<kendo-button name="button" on-click="buttonClick">
146+
Show Notification
147+
</kendo-button>
148+
149+
<script>
150+
function buttonClick(e) {
151+
var notification = $("#notification").data("kendoNotification");
152+
notification.show("You have 1 new message!", "info");
153+
}
154+
</script>
155+
</div>
156+
```
157+
{% endif %}
158+
159+
## 4. Handle a Notification Event
160+
161+
The Notification component provides convenient events for implementing your desired logic. In this tutorial, you will use the exposed `Show()` event to log a new entry in the browser's console.
162+
163+
```HtmlHelper
164+
@using Kendo.Mvc.UI
165+
166+
<h4>Notification with a Hide Button</h4>
167+
<div>
168+
@(Html.Kendo().Notification()
169+
.Name("notification")
170+
.Position(p=>p.Top(120).Left(20))
171+
.Button(true)
172+
.HideOnClick(false)
173+
// Configure the client-side events.
174+
.Events(e => e.Show("show")
175+
)
176+
)
177+
@(Html.Kendo().Button()
178+
.Name("button")
179+
.Content("Show Notification")
180+
.Events(e=>e.Click("buttonClick"))
181+
)
182+
183+
<script>
184+
function buttonClick(e) {
185+
var notification = $("#notification").data("kendoNotification");
186+
notification.show("You have 1 new message!", "info");
187+
}
188+
189+
function show(e) {
190+
console.log("Message Shown");
191+
}
192+
</script>
193+
</div>
194+
```
195+
{% if site.core %}
196+
```TagHelper
197+
@addTagHelper *, Kendo.Mvc
198+
199+
<h4>Notification with a Hide Button</h4>
200+
<div>
201+
<script>
202+
function buttonClick(e) {
203+
var notification = $("#notification").data("kendoNotification");
204+
notification.show("You have 1 new message!", "info");
205+
}
206+
207+
function show(e) {
208+
console.log("Message Shown");
209+
}
210+
</script>
211+
<kendo-notification name="notification"
212+
button="true" hide-on-click="false"
213+
on-show="show">
214+
<position top="120" left="20"></position>
215+
</kendo-notification>
216+
217+
<kendo-button name="button" on-click="buttonClick">
218+
Show Notification
219+
</kendo-button>
220+
</div>
221+
```
222+
{% endif %}
223+
224+
225+
## 5. (Optional) Reference Existing Notification Instances
226+
227+
You can reference the Notification instances that you have created and build on top of their existing configuration:
228+
229+
1. Use the `id` attribute of the component instance to establish a reference.
230+
231+
```script
232+
<script>
233+
var notificationReference = $("#notification").data("kendoNotification"); // notificationReference is a reference to the existing Notification instance of the helper.
234+
</script>
235+
```
236+
237+
1. Use the [Notification client-side API](https://docs.telerik.com/kendo-ui/api/javascript/ui/notification#methods) to control the behavior of the widget. In this example, you will use the `hide` method to close the Notification.
238+
239+
```script
240+
<script>
241+
var notificationReference = $("#notification").data("kendoNotification"); // notificationReference is a reference to the existing Notification instance of the helper.
242+
notificationReference.hide();
243+
</script>
244+
```
245+
246+
{% if site.core %}
247+
## Explore this Tutorial in REPL
248+
249+
You can continue experimenting with the code sample above by running it in the Telerik REPL server playground:
250+
251+
* [Sample code with the Notification HtmlHelper](https://netcorerepl.telerik.com/wRuIPavd53fb9mr015)
252+
* [Sample code with the Notification TagHelper](https://netcorerepl.telerik.com/QxOyFald53QG982P44)
253+
254+
{% endif %}
255+
256+
## Next Steps
257+
258+
* [Customize the Positioning of the Notification]({% slug positioning_notificatiomhelper_aspnetmvc %})
259+
* [Use Templates to Control the Notification Appearance]({% slug templates_notificatiomhelper_aspnetmvc %})
260+
261+
## See Also
262+
263+
* [Using the API of the Notification for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/notification/api)
264+
* [Client-Side API of the Notification](https://docs.telerik.com/kendo-ui/api/javascript/ui/notification)
265+
* [Server-Side API of the Notification](/api/notification)
266+
* [Knowledge Base Section](/knowledge-base)

‎docs-aspnet/html-helpers/layout/notification/images/notification-getting-started.png‎

21.2 KB
Loading

‎docs-aspnet/html-helpers/layout/notification/overview.md‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
---
22
title: Overview
33
page_title: Overview
4-
description: "Learn the basics when working with the Telerik UI Notification component for {{ site.framework }}."
4+
description: "The Telerik UI Notification component for {{ site.framework }} provides a styled UI element with arbitrary content which can display information to the user on various occasions."
55
previous_url: /helpers/html-helpers/notification, /helpers/layout/notification/overview
66
slug: htmlhelpers_notification_aspnetcore
7-
position: 1
7+
position: 0
88
---
99

1010
# {{ site.framework }} Notification Overview
@@ -112,15 +112,21 @@ The following example demonstrates the basic configuration of the Notification.
112112
```
113113
{% endif %}
114114

115-
## Events
115+
## Functionality and Features
116116

117-
For a complete example on basic Notification events, refer to the [demo on using the events of the Notification](https://demos.telerik.com/{{ site.platform }}/notification/events).
117+
* [Positioning]({% slug positioning_notificatiomhelper_aspnetmvc %})—You can predefine the position of the Notification.
118+
* [Types]({% slug types_notificatiomhelper_aspnetmvc %})—The Notification provides built-in `"info"`, `"success"`, `"warning"`, and `"error"` types.
119+
* [Hiding Options]({% slug hiding_notificatiomhelper_aspnetmvc %})—You can select different hiding behavior for the Notification.
118120

119-
## See Also
121+
## Next Steps
120122

123+
* [Getting Started with the Notification]({% slug aspnetcore_notification_getting_started %})
121124
* [Basic Usage of the Notification HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/notification)
122125
{% if site.core %}
123126
* [Basic Usage of the Notification TagHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/notification/tag-helper)
124127
{% endif %}
128+
129+
## See Also
130+
125131
* [Using the API of the Notification HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/notification/api)
126132
* [Server-Side API](/api/notification)

0 commit comments

Comments
 (0)