Grid OnRead .Clear() Issue

With the following component:

@page "/counter"
@using System.Collections.ObjectModel
General grid with its most common features
<TelerikGrid Data="@MyData" Pageable="true" @bind-Page="page" PageSize="5" TotalCount="30" OnRead="@ReadItems" >
    <GridColumns>
        <GridColumn Field="@(nameof(SampleData.Id))" Width="120px" />
        <GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" Groupable="false" />
        <GridColumn Field="@(nameof(SampleData.Team))" Title="Team" />
        <GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />
    </GridColumns>
</TelerikGrid>

@code {
    public List<SampleData> MyData { get; set; } = new List<SampleData>();
    //public ObservableCollection<SampleData> MyData { get; set; } = new ObservableCollection<SampleData>();
    private int page = 1;

    private void ReadItems(GridReadEventArgs args)
    {
        //MyData = new List<SampleData>();  //OK!
        //MyData = new ObservableCollection<SampleData>(); //OK!
        MyData.Clear();  //List: No update. ObservableCollection: System.StackOverflowException!
        Populate();
        StateHasChanged();
    }

    private void Populate()
    {
        foreach (var data in Enumerable.Range((page - 1) * 5, 5).Select(x => new SampleData
        {
            Id = x,
            Name = "name " + x,
            Team = "team " + x % 5,
            HireDate = DateTime.Now.AddDays(-x).Date
        }))
        {
            MyData.Add(data);
        }
    }

    public class SampleData
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public DateTime HireDate { get; set; }
    }
}

I see the issues in the comment fields.  Changing OnRead to async makes no difference.  

The workaround is to assign a new List or ObservableCollection instead of using .Clear()

Hi Telerik Team!

We’ve noticed that your official website uses anchor scrolling (clicking on links to scroll to specific sections smoothly), and we’d love to see that as a Telerik Blazor component.

This would be super useful in scenarios where:

• The only way to present content is via long scrollable pages

• Tabs aren’t a good UX fit

What we’re looking for:

-Smooth scrolling to internal page anchors (sections)

-Scrollspy-like feature to highlight active section

-Optional scroll offset for sticky headers

-Lightweight, flexible integration (with or without Telerik Form/Layout components)

We feel this would be a great addition to the Telerik Blazor suite — especially for documentation-style pages, long forms, or configuration panels.

Thanks a lot and keep up the awesome work!

Best regards,
Bohdan

Hello

The new adaptive toolbar I think doesn't follow the same style as other components, particularly scrollable tabs.

https://demos.telerik.com/blazor-ui/grid/adaptive

The UI scroll buttons shouldn't just disable, they just be hidden/removed from the UI altogether when they are not active (as it is pretty confusing to the user otherwise) - they should only appear when they need to appear. They also take up real-estate for no value.

Telerik already have the same concept in the UI for the scrollable-tabs seen here;

https://demos.telerik.com/blazor-ui/tabstrip/scrollable-tabs

So I see some inconsistency between the 2 UI's and think they should not appear as does on scrollable tabs.

Description

TimePicker bound to a non-nullable DateTime property. User input is marked as invalid, when they change only part of the default TimePicker value.

Steps To Reproduce

1. Run the following REPL example: https://blazorrepl.telerik.com/GpEUOflI50gehA9B54
2. Focus the hour part of the input and type in a number, e.g., 3
3. Blur the TimePicker

Actual Behavior

On beginning to type, the k-invalid class is applied to the TimePicker element. When the use clicks away, the current input value (e.g., 3:00 AM) is replaced with the default value (12:00 AM).

If you type the whole value (e.g., 3:45 AM) and then click away from the component, the k-invalid class is removed and the value is accepted as valid.

Expected Behavior

The k-invalid class should not be applied to the TimePicker in the scenario described above. The used should be able to change only the hour part of the value, or the minutes, without having to type in the whole value.

Browser

All

Last working version of Telerik UI for Blazor (if regression)

8.1.1

Hi,

I'm using two TelerikListBox elements, one left, one right. The right ones Data attribute is bound to already selected items that I get from the DB through EF Core. As you know, EF Core makes use of navigation properties. As you probably also know, the TelerikListBox recursively copies elements on binding. This causes a documented StackOverflowException, as written here -> https://www.telerik.com/blazor-ui/documentation/knowledge-base/common-stackoverflowexception-editing-circular-references.

I fixed the issue by calling 

.Select(x => x.RemoveNavigation())

before binding, with RemoveNavigation being a simple "NavigationProp = null; return this;" function.

Eventhough this works, I think

a) the documented solution is not great, because the navigation properties are very useful, are one of the big reasons to even use EF Core in the first place and are automatically generated by, for example, EF Core Power Tools. Expecting the users to remove them from affected models is not a viable long term solution.

b) it would be better for Telerik to fix the issue by implementing some kind of logic to prevent the issue alltogether. My suggestion would be to ignore virtual, non-collection object properties on copy. 

In the TelerikSignature control, the ExportScale property defaults to 2.  This causes the image size to be doubled without realizing it. While it can be useful to scale the exported image, the default should be 1, because that is the expected default output.

<TelerikSignature @bind-Value="Medlog.Signature" Width="700px" Height="120px" Smooth="true" StrokeWidth="2" PopupScale="2" ExportScale="1">
</TelerikSignature>

Context

The website uses OAuth2 (AzureAd) & https with http version 1 :

"Kestrel": {
"EndpointDefaults": {
"Protocols": "Http1"
}

Glitch

Crash systematically reproduced when user opens website.

Workaround

The issue can be can be manually & individually (per user) fixed by:

• Executing the instruction: Navigation.NavigateTo($"MicrosoftIdentity/Account/SignOut", true);
• Closing Edge browser
• Opening back website
• Answering OAuth 2 challenge (MicrosoftIdentity/Account/SignIn)

Our client is pushing hard for us to find an automatic solution / patch (which doesn't involve making multiple actions for his users like in my workaround).

We would like to get the datetime picker to autofill the year when entering just two digits for the year with a format of dd-MM-yyyy HH:mm:ss.

So when you enter 23-04-25 it changes to 23-04-2025. Currently it changes it to 23-04-0025, which isn't our desired result.

Something along the lines of how this works: https://jsfiddle.net/anbdwL0h/ but then with a 4 year digit format as result.

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

please add support for bind pivotgrid to datatable or expando objects (local mode)

Please consider adding a TooltipTemplate parameter to the GridColumn component to allow developers to define custom tooltips for each cell using the same template logic available in CellTemplate.

Why This Matters

In enterprise applications — especially in ERP dashboards, cutover schedules, and KPI reports — data often needs contextual clarification. While tooltips are supported globally or via title attributes, there’s currently no clean, built-in way to customize tooltips per column using templating logic.

Please consider adding new grid-level properties to control visual styling and editing behavior more intuitively:

• HeaderThemeColor
• ShowGridLines
• EditModeDisplay (e.g., None, ValueOnly, All, Auto)
  

These options would provide teams with greater flexibility to align grids with branding, accessibility, and user interaction standards.

Why This Is Valuable

Grids are the centerpiece of most enterprise applications — and users rely on visual consistency and responsive interaction. Today’s grids need to:

• Match branding and accessibility guidelines (dark/light, color accessibility).
• Visually separate data (e.g., grid lines on for financial reports, off for dashboards).
• Clearly communicate edit state (inline, batch, or value-only editing).
  

These settings would empower developers to deliver purpose-built grids without deep CSS overrides or workarounds.

Please consider adding support for an optional header row indicator that can display a conditional icon + themed tooltip, used to show non-field-level validation or status messages — especially during inline or in-cell editing, and ideally in batch edit scenarios.

Why This Is Needed

In enterprise applications — especially those with batch entry workflows, cutover planning, or financial approvals — validation needs often extend beyond just field-level errors. Common use cases include:

• Rule-level messages (e.g., “Only one Primary Owner allowed per group”).
• Cross-row or cross-field issues (e.g., overlapping dates, missing dependencies).
• Batch edit feedback (e.g., conflict indicators before submit).

Currently, there’s no clean way to show column-specific validation or guidance in a visual, inline way that:

• Doesn’t clutter the cell.
• Surfaces at the column level (just like a header).
• Feels native to the grid.

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.

In many cases the header text of columns gets truncated to an ellipses if the columns aren't wide enough.  It would be nice if there was a global way to display a tooltip for each column header that is made up of the header text.  I know that I can do this using the column header template, but that will require that I create a template for every column in all of my grids. I'm looking for a way to have it work globally. This could be with a general header template that has context about the header Title, or just a Boolean flag to display column header tooltips.

Thanks,

Mike

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