Hello,

I am currently reworking an old webapp with server-side Blazor and Telerik UI for Blazor. I noticed that TelerikDialogs kind of break the rerendering of child components if the TelerikDialog and all of its content are placed inside their own component:

<PageTitle>Home</PageTitle>

<EditWithDialog @ref="EditDialogInside"></EditWithDialog>

Where EditWithDialog is (basically) defined as follows:

<TelerikDialog @ref="Dialog" @bind-Visible="@Visible">
	<DialogTitle>
		Edit ID
	</DialogTitle>
	<DialogContent>
		<div>
			<div>TelerikDialog inside of component</div>
			<TelerikTextBox Value="@AppState.CustomerString" OnChange="@SetID" Width="300px"></TelerikTextBox>
			<TelerikButton OnClick="@GenerateID">Generate ID</TelerikButton>
		</div>
	</DialogContent>
	<DialogButtons>
		<TelerikButton OnClick="@ToggleVisible">Close</TelerikButton>
	</DialogButtons>
</TelerikDialog>

However, if the TelerikDialog is placed on a page and its content is placed inside of its own component, everything works as expected:

<PageTitle>Home</PageTitle>
<TelerikDialog @bind-Visible="@Visible">
	<DialogTitle>
		Edit ID
	</DialogTitle>
	<DialogContent>
		<div>
			<div>TelerikDialog outside of component</div>
			<EditWithoutDialog @ref="EditDialogOutside"></EditWithoutDialog>
		</div>
	</DialogContent>
	<DialogButtons>
		<TelerikButton OnClick="@ToggleEditOutside">Close</TelerikButton>
	</DialogButtons>
</TelerikDialog>

EditWithoutDialog.razor:

<TelerikTextBox Value="@AppState.CustomerString" OnChange="@SetID" Width="300px"></TelerikTextBox>
<TelerikButton OnClick="@GenerateID">Generate ID</TelerikButton>

I am using the state-container approach described here, but the problem persists when using two-way binding via parameters.

In this scenario, putting the dialog directly on the page is not a problem, but with larger applications where there's possibly multiple dialogs and a lot more content on one page, this can become very unwieldy and confusing. Considering Blazors emphasis on making components reusable, this also prevents proper use of a customized dialog component that uses the TelerikDialog as a base.

I have attached a small project that implements both versions on a single page for you to test. I have tested using both Edge and Firefox.

Hi there,

I have a TelerikGrid with a DateTime column. I use a custom FilterEditorFormat which is localizable depending on the user settings, e.g. "dd/MM/yyy HH:mm:ss". Unfortunately, any '/' in the date component is always replaced by the current culture's DateSeparator. Using any other separator works, e.g. '-'. 

Expectation: Use the FilterEditorFormat without modification, unless it's a standard format string like "g" or "D".

I already traced it down to Telerik's FormatHelper class and it seems like a quick fix.

Steps to reproduce:

• Create a TelerikGrid with a DateTime column and a FilterEditorFormat as shown above.
• If required, change the DateSeparator to anything else but '/'.
• Run and open the filter dialog

Please let me know if you need any additional information.

Best regards

Andreas

Hello,

related to my previous bug report.

When Add / Edit is clicked in the Grid, it causes a Dialog to open. 

The dialog has a Form, and if the model for that form is set through OnParametersSet, the method is called in an infinite loop, and the Dialog never gets shown.

Hello,

 after uprading fron 7.1.0 to version 8.0.0

on IOS v 16.2, or any version before 17, telerik ui stopped working with this error after navigating between pages:

Microsoft.JSInterop.JSException: Could not find 'TelerikBlazor.initMediaQuery' ('TelerikBlazor' was undefined).

even, when mediaquery is not present at the 2 pages between navigating occurs.(login->landing page)

what iam tried on NEW clean device(so no caching troubles):
- changing order of scripts in app.razor
- adding defer
- addin autostart=false + DOM event
https://www.telerik.com/blazor-ui/documentation/getting-started/what-you-need#javascript-file

- any kind of browsers(on ios everything is webkit-safari)
- independent test on external emulator ip12 ios 16.2
https://appetize.io/app/standalone_lahzvlutkzrno7sqs36cqlj5wy?device=iphone12&osVersion=16.2

attached examples are for comparing of descriped attemps to get it work - both failed. But on v7.1.0, works ok - both.

Is there any breaking changes, which must be modified to get it working?
Thanks

     Dear all,

     Please, Can you send the source code for this template with Arabic language     https://demos.telerik.com/blazor-coffee/

    Please add Arabic translate from right to left automatic when select Arabic language

I've been looking at your Keyboard Navigation page:
https://demos.telerik.com/blazor-ui/grid/keyboard-navigation

If you are navigating in the Grid and arrow over to the "+" sign and press ENTER it expands the Details. Then you can press TAB to access the button within the details. Great. Your demo works fine.

However, on my grid, I have another grid in my Details section. I would like to be able to expand the Details section and then TAB into those details so I can access the link in the header of the grid, and also be able to use arrow keys to navigate around this sub grid. Well, honestly MOSTLY I just wanted to be able to tab to the "View Checkout History" link within the Details grid. See attached screenshot.

However, pressing TAB after expanding the details simply moves the focus to the first button in the next column of that row. It doesn't go into the Details section like your web demo does for a button.

Please expand your Keyboard Navigation capabilities to allow more navigation into the Details section other than just a button like your demo shows. I'll bet a lot of people probably have sub-grids within their details section.

Thanks!

Using Microsoft Visual Studio Professional 2022 (64-bit) - Current Version 17.11.0

Trying to create a new Telerik for Blazor project using Telerik C# Blazor Application Template.

Visual Studio freezes after I Name the project and click create. Only way to exit out of Visual Studio is to kill it through task manager.

Trying your project walk through for Blazor, RpsTrackingBlazor, After I add the nuget packages and try to add the using statement to _imports.razor as in the tutorial I get the error that the type or namespace name telerik could not be found.

Your project uses <TargetFramework>netcoreapp3.1</TargetFramework>

I also tried framework net8.0

Hi Telerik Team,

when using the (currently) latest versions of VS (17.11.0) and Blazor 8.0.8 runtimes (and custom css theme version 8.2.0) I get the following error when running my project in debug mode:

TypeError: Cannot read properties of null (reading 'classList')
Stapelüberwachung:
 >  at e.addClass (https://localhost:7038/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1122923)
 >    at v.resetCallout (https://localhost:7038/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1372516)
 >    at v.adjustCalloutPosition (https://localhost:7038/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1372355)
 >    at e.invokeComponentMethod (https://localhost:7038/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1112736)
 >    at https://localhost:7038/_framework/blazor.webassembly.js:1:2878
 >    at new Promise (<anonymous>)
 >    at b.beginInvokeJSFromDotNet (https://localhost:7038/_framework/blazor.webassembly.js:1:2835)
 >    at Object.vn [as invokeJSJson] (https://localhost:7038/_framework/blazor.webassembly.js:1:58849)
 >    at https://localhost:7038/_framework/dotnet.runtime.8.0.8.80cvijctdx.js:3:178428
 >    at Ll (https://localhost:7038/_framework/dotnet.runtime.8.0.8.80cvijctdx.js:3:179262)

It looks like the problem has something to do with a function that wants to set the css "k-callout-e" class to some object.
The problem appears in js when e is null in the following method:
e.classList.add(t)

In this case e = null and t = "k-callout-e". It seems there's no null check for e and VS 2022 reports the problem.

The debugger in VS cannot be disabled for js content as it seems it's the same debugger for Blazor itself.
When hitting F5 to continue multiple times the projects keeps running until it hits the same problem again.

In my project I added a single "TelerikTooltip" component for Tooltips. I tried disabling it but still the same problem.
Maybe the js code is used for some other component.

If you need more information just let me know.

Regards,
Tom

I just spent hours trying to understand why my grid did not work and threw a "source can't be null" exception at me when I set data to a 100% initialized - not null - list of a struct type.. Eventually I figured that the struct was the problem and turning it into a class fixed it, but that was just by chance.

Please for the sake of developer sanity give this a proper check.

We would like to see all the Blazor controls support the ability to show the time in the browser's local time as a feature that can be enabled.  It should support converted from both UTC and server time.

A question on how to do this has been asked at least twice on the forums:

• https://www.telerik.com/forums/using-client-side-time-zone-for-time-columns-in-blazor-server-grid
• https://www.telerik.com/forums/utc-datetimes-as-local-datetimes-and-vice-versa

Some examples of how other's have implemented this as a control can be founde here:

• https://www.meziantou.net/convert-datetime-to-user-s-time-zone-with-server-side-blazor-time-provider.htm
• https://github.com/dustout/BlazorTime

Thanks

Hi,

starting with version 6.0, dialogs used together with loading indicator are at wrong z-index order.

- None of hotfixes with "delay" helped.

- users are stucked and cant confirm anything

How to replicate

Click on "Show Confirm with loading indicator". Loading animation should be at BACK of confirm dialog(as at older versions, prior 6.0)

https://blazorrepl.telerik.com/GeOfQMkt56AMkdof43

Currently using Telerik.DataSource.QueryableExtensions.CreateDataSourceResult() results in queryable.Count() + queryable.Skip(...).Take(...). done seperatelly. EF Core specific tests are already present it seems, based on decompiled code, I can see: "if (!sort.Any() && queryable.Provider.IsEntityFrameworkProvider())". 

Request: Add support for other ORM's that are more capable than EF Core. In case of pagination, window-function could be used to save from extra count query. A short sample bellow:

var dbResults = await queryable
	.Select(x => new {
		Item = x,
		TotalCount = Sql.Ext.Count().Over().ToValue()
	})
	.Skip(() => offset)
	.Take(() => limit)
	.ToListAsync();

var count = dbResults.FirstOrDefault()?.TotalCount ?? 0;
var items = dbResults.Select(x => x.Item);

Read more about Window functions: https://statics.teams.cdn.office.net/evergreen-assets/safelinks/1/atp-safelinks.html 

See below repl

https://blazorrepl.telerik.com/GeYodYvp135zJH7N22

The first dropdown is populated correctly, it is not in a FormItem or Template

The second one, populated in the same way but inside a FormItem context does not show the data, it only redraws and shows data when entering another control i.e. the other working dropdown.

This was previously working when the application was using .net 6 and Telerik 3.6.1
It has since been updated to .net 8 and Telerik 5.1.1

What is the correct way to populate this?
Can you provide more information?

Thanks.

Hi,

We use compact sized grid all the time in our application.

However, with sorting and filtering enabled, the icons take too much space in the header cell and make the actual header text hard to read.

Please consider scale down those icons and reduce padding.

Thanks and best regards,

Peili

Demo: https://blazorrepl.telerik.com/mSOIQZvO51cwrorJ49

===ADMIN EDIT===

To reduce the size of the icons and the font in a Compact Grid, you can follow the approach from the knowledge base article How to make Compact Grid elements smaller.

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:

https://docs.telerik.com/blazor-ui/components/grid/columns/width?_gl=1*78gyue*_ga*MzUzNTU3NTM0LjE2ODU2MTc3Njk.*_ga_9JSNBCSF54*MTcxMjIyMTAxNS44My4xLjE3MTIyMjExMzQuOS4wLjA.*_gcl_au*MTA3OTA1NzUyOS4xNzEwNTE1Njgy&_ga=2.263164300.1038437897.1712221016-353557534.1685617769

A sensible behaviour is to have the horizontal scrolling enabled and at the same time being able to set the grid to percentage width.

Hi,
I have a little problem with changing the LoadGroupsOnDemand value. Depending on the data in my grid, I set this value to true or false. When updating grid data requires changing the LoadGroupsOnDemand value, I can't do it this way:

LoadGroupsOnDemand = true;
GridData = result;
GridRef.SetStateAsync(GridRef.GetState());

This code throws me an exception.
I need to do something like this to make it work:

LoadGroupsOnDemand = true;
GridRef.LoadGroupsOnDemand = LoadGroupsOnDemand;
GridData = result;
GridRef.SetStateAsync(GridRef.GetState());

This is the code that is executed in onclick. After OnRead is executed, the exception is thrown.

Let me know if you need more information.