Progress® Telerik® UI for Blazor Feedback Portal
Back to Feed
Request a Feature Report a Bug
Declined
Last Updated: 02 Mar 2021 08:07 by Philip
Philip
Created on: 27 Feb 2021 00:00
Category: UI for Blazor
Type: Feature Request
0
Browser window events

G'day

 

Is there plans to implement browser size binding? (Similar to BlazorSize EdCharbeneau/BlazorSize )

 

For now, with the newly released exposed events on TelerikWindow; LeftChanged and TopChanged, I guess the solution could be to wrap everything in a TelerikWindow? Then run events on these change events?

 

Otherwise.... if we were to use BlazorSize on top of Telerik, would we place the BlazorSize root element inside the TelerikRootComponent or outside?
Just unsure if/how it would interfere......

3 comments
Philip
Posted on: 02 Mar 2021 08:07

Perfect - thankyou for the thorough responses!

 

Regards
Phil

Ed
Posted on: 01 Mar 2021 15:55

Marin's comments are correct.

If you will be listening to resize events, then BlazorSize acts as an injectable service. The service internally hooks on to the window.resize DOM event in a clean and efficient way and throttles the event so there are minimal re-renders.

While BlazorSize's ResizeListener service is efficient, the MediaQueryList component is more efficient. Instead of listening to window.resize it creates and tracks MediaQueries. MediaQueries events are only triggered when a breakpoint has changed, therefore there is no need for throttling and EVEN LESS re-rendering than with ResizeListener.

MediaQueryList is required for MediaQuery components and templates. However, the placement of the MediaQueryList component will not interfere with the TelerikRootComponent. MediaQueryList does not itself render anything to the render tree, instead it is there to deduplicate MediaQuery references so their events. EX: If you have 5 MediaQuery elements with the same query, the DOM will only have 1 event handler attached, and MediaQueryList will dispatch that event to all 5 elements.

Hope this helps.

If you find that there's an issue with BlazorSize working working with Telerik or otherwise, please feel free to post an issue on the GitHub page for Blazorsize.

 

Thanks!

ADMIN
Marin Bratanov
Posted on: 01 Mar 2021 09:14

Hello Philip,

At the moment, we do not have plans to expose standard browser events through our own package. There are many ways to do that, many caveats and often that would be highly specific to the project. There are also packages that already do that. So, adding such functionality in our package is likely to bring little benefit, but will weigh it down and will require that you add more services and settings than necessary, especially if you won't be using this type of functionality.

As to your question - I strongly advise against wrapping everything in a window to get position changed events because 1) these are events about the position, not the size and 2) there are far better ways to react to the viewport size changing (such as the BlazorSize package).

On the blazor size package - to the best of my knowledge it does not require a root element. If you are referring to the MediaQueryList element - it is not mandatory (especially if you will only be reacting to the window.resize event), and if you will use that element, it will have to wrap all components that will use its MediaQuery component - whether that includes the Telerik popups is up to you. If it does - put it above the TelerikRootComponent.

Regards,
Marin Bratanov
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/.

Create an account Log In
View
Type
Status
Category