Hi, It is possible to have a component that enables the use of the camera and to be able to scan barcodes or QR (1D & 2D), for Blazor Web assembly and Blazor Server Side. Now this require JavaScript library like as QuaggaJS.
I think that having such a component is very useful and will allow you to build applications with advanced functionalities, other companies offer but only to generate barcodes or QR codes.
Example thanks aLorsSilvermort : https://github.com/LorsSilvermort/BlazorBarcodeReader
Best Rgards,
Victor Antelo
It would be great if the controls supported arbitrary attributes. Similar to how it is done in the native form editing controls in Blazor framework.
ASP.NET Core Blazor forms and validation
"All of the input components, including EditForm, support arbitrary attributes. Any attribute that doesn't match a component parameter is added to the rendered HTML element."
<input class="form-control" readonly="@(!EditMode)" type="text" @bind="@FormField.TextValue"/>As far as I can tell none of the Telerik input controls support a read only mode. Putting the same attribute on TelerikDropDownList for instance (not surprisingly) results in this:
The CSS classes used by Blazor UI are not documented. (I haven't looked outside the Blazor area, so maybe it's somewhere else in the docs? My team has no need for other Telerik products.) On a similar note, the Themes page in the documentation explains how to reference alternate themes like Bootstrap, but it doesn't explain how to actually use the classes, or how it integrates with the real Bootstrap CSS, which have many various useful, well-known utilities like margin and padding settings, which don't seem to be part of the Telerik theme support. (I'm an architect at a very large corporation, we do have one of those includes-everything DevCraft licenses, I just can't log in with that account.)
For the Grid, is is possible to have a a SortField along with Field (that displays the data) in columns.
The SortField will be used instead of Field when sorting (if Grid is Sortable), like in WebForms: https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.gridview.sortexpression?view=netframework-4.8.
Maybe you want to sort data based on other values instead of what is displayed.
This could be especially useful for dates that have been formatted for display in Field
but you don't want to use for sorting because date and string sorting is not the same.
All controls (such as TelerikGrid, TelerikDropDownList, etc) should have a "Visible" property. This bindeable boolean value controls whether the control is visible on the page or not:
<TelerikGrid Visible="@IsVisible" />
@functions {
protected bool IsVisible
}
This is a much better method than surrounding the entire control's markup in an @if(IsVisible) block, since that causes the control to get removed/added to the dom at runtime. This can cause many issues such as the control's constructors being fired multiple times, the dom getting "jiggled" about unecessarily.
I feel the "Visible" property is a cleaner way to hide controls.
in blazor ui version 2.24.1 I use this code in program.cs for globalization:
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
builder.Services.AddTelerikBlazor();
// register a custom localizer for the Telerik components, after registering the Telerik services
builder.Services.AddSingleton(typeof(ITelerikStringLocalizer), typeof(SampleResxLocalizer));
var host = builder.Build();
await SetCultureAsync(host);
await host.RunAsync();
}
private static async Task SetCultureAsync(WebAssemblyHost host)
{
var jsRuntime = host.Services.GetRequiredService<IJSRuntime>();
var cultureName =await jsRuntime.InvokeAsync<string>("blazorCulture.get");
if (cultureName != null)
{
var culture = new CultureInfo("fa-IR");
DateTimeFormatInfo info = culture.DateTimeFormat;
info.AbbreviatedDayNames = new string[] { "ی", "د", "س", "چ", "پ", "ج", "ش" };
info.DayNames = new string[] { "یکشنبه", "دوشنبه", "ﺳﻪشنبه", "چهارشنبه", "پنجشنبه", "جمعه", "شنبه" };
info.AbbreviatedMonthNames = new string[] { "فروردین", "ارديبهشت", "خرداد", "تير", "مرداد", "شهریور", "مهر", "آبان", "آذر", "دی", "بهمن", "اسفند", "" };
info.MonthNames = new string[] { "فروردین", "ارديبهشت", "خرداد", "تير", "مرداد", "شهریور", "مهر", "آبان", "آذر", "دی", "بهمن", "اسفند", "" };
info.AMDesignator = "ق.ظ";
info.PMDesignator = "ب.ظ";
info.ShortDatePattern = "yyyy/MM/dd";
info.FirstDayOfWeek = DayOfWeek.Saturday;
CultureInfo.DefaultThreadCurrentCulture = culture;
CultureInfo.DefaultThreadCurrentUICulture = culture;
}
}
when use TelerikDatePicker , id dosenot work properly. the code of my component in here:
<div class="demo-section k-form k-form-vertical">
<div class="k-form-field">
<label for="travel-date" class="k-label k-form-label">Travel Date</label>
<div class="k-form-field-wrap">
<TelerikDatePicker Min="@Min" Max="@Max" @bind-Value="@selectedDate" Id="travel-date"></TelerikDatePicker>
</div>
</div>
<div class="k-form-field">
<p>The selected travel date is: <strong>@selectedDate?.ToShortDateString()</strong></p>
<p>The selected travel date is: <strong>@selectedDate?.ToString()</strong></p>
<p>The selected travel date is: <strong>@selectedDate?.ToUniversalTime()</strong></p>
<p>The selected travel date is: <strong>@selectedDate?.ToLongDateString()</strong></p>
</div>
</div>
@code {
public DateTime Max = new DateTime(2050, 12, 31);
public DateTime Min = new DateTime(1950, 1, 1);
private DateTime? selectedDate=DateTime.Now;
}
when click the datepicker the date is not correct :
--- FOR FUTURE REQUEST ---
Could be very useful to scrolling tha grid to a specific item\row (in Normal Grd and also in Virtual Grid mode, both) programmatically. Whithout javascript.
For example after loading a grid that show 20 items, programmatically is it possible to go (and display in grid) not the first 20 rows but for example at row 100. So the vertical scrolling bar muso go dow sice arriving and show that row.
Best Regards
Paolo Leonesi
Hi,
It would be VERY helpful if you integrated "Prevent the Grid from wrapping text in multiple lines and show ellipsis" into grid as an option (so we would not have to write separate code and style).
I think this is one of the most needed features since grids almost always have data that wraps line.
BR, Smiljan
Unable to insert the html in editor using inbuilt HtmlCommandArgs feature provided by the Editor. It only inserts the first element. Tried to wrap the entire html in a div but it doesnt work.
The sample code is below.
@page "/editor/overview"
@using Telerik.Blazor.Components.Editor
<TelerikEditor @ref="Editor" @bind-Value="@Value"
Tools="@Tools"
Height="880px">
<EditorCustomTools>
<EditorCustomTool Name="InsertField">
<TelerikButton OnClick="@OnInsertField">Insert</TelerikButton>
</EditorCustomTool>
</EditorCustomTools>
</TelerikEditor>
@code{
private TelerikEditor Editor {get;set;}
public List<IEditorTool> Tools { get; set; } =
new List<IEditorTool>()
{
new CustomTool("InsertField")
};
public string Value { get; set; } =
@"
<p>Hi</p><p>
<img src=""data:image/png;base64,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"" alt="""" contenteditable=""false"" draggable=""true"">
<img class=""ProseMirror-separator"" alt=""""><br class=""ProseMirror-trailingBreak"">
</p><p><a href=""https://www.google.com/?safe=active&ssui=on"">Link</a></p><p>Phone</p>
";
private async Task OnInsertField()
{
await Editor.ExecuteAsync(new
HtmlCommandArgs("insertHtml",
$"<div>{Value}</div>", true));
}
}
Reloading the page described down below cause memory leak. Commenting lines with telerik button prevents the problem.
@page "/"
<h3 style="position:absolute; top: 0; z-index: 1000; margin-top: 10px">Home</h3>
↓ commenting these lines prevents the memory leak
<div>
<TelerikButton OnClick="@SayHelloHandler" Primary="true">Say Hello</TelerikButton>
<div>@helloString</div>
</div>
↑ commenting these lines prevents the memory leak
@code {
List<string> strings = new List<string>();
MarkupString helloString;
protected override void OnInitialized()
{
// Attempt to clear memory with Garbage Collector
GC.Collect();
GC.WaitForPendingFinalizers();
for (int i = 0; i < 1000000; i++)
{
string a = "asdasdasdasdddddddddasasdasdasdasdddddddddasasdasdasdasdddddddddasasdasdasdasdddddddddasasda";
strings.Add(a + "b");
}
base.OnInitialized();
}
void SayHelloHandler()
{
string msg = string.Format("Hello from <strong>Telerik Blazor</strong> at {0}.<br /> Now you can use <b><u><i>C#</i></u></b> to write front-end!", DateTime.Now);
helloString = new MarkupString(msg);
}
}
MainLayout.razor:
@layout TelerikLayout
@inherits LayoutComponentBase
<style>
.navmenu .k-drawer-items {
margin-top: 3.5rem;
}
.navmenu .k-widget.k-drawer {
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 100%);
}
.k-drawer-container {
height: 100vh;
}
.btn-margin, .btn-margin:hover {
width: 48px;
height: 56px;
color: #FFF;
}
.navmenu .k-drawer {
color: #ffffffd6;
}
.navmenu .k-drawer-item:hover, .navmenu .k-drawer-item.k-state-hover {
color: #ffffffd6;
background-color: #f0f0f012;
}
.navmenu .k-drawer-item:hover.k-state-selected {
color: #ffffff;
background-color: #7bafff94;
}
.navmenu .k-drawer-item:not(:hover).k-state-selected {
color: #ffffff;
background-color: #7bafffbd;
}
.navmenu .k-drawer:hover .k-drawer-wrapper {
width: 240px;
}
.navmenu .k-drawer .k-drawer-wrapper {
transition-duration: 300ms !important;
}
</style>
<TelerikDrawer Data="@NavigablePages" MiniMode="true" Mode="@DrawerMode.Push" SelectedItem="SelectedItem" Class="navmenu sidebar"
SelectedItemChanged="ChangeSelectedItem" TItem="DrawerItem">
<Content>
<div class="page">
<div class="main">
<div class="top-row px-4 auth">
</div>
<div class="content px-4">
@Body
</div>
</div>
</div>
</Content>
</TelerikDrawer>
@code {
List<DrawerItem> NavigablePages { get; set; } =
new List<DrawerItem>
{
new DrawerItem { Text = "Home", Url = "/", Icon = "home" }
};
public class DrawerItem
{
public string Text { get; set; }
public string Url { get; set; }
public string Icon { get; set; }
public bool IsSeparator { get; set; }
}
DrawerItem SelectedItem { get; set; }
private void ChangeSelectedItem(DrawerItem chosenItem)
{
SelectedItem = chosenItem;
}
}This code is example. The main problem was with TelerikGrid. Usage of any telerik component caused the same memory leak.
Hi,
I'm in the process of implementing a form in a Window component and would like the content to remain present in the DOM between hiding and showing of the window. I noticed that there's a line in the documentation where it states that PersistContent will allow the content of the window to remain in the DOM whenever the window is minimized. I recommend this be extended to the Visibility of the form, not just minimizing, as to create a more coherent approach.
I did come across this post here where it gives a description of how the above is achieved. This is a very inelegant approach as the consumer of the framework has to manually implement stuff which should be provided by the framework. The suggested approach also prevents the developer from opening multiple windows at once, which might be an issue in some cases.
Hi,
This kind of behavior causes duplicate OnRead calls for the same range. If the OnRead method invokes a request to the API it will result in duplicate requests with the same range.
After update to 3.0.0 TextArea autosize no longer works.
AutoSize is no longer one of the available properties.
Also Label is no longer an available property.
In my blazor application, I have to use a numeric box component . In order to do that, I have created a custom numeric box component like below. my issue is while I am typing something on the numeric box, time to time some characters are automatically getting cleared. I have to type those again and again .i don't know what is the issue behind this.
<span @onfocusin="@FocusComponentAsync" @ref="@InputWrapperRef">
<TelerikNumericTextBox Value="Amount"
ValueChanged="(decimal val)=>OnBlNumercChanged(val)"
Arrows=false>
</TelerikNumericTextBox>
</span>
@code{
private ElementReference InputWrapperRef { get; set; }
private decimal Amount;
protected override void OnParametersSet()
{
this.StateHasChanged();
base.OnParametersSet();
}
private async void OnBlNumercChanged(decimal value)
{
//code
}
public async void OnNumericBoxKeyUp(KeyboardEventArgs e){
//code
}
public async Task FocusComponentAsync()
{
await _jsRuntime.InvokeVoidAsync("highlightInput", InputWrapperRef);
}
}
window.highlightInput = (inputWrapper) => {
var input = inputWrapper.querySelector("input");
if (!input) return;
input.select();
}
We are based in the US; but want to display values in a numeric text box based on the culture of the place where the data was entered.
So if the data was entered in the UK, we want the number to be formatted according to UK culture, etc. That way, it's easy to tell that number is representing pounds vs dollars, etc.
Can we please get the ability to set culture to specific controls? We don't want to change the current thread culture for everything on the page, just for one control.
thanks!
While using Safari browser, I am getting following exception message:
SyntaxError: Unexpected private name #a. Cannot parse class method with private name.
blazor.webassembly.js:1:35655crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Could not find 'TelerikBlazor.getLocationHost' ('TelerikBlazor' was undefined).
https://mywebsite.com/_framework/blazor.webassembly.js:1:337
forEach@[native code]
findFunction@https://mywebsite.com/_framework/blazor.webassembly.js:1:303
https://mywebsite.com/_framework/blazor.webassembly.js:1:3326
Promise@[native code]
beginInvokeJSFromDotNet@https://mywebsite.com/_framework/blazor.webassembly.js:1:3317
St@https://mywebsite.com/_framework/blazor.webassembly.js:1:59961
_mono_wasm_invoke_js_blazor@https://mywebsite.com/_framework/dotnet.6.0.9.6fcfkep18v.js:1:195318
wasm-stub@[wasm code]
<?>.wasm-function[219]@[wasm code]
<?>.wasm-function[167]@[wasm code]
<?>.wasm-function[166]@[wasm code]
<?>.wasm-function[2815]@[wasm code]
<?>.wasm-function[1619]@[wasm code]
<?>.wasm-function[1623]@[wasm code]
<?>.wasm-function[118]@[wasm code]
wasm-stub@[wasm code]
118@[native code]
https://mywebsite.com/_framework/dotnet.6.0.9.6fcfkep18v.js:1:219007
managed_BINDINGS_SetTaskSourceResult
https://mywebsite.com/_framework/dotnet.6.0.9.6fcfkep18v.js:1:154658
promiseReactionJob@[native code]
Microsoft.JSInterop.JSException: Could not find 'TelerikBlazor.getLocationHost' ('TelerikBlazor' was undefined).
https://mywebsite.com/_framework/blazor.webassembly.js:1:337
forEach@[native code]
findFunction@https://mywebsite.com/_framework/blazor.webassembly.js:1:303
https://mywebsite.com/_framework/blazor.webassembly.js:1:3326
Promise@[native code]
beginInvokeJSFromDotNet@https://mywebsite.com/_framework/blazor.webassembly.js:1:3317
St@https://mywebsite.com/_framework/blazor.webassembly.js:1:59961
_mono_wasm_invoke_js_blazor@https://mywebsite.com/_framework/dotnet.6.0.9.6fcfkep18v.js:1:195318
wasm-stub@[wasm code]
<?>.wasm-function[219]@[wasm code]
<?>.wasm-function[167]@[wasm code]
<?>.wasm-function[166]@[wasm code]
<?>.wasm-function[2815]@[wasm code]
<?>.wasm-function[1619]@[wasm code]
<?>.wasm-function[1623]@[wasm code]
<?>.wasm-function[118]@[wasm code]
wasm-stub@[wasm code]
118@[native code]
https://mywebsite.com/_framework/dotnet.6.0.9.6fcfkep18v.js:1:219007
managed_BINDINGS_SetTaskSourceResult
https://mywebsite.com/_framework/dotnet.6.0.9.6fcfkep18v.js:1:154658
promiseReactionJob@[native code]
at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__16`1[[System.String, System.Private.CoreLib, Version=6.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].MoveNext()
at Telerik.Blazor.Components.Dialog.DialogBuilder.OnAfterRenderAsync(Boolean firstRender)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task , ComponentState )
5blazor.webassembly.js:1:35655crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Could not find 'TelerikBlazor.initMediaQuery' ('TelerikBlazor' was undefined).
https://mywebsite.com/_framework/blazor.webassembly.js:1:337
forEach@[native code]
findFunction@https://mywebsite.com/_framework/blazor.webassembly.js:1:303
https://mywebsite.com/_framework/blazor.webassembly.js:1:3326
Promise@[native code]
beginInvokeJSFromDotNet@https://mywebsite.com/_framework/blazor.webassembly.js:1:3317
St@https://mywebsite.com/_framework/blazor.webassembly.js:1:59961
_mono_wasm_invoke_js_blazor@https://mywebsite.com/_framework/dotnet.6.0.9.6fcfkep18v.js:1:195318
wasm-stub@[wasm code]
<?>.wasm-function[219]@[wasm code]
<?>.wasm-function[167]@[wasm code]
<?>.wasm-function[166]@[wasm code]
<?>.wasm-function[2815]@[wasm code]
<?>.wasm-function[1619]@[wasm code]
<?>.wasm-function[1623]@[wasm code]
<?>.wasm-function[118]@[wasm code]
wasm-stub@[wasm code]
118@[native code]
https://mywebsite.com/_framework/dotnet.6.0.9.6fcfkep18v.js:1:219007
managed_BINDINGS_SetTaskSourceResult
https://mywebsite.com/_framework/dotnet.6.0.9.6fcfkep18v.js:1:154658
promiseReactionJob@[native code]
Microsoft.JSInterop.JSException: Could not find 'TelerikBlazor.initMediaQuery' ('TelerikBlazor' was undefined).
https://mywebsite.com/_framework/blazor.webassembly.js:1:337
forEach@[native code]
findFunction@https://mywebsite.com/_framework/blazor.webassembly.js:1:303
https://mywebsite.com/_framework/blazor.webassembly.js:1:3326
Promise@[native code]
beginInvokeJSFromDotNet@https://mywebsite.com/_framework/blazor.webassembly.js:1:3317
St@https://mywebsite.com/_framework/blazor.webassembly.js:1:59961
_mono_wasm_invoke_js_blazor@https://mywebsite.com/_framework/dotnet.6.0.9.6fcfkep18v.js:1:195318
wasm-stub@[wasm code]
<?>.wasm-function[219]@[wasm code]
<?>.wasm-function[167]@[wasm code]
<?>.wasm-function[166]@[wasm code]
<?>.wasm-function[2815]@[wasm code]
<?>.wasm-function[1619]@[wasm code]
<?>.wasm-function[1623]@[wasm code]
<?>.wasm-function[118]@[wasm code]
wasm-stub@[wasm code]
118@[native code]
https://mywebsite.com/_framework/dotnet.6.0.9.6fcfkep18v.js:1:219007
managed_BINDINGS_SetTaskSourceResult
https://mywebsite.com/_framework/dotnet.6.0.9.6fcfkep18v.js:1:154658
promiseReactionJob@[native code]
at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__16`1[[System.Boolean, System.Private.CoreLib, Version=6.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].MoveNext()
at Telerik.Blazor.Components.TelerikMediaQuery.InitMediaQueryWidget()
at Telerik.Blazor.Components.TelerikMediaQuery.OnAfterRenderAsync(Boolean firstRender)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task , ComponentState )
blazor.webassembly.js:1:35655crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Could not find 'TelerikBlazor.initDrawer' ('TelerikBlazor' was undefined).
https://mywebsite.com/_framework/blazor.webassembly.js:1:337
forEach@[native code]
findFunction@https://mywebsite.com/_framework/blazor.webassembly.js:1:303
https://mywebsite.com/_framework/blazor.webassembly.js:1:3326
Promise@[native code]
beginInvokeJSFromDotNet@https://mywebsite.com/_framework/blazor.webassembly.js:1:3317
St@https://mywebsite.com/_framework/blazor.webassembly.js:1:59961
_mono_wasm_invoke_js_blazor@https://mywebsite.com/_framework/dotnet.6.0.9.6fcfkep18v.js:1:195318
wasm-stub@[wasm code]
<?>.wasm-function[219]@[wasm code]
<?>.wasm-function[167]@[wasm code]
<?>.wasm-function[166]@[wasm code]
<?>.wasm-function[2815]@[wasm code]
<?>.wasm-function[1619]@[wasm code]
<?>.wasm-function[1623]@[wasm code]
<?>.wasm-function[118]@[wasm code]
wasm-stub@[wasm code]
118@[native code]
https://mywebsite.com/_framework/dotnet.6.0.9.6fcfkep18v.js:1:219007
managed_BINDINGS_SetTaskSourceResult
https://mywebsite.com/_framework/dotnet.6.0.9.6fcfkep18v.js:1:154658
promiseReactionJob@[native code]
Microsoft.JSInterop.JSException: Could not find 'TelerikBlazor.initDrawer' ('TelerikBlazor' was undefined).
https://mywebsite.com/_framework/blazor.webassembly.js:1:337
forEach@[native code]
findFunction@https://mywebsite.com/_framework/blazor.webassembly.js:1:303
https://mywebsite.com/_framework/blazor.webassembly.js:1:3326
Promise@[native code]
beginInvokeJSFromDotNet@https://mywebsite.com/_framework/blazor.webassembly.js:1:3317
St@https://mywebsite.com/_framework/blazor.webassembly.js:1:59961
_mono_wasm_invoke_js_blazor@https://mywebsite.com/_framework/dotnet.6.0.9.6fcfkep18v.js:1:195318
wasm-stub@[wasm code]
<?>.wasm-function[219]@[wasm code]
<?>.wasm-function[167]@[wasm code]
<?>.wasm-function[166]@[wasm code]
<?>.wasm-function[2815]@[wasm code]
<?>.wasm-function[1619]@[wasm code]
<?>.wasm-function[1623]@[wasm code]
<?>.wasm-function[118]@[wasm code]
wasm-stub@[wasm code]
118@[native code]
https://mywebsite.com/_framework/dotnet.6.0.9.6fcfkep18v.js:1:219007
managed_BINDINGS_SetTaskSourceResult
https://mywebsite.com/_framework/dotnet.6.0.9.6fcfkep18v.js:1:154658
promiseReactionJob@[native code]
at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__16`1[[System.Object, System.Private.CoreLib, Version=6.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].MoveNext()
at Telerik.Blazor.Components.TelerikDrawer`1.<InitDrawer>d__131[[eDubaiTaaruf2022.Shared.MenuItemModel, eDubaiTaaruf2022.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()
at Telerik.Blazor.Components.TelerikDrawer`1.<OnAfterRenderAsync>d__121[[eDubaiTaaruf2022.Shared.MenuItemModel, eDubaiTaaruf2022.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task , ComponentState )
6blazor.webassembly.js:1:35655crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Could not find 'TelerikBlazor.initMediaQuery' ('TelerikBlazor' was undefined).
https://mywebsite.com/_framework/blazor.webassembly.js:1:337
forEach@[native code]
findFunction@https://mywebsite.com/_framework/blazor.webassembly.js:1:303
https://mywebsite.com/_framework/blazor.webassembly.js:1:3326
Promise@[native code]
beginInvokeJSFromDotNet@https://mywebsite.com/_framework/blazor.webassembly.js:1:3317
St@https://mywebsite.com/_framework/blazor.webassembly.js:1:59961
_mono_wasm_invoke_js_blazor@https://mywebsite.com/_framework/dotnet.6.0.9.6fcfkep18v.js:1:195318
wasm-stub@[wasm code]
<?>.wasm-function[219]@[wasm code]
<?>.wasm-function[167]@[wasm code]
<?>.wasm-function[166]@[wasm code]
<?>.wasm-function[2815]@[wasm code]
<?>.wasm-function[1619]@[wasm code]
<?>.wasm-function[1623]@[wasm code]
<?>.wasm-function[118]@[wasm code]
wasm-stub@[wasm code]
118@[native code]
https://mywebsite.com/_framework/dotnet.6.0.9.6fcfkep18v.js:1:219007
managed_BINDINGS_SetTaskSourceResult
https://mywebsite.com/_framework/dotnet.6.0.9.6fcfkep18v.js:1:154658
promiseReactionJob@[native code]
Microsoft.JSInterop.JSException: Could not find 'TelerikBlazor.initMediaQuery' ('TelerikBlazor' was undefined).
https://mywebsite.com/_framework/blazor.webassembly.js:1:337
forEach@[native code]
findFunction@https://mywebsite.com/_framework/blazor.webassembly.js:1:303
https://mywebsite.com/_framework/blazor.webassembly.js:1:3326
Promise@[native code]
beginInvokeJSFromDotNet@https://mywebsite.com/_framework/blazor.webassembly.js:1:3317
St@https://mywebsite.com/_framework/blazor.webassembly.js:1:59961
_mono_wasm_invoke_js_blazor@https://mywebsite.com/_framework/dotnet.6.0.9.6fcfkep18v.js:1:195318
wasm-stub@[wasm code]
<?>.wasm-function[219]@[wasm code]
<?>.wasm-function[167]@[wasm code]
<?>.wasm-function[166]@[wasm code]
<?>.wasm-function[2815]@[wasm code]
<?>.wasm-function[1619]@[wasm code]
<?>.wasm-function[1623]@[wasm code]
<?>.wasm-function[118]@[wasm code]
wasm-stub@[wasm code]
118@[native code]
https://mywebsite.com/_framework/dotnet.6.0.9.6fcfkep18v.js:1:219007
managed_BINDINGS_SetTaskSourceResult
https://mywebsite.com/_framework/dotnet.6.0.9.6fcfkep18v.js:1:154658
promiseReactionJob@[native code]
at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__16`1[[System.Boolean, System.Private.CoreLib, Version=6.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].MoveNext()
at Telerik.Blazor.Components.TelerikMediaQuery.InitMediaQueryWidget()
at Telerik.Blazor.Components.TelerikMediaQuery.OnAfterRenderAsync(Boolean firstRender)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task , ComponentState )
Horizontal scrolling in the grid works when its width is set to a fixed value (px, rem, etc.). But the h scroll disappear when a percentage is assigned to the width of the grid.
This seems to be a known 'feature' to Telerik:
A sensible behaviour is to have the horizontal scrolling enabled and at the same time being able to set the grid to percentage width.