Telerik Forums
UI for Blazor Forum
1 answer
444 views

Hi all,

I've been trying to get new Blazor projects off the ground with Telerik 4.4, and had some luck with WASM but unfortunately Blazor Server I cannot get to work.

I have kept my projects simple, following the guidance set out in the Getting Started articles but every time run into the same error in the web client.

Error: Microsoft.JSInterop.JSException: Maximum call stack size exceeded
RangeError: Maximum call stack size exceeded
    at e.deepExtend (https://localhost:7144/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1075205)
    at e.deepExtend (https://localhost:7144/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1075502)
    at e.deepExtend (https://localhost:7144/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1075440)
    at e.deepExtend (https://localhost:7144/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1075440)
.... (repeats)

   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
   at Telerik.Blazor.Components.TelerikMediaQuery.InitMediaQueryWidget()
   at Telerik.Blazor.Components.TelerikMediaQuery.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

This stops any Telerik components from working, and leaves me a bit stuck!

Anyone seen similar? Or know of a workaround?

Dimo
Telerik team
 answered on 14 Dec 2023
1 answer
41 views
I find myself using css container queries a lot in conjunction with the TelerikDrawer.  I would really like to be able to use the MediaQuery control to set parameters based on the container size instead of the screen size.  
Dimo
Telerik team
 answered on 10 Nov 2023
1 answer
35 views

I had a problem with the TelerikGridLayout, in conjunction with a MediaQuery where on First render it was not rendering any of the objects.

After a lot of investigation I found an article that used an IEnumerable to bind to the grid and not a list. After using an IEnumerable, my objects rendered perfectly and were responsive.

 

Anyone having problems with the TelerikGridLayout, make sure to use an IEnumerable and not a List to bind to the grid.

Svetoslav Dimitrov
Telerik team
 answered on 29 Aug 2023
0 answers
103 views

Hi everyone,

I've tried to use the Media Query Component, and it worked and all was fine in Chrome on the simulator, also on Android Devices, but when I arrived to test the design on iPhone that didn't work. Then I belived that maybe it's Safari the problem and I downloaded Chrome on iPhone, but I had the same issue on Chrome too. I don't know how to solve it, maybe if I will try from CSS directly to solve it will work.

I have checked the viewport meta tag, I believed that was missing, but no, it was there in the _Host.cshtml file.
Does anyone encountered this issue till now?
My app is a Server Side Blazor app.

Thank you in advance.
Best regards,
Cipri

Ciprian Daniel
Top achievements
Rank 1
Iron
Iron
Iron
 asked on 20 Aug 2022
1 answer
206 views

I'm getting the error:

Exception: 
Microsoft.JSInterop.JSException: this.mediaQueryList.addEventListener is not a function. (In 'this.mediaQueryList.addEventListener("change",this.onMediaChange)', 'this.mediaQueryList.addEventListener' is undefined)
value

On ipad.

Is there a fix for it?

 

Svetoslav Dimitrov
Telerik team
 answered on 03 May 2022
2 answers
208 views

Hello.

I am testing the widgets and I see that these, in general, use non-scalable units. Consequently what I am doing is overwriting the CSS applied to these to get a responsiveness site. This takes quite a bit of time which is why I ask you if there is a relatively simple way to scale the font size of the components based on the viewport size?

Regards,

Blazorist
Top achievements
Rank 2
Bronze
Iron
Iron
 answered on 02 Sep 2021
3 answers
3.5K+ views

I am trying to use Telerik Blazor's MediaQuery at the base page. That page, for me is, MainLayout.razor.

First, I separated the code-behind for the MainLayout and had to introduce a base class for my properties as MainLayout already inherits LayoutComponentBase:

MainLayout.razor


@using DA.BrrMs.Portal.Blazor.Helpers

@inherits MainLayoutModel

@layout TelerikLayout

<TelerikMediaQuery Media="@WindowBreakPoints.ExtraSmall" OnChange="@(matches => IsExtraSmall = matches )"/>
<TelerikMediaQuery Media="@WindowBreakPoints.Small"      OnChange="@(matches => IsSmall = matches )"/>
<TelerikMediaQuery Media="@WindowBreakPoints.Medium"     OnChange="@(matches => IsMedium = matches )"/>
<TelerikMediaQuery Media="@WindowBreakPoints.Large"      OnChange="@(matches => IsLarge = matches )"/>
<TelerikMediaQuery Media="@WindowBreakPoints.ExtraLarge" OnChange="@(matches => IsExtraLarge = matches )"/>

<Header @bind-StateCssClass="@NavMenuCssClass"></Header>

<div class="main">
    <div class="sidebar @NavMenuCssClass">
        <NavMenu />
    </div>
    <div class="container-fluid px-2">
        @Body
    </div>
</div>

MainLayout.razor.cs


using DA.BrrMs.Portal.Blazor.Base;

namespace DA.BrrMs.Portal.Blazor.Shared
{
    public class MainLayoutModel : BaseLayout
    {
        protected string NavMenuCssClass { get; set; }
    }
}

BaseLayout.cs


using Microsoft.AspNetCore.Components;

namespace DA.BrrMs.Portal.Blazor.Base
{
    public class BaseLayout : LayoutComponentBase
    {
        protected bool IsExtraSmall { get; set; }
        protected bool IsSmall      { get; set; }
        protected bool IsMedium     { get; set; }
        protected bool IsLarge      { get; set; }
        protected bool IsExtraLarge { get; set; }
    }
}

With this done, at very late hours, I realized there is no code level link between a MainLayout and any other page and I cannot access the IsSmall property in my dashboard page. I need to change the layout itself is screen is small or less for my mobile clients and that's another reason for me doing this at MainLayout level

Any proper way to accomplish this?

DoomerDGR8
Top achievements
Rank 2
Iron
Iron
Iron
 answered on 01 Aug 2021
1 answer
69 views
Hello,

How can I mock TelerikMediaQuery for testing (with bUnit) ?

Regards
Marin Bratanov
Telerik team
 answered on 28 May 2021
1 answer
216 views

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!

Marin Bratanov
Telerik team
 answered on 17 May 2021
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?