This is a migrated thread and some comments may be shown as answers.

Example of Notifications Centre

7 Answers 16 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Grant
Top achievements
Rank 2
Veteran
Iron
Grant asked on 18 Jan 2021, 09:44 AM

Hi, 

Is there an example somewhere using KendoReact notifications in a more dynamic way instead of (for the lack of a better term) one-by-one?

What Im looking for is a way to manage multiple notifications/toasts like:
 - https://jossmac.github.io/react-toast-notifications/
 - https://www.npmjs.com/package/react-toastify

Currently the examples I've found are just managing Notifications in the app state. The current functionality is limited.

Please advise.

Thanks,
Grant

7 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 18 Jan 2021, 10:24 AM

Hello, Grant,

The overview example can show multiple notifications based on the button clicks:

In React, everything that is changing dynamically has to be part of the state, this is the React recommendations.

Could you please share a specific use case where the KendoReact Notification is restrictive and fails to achieve the requirement?

Regards,
Stefan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Grant
Top achievements
Rank 2
Veteran
Iron
answered on 18 Jan 2021, 10:42 AM

Hi Stefen, 

Thanks for the quick response.

After some additional research, I think Im maybe asking the wrong question. Like the links in my original post, I want to make use of a Notification Centre. Where I can call a function that adds a new notification popup/toast to a container that I can call it n-times.

I suppose it true that Kendo has provided all thats needed to build this functionality myself. But I neither have the time or skillset to do so at the moment. So I was hoping that someone had a already created a similar example that I can use or build on.

Thanks,
Grant

0
Accepted
Stefan
Telerik team
answered on 18 Jan 2021, 10:55 AM

Hello, Grant,

Thank you for the clarification.

This indeed has to be implemented by the developer to dynamically add or remove items inside the state notification collection.

I made an example showcasing a possible approach. This can be modified to match the application requirements:

https://stackblitz.com/edit/react-mkhal8?file=app/main.jsx

We agree that having a built-in method looks easier but we try to follow Reacts recommendation on those things that has to update on the page, even if sometimes this will require more code from the developer.

Regards,
Stefan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Grant
Top achievements
Rank 2
Veteran
Iron
answered on 18 Jan 2021, 12:10 PM

Thanks Stefen, 

This demo will really help!

Regards,
Grant

0
Grant
Top achievements
Rank 2
Veteran
Iron
answered on 18 Jan 2021, 12:42 PM

Hi Stefen,

While your demo works, it no longer runs the animations (in or out), why is that?

Thanks

0
Accepted
Stefan
Telerik team
answered on 19 Jan 2021, 07:14 AM

Hello, Grant,

Yes, it needs a little change, the Animation Fade component has to be outside of the list:

https://stackblitz.com/edit/react-mkhal8-q7aiea?file=app/main.jsx

Regards,
Stefan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Grant
Top achievements
Rank 2
Veteran
Iron
answered on 19 Jan 2021, 07:46 AM

Thanks Stefen, much appreciated.

-G

Tags
General Discussions
Asked by
Grant
Top achievements
Rank 2
Veteran
Iron
Answers by
Stefan
Telerik team
Grant
Top achievements
Rank 2
Veteran
Iron
Share this question
or