Notification: render or ready event needed

Progress® Telerik® UI for ASP.NET MVC Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Unplanned

Last Updated: 25 Mar 2024 13:20 by ADMIN

Paul

Created on: 29 Nov 2022 14:49

Category: UI for ASP.NET MVC

Type: Feature Request

Notification: render or ready event needed

I have a Kendo Notification component on my page. When the page loads, it is possible a notification needs to show immediately. This fails because the Notification component is not ready yet. Even putting this message show inside a document.ready() call does not work. There’s no rendered event on this component to know when Kendo has it added to the DOM and it is accessible. So I ended up creating an array of messages to show. And running a setInterval block on page load until it is ready to go. Then clearing the interval and message array. It’s a work around but it is hacky and it would be better if I could subscribe to an event that tells me when the notification component can be used.

3 comments

ADMIN

Eyup

Posted on: 13 Dec 2022 11:19

Hi Paul,

Thank you for getting back to us.

Yeah, usually data components provide the .Events(e=>e.DataBound()) event handler which is the right place to wait for the loading of the widget to complete.

However, the Notification is a template component thus it does not provide such an event.

And currently we don't have such a global event and I am afraid this requirement is not supported. However, here is a Feature Request you can cast your Vote. If there is popular demand, our Dev Team can consider implementing it for the future releases:
https://feedback.telerik.com/aspnet-mvc/1571411-add-global-onafterinit-event-for-the-components

In your current solution with the setTimeout, you can try to remove the ",1000" part and it should work again. Or you can set it to 0.

As an alternative theoretical approach, you could try scheduling a microtask, which would be called after the javascript thread is free (after the script loading is finished):
https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide

Usually, in document.ready it should be finished. But again, this is only on theoretical ground and it is not tested nor supported officially on our side.

Regards,
Eyup
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Paul

Posted on: 06 Dec 2022 15:04

Thank you, but no the show event does not work. This is an MVC application, not pure JavaScript like the Dojo you attached. My code:

Now here's what actually renders in the page. This is from the browser F12 window:

Notice that unlike the Dojo you shared this notification component is not really available right now. It's getting rendered in a syncReady function. So how can I show a notification immediately on page load?

I am looking for a way to know when the component is ready for use. Not to know when it is about to show. Alternatively does kendo's syncReady expose anything when it is completed?

Here is my current work around:

This works fine though it seems hacky. Sleeping allows time for the page to finish. Some event to know the page is truly ready would work better hence the request.

ADMIN

Neli

Posted on: 06 Dec 2022 07:55

Hi Paul,

The Notification component exposes a show event that is fired when the animation of the Notification starts.

- https://docs.telerik.com/kendo-ui/api/javascript/ui/notification/events/show

Here is a small Dojo example where you can see that in the show event handler the widget and the respective element can be accessed. Could you please let me know if this event is suitable for your scenario? What is the behavior if you try to use it on your side?

Looking forward to your reply.

Regards,
Neli
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.