Inject MediaQuery into code behind

1 Answer 213 Views
MediaQuery
Rob
Top achievements
Rank 2
Iron
Veteran
Iron
Rob asked on 14 May 2021, 01:36 PM

I was using Ed Charbenaeau's BlazorSize, but wanted to remove the extra dependency now that similar functionality is built into UI for Blazor.

Is there an analogue to the IResizeListener/ResizeListener class? I have a base class component that's injecting IResizeListener, I didn't see a method to do that with Telerik.

Thanks!

1 Answer, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 17 May 2021, 09:54 AM

Hi Rob,

The Telerik UI for Blazor suite does not provide a service for the window.resize event the browser raises. If you need that, you can implement your own, or use a third-party library like BlazorSize.

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/.

Greg
Top achievements
Rank 1
commented on 16 Sep 2021, 09:24 PM

The BlazorSize site says the exact opposite - that you do NOT need to use it when using Telerik MediaQuery. Which is correct?
Rob
Top achievements
Rank 2
Iron
Veteran
Iron
commented on 16 Sep 2021, 09:40 PM

The website is correct for the MediaQuery component. However Blazorsize also has a resizelistener class that triggers events on resize, Telerik Blazor doesn't have an equivalent for this. 




 

Greg
Top achievements
Rank 1
commented on 11 May 2022, 01:29 AM

Can Telerik provide an example of how to implement a ResizeListener that captures the window.resize and works with the Telerik MediaQuery control?
Marin Bratanov
Telerik team
commented on 11 May 2022, 04:10 AM

Hi everyone, it is important to make a distinction between the two "libraries", their purpose and intended use:

The TelerikMediaQuery is a wrapper over CSS media queries JS API that is useful for having markup-like declaration for boolean logic in your components. Thus, it is simple to use, but also kind of limited to front-end runtime. It does not intend to provide a listener to the window.resize event.

Other event-based approaches (like Ed's BlazorSize) give you an event through DI so you can use it in any way you like - more flexible in some cases, but requires more work in others.

Thus, you don't need either if you are using the other, but there is no reason you can't use both, depending on what you need in that particular project/logic/scenario.

Greg, the BlazorSize tool can give you that event, and there is no such thing as "make it work with the Telerik MediaQuery component" - these are two different pieces of code that are not intended to integrate with one another, they are intended to give you, the application developer, some flexibility and info around the viewport size.

Greg
Top achievements
Rank 1
commented on 11 May 2022, 05:26 AM

Thanks for the clarification Marin.

Unfortunately I have never been able to get the BlazorSize tool to work - I've tried a number of times but have never been able to resolve the numerous exceptions it generates at runtime. If there were some example projects demonstrating it in use in conjunction with Telerik controls that would be great - but I have never seen a working example to help implement it.

Marin Bratanov
Telerik team
commented on 11 May 2022, 05:23 PM

A quick grep in the sample projects repo shows this one and this one use this package, so likely it works there. I am not aware of issues with its integration with the Telerik components, as there is no specific integration between them.
Tags
MediaQuery
Asked by
Rob
Top achievements
Rank 2
Iron
Veteran
Iron
Answers by
Marin Bratanov
Telerik team
Share this question
or