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?
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.
I recall being told I would have access to source code once I buy a licence.
Now that I have a licence, how do I get access to the source so I can do a local build?
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
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?
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,
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?
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!