The Grid resets and disables the adaptive mode for a column menu if the column has been hidden. The component also uses the previous adaptive mode that is no longer correct if the browser window is resized.
Steps to reproduce:
Test page:
<TelerikGrid Data="@GridData"
AdaptiveMode="@AdaptiveMode.Auto"
FilterMode="GridFilterMode.FilterMenu"
ShowColumnMenu="true">
<GridColumns>
<GridColumn Field="@nameof(Product.Name)" />
<GridColumn Field="@nameof(Product.Group)" />
<GridColumn Field="@nameof(Product.Price)" DisplayFormat="{0:c2}" />
<GridColumn Field="@nameof(Product.Quantity)" DisplayFormat="{0:n0}" />
<GridColumn Field="@nameof(Product.Released)" DisplayFormat="{0:d}" />
<GridColumn Field="@nameof(Product.Discontinued)" />
</GridColumns>
</TelerikGrid>
@code {
private List<Product> GridData { get; set; } = new();
protected override void OnInitialized()
{
var rnd = Random.Shared;
for (int i = 1; i <= 3; i++)
{
GridData.Add(new Product()
{
Id = i,
Name = $"Name {i} {(char)rnd.Next(65, 91)}{(char)rnd.Next(65, 91)}",
Group = $"Group {i % 3 + 1}",
Price = rnd.Next(1, 100) * 1.23m,
Quantity = rnd.Next(0, 10000),
Released = DateTime.Today.AddDays(-rnd.Next(60, 1000)),
Discontinued = i % 4 == 0
});
}
}
public class Product
{
public int Id { get; set; }
public string Name { get; set; } = string.Empty;
public string Group { get; set; } = string.Empty;
public decimal Price { get; set; }
public int Quantity { get; set; }
public DateTime Released { get; set; }
public bool Discontinued { get; set; }
}
}
Customers report inconsistent in-cell editing behavior with DatePicker columns in the Grid.
Here is a REPL test page that reproduces the issue (first date column) and provides a workaround (second date column):
https://blazorrepl.telerik.com/QAErkrEh090ykIxR16
The workaround relies on Grid EditorTemplate, the DatePicker OnClose event, and programmatic Grid edit mode management. The relevant code is:
@using System.ComponentModel.DataAnnotations
<TelerikGrid @ref="@GridRef"
Data="@GridData"
EditMode="@GridEditMode.Incell"
OnUpdate="@OnGridUpdate"
OnCreate="@OnGridCreate">
<GridToolBarTemplate>
<GridCommandButton Command="Add">Add Item</GridCommandButton>
</GridToolBarTemplate>
<GridColumns>
<GridColumn Field="@nameof(Product.Name)" />
<GridColumn Field="@nameof(Product.StartDate)" Title="BUG" DisplayFormat="{0:d}" />
<GridColumn Field="@nameof(Product.EndDate)" Title="WORKAROUND" DisplayFormat="{0:d}">
<EditorTemplate>
@{ var editItem = (Product)context; }
<TelerikDatePicker Value="editItem.EndDate"
ValueChanged="@((DateTime? newValue) => OnGridDatePickerValueChanged(newValue, editItem))"
ValueExpression="@( () => editItem.EndDate )"
OnClose="@(async () => await OnGridDatePickerClose(editItem))" />
</EditorTemplate>
</GridColumn>
</GridColumns>
</TelerikGrid>
@code {
#nullable enable
private TelerikGrid<Product>? GridRef;
private List<Product> GridData { get; set; } = new();
private int LastId { get; set; }
private DateTime LastDatePickerValueChanged { get; set; } = DateTime.Now;
private void OnGridDatePickerValueChanged(DateTime? newValue, Product editItem)
{
editItem.EndDate = newValue;
LastDatePickerValueChanged = DateTime.Now;
}
private async Task OnGridDatePickerClose(Product editItem)
{
if (DateTime.Now - LastDatePickerValueChanged > TimeSpan.FromMilliseconds(500))
{
GridState<Product> gridState = GridRef!.GetState();
if (gridState.EditItem is not null && gridState.EditItem.Id == editItem.Id)
{
// Uncomment to perform an item update instead of cancel
// OnGridUpdate(new GridCommandEventArgs { Item = editItem });
gridState.OriginalEditItem = null!;
gridState.EditItem = null!;
await GridRef.SetStateAsync(gridState);
}
}
}
private void OnGridCreate(GridCommandEventArgs args)
{
var createdItem = (Product)args.Item;
createdItem.Id = ++LastId;
GridData.Insert(0, createdItem);
}
private void OnGridUpdate(GridCommandEventArgs args)
{
var updatedItem = (Product)args.Item;
var originalItemIndex = GridData.FindIndex(i => i.Id == updatedItem.Id);
if (originalItemIndex != -1)
{
GridData[originalItemIndex] = updatedItem;
}
}
protected override void OnInitialized()
{
for (int i = 1; i <= 5; i++)
{
GridData.Add(new Product()
{
Id = ++LastId,
Name = $"Product {LastId}",
Price = Random.Shared.Next(0, 100) * 1.23m,
Quantity = Random.Shared.Next(0, 1000),
StartDate = DateTime.Today.AddDays(-Random.Shared.Next(60, 1000)),
EndDate = DateTime.Today.AddDays(Random.Shared.Next(1, 60)),
IsActive = LastId % 4 > 0
});
}
}
public class Product
{
public int Id { get; set; }
[Required]
public string Name { get; set; } = string.Empty;
public decimal Price { get; set; }
public int Quantity { get; set; }
public DateTime? StartDate { get; set; }
public DateTime? EndDate { get; set; }
public bool IsActive { get; set; }
}
}
Possibly related to https://github.com/telerik/blazor/issues/2594
(optional)
The first locked column (ID) is rendered after the second locked column (Product Name). When you resize a non-locked column, the ID column disappears and is revealed at its new position after you scroll the Grid horizontally.
The behavior is reproducible with RTL enabled.
The order of the locked columns should persist.
An exception occurs if a Grid row is dropped in another empty Grid in RTL mode:
Error: System.FormatException: the input string '-1' was not in a correct format.
Introduced in v13.1.0. An item that has no text (empty string) renders a span (.k-list-item-text) with height 0px.
Steps to reproduce the behavior:
Also reproducible in: https://dojo.telerik.com/ZVOXYUsb/3
The item that has no text should have the same height as items that have text.
The height of the span.k-list-item-text is 0px.
Please specify the component(s) where the bug occurs: ___________
https://blazorrepl.telerik.com/mgEobKlm00OJm8OW55
https://dojo.telerik.com/ZVOXYUsb/3
<TelerikDropDownList Data="@DropDownListData" @bind-Value="DropDownListValue" />
@code {
private List<string> DropDownListData = new List<string>() { "Item1", string.Empty, "Item3" };
private string DropDownListValue { get; set; } = string.Empty;
protected override void OnInitialized()
{
DropDownListValue = string.Empty;
}
}<style>
.k-list-item-text {
min-height: 20px;
}
</style>
Title: WCAG 1.3.1: Ensures elements with an ARIA role that require child roles contain them (#\39 374a450-079d-4586-b823-d6bc7723505f)
Tags: Accessibility, WCAG 1.3.1, aria-required-children
Issue: Ensures elements with an ARIA role that require child roles contain them (aria-required-children - https://accessibilityinsights.io/info-examples/web/aria-required-children)
Target application: Hermes Home - https://localhost/TrafficLoss
Element path: #\39 374a450-079d-4586-b823-d6bc7723505f
Snippet: <div class="k-grid-aria-root" id="9374a450-079d-4586-b823-d6bc7723505f" role="grid" aria-label="Data table">
How to fix:
Fix any of the following:
Element has children which are not allowed (see related nodes)
Element has no aria-busy="true" attribute
Environment: Microsoft Edge version 111.0.1661.41
====
This accessibility issue was found using Accessibility Insights for Web 2.37.3 (axe-core 4.6.3), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.
============================ code =============================
<TelerikGrid Data="@ViewModel.RDLInformation" TItem="TLSummary"
Pageable="true"
Sortable="true"
Groupable="false"
FilterMode="Telerik.Blazor.GridFilterMode.FilterRow"
Resizable="true"
Reorderable="true"
Height = "100%">
....
</TelerikGrid>
Hi,
The ask is for a feature request to take the already wonderfully done globally applied filter features down to a per column basis without the overhead and burden of resorting to the custom FilterMenuTemplate approach.
The current way of doing business creates much overhead in code particularly when several columns are involved.
Something like:
<TelerikGrid Data="@MyData"
FilterMode="@GridFilterMode.PerColumn"
<GridColumns>
<GridColumn Field="MyField01" FilterMode="@GridFilterColumnMode.FilterRow" />
<GridColumn Field="MyField02" FilterMode="@GridFilterColumnMode.FilterMenu" />
<GridColumn Field="MyField03" Filterable="false"/>
etc..
</GridColumns>
</TelerikGrid>
Thanks!
Ron
In a filterable Grid, if a column is not bound to a field from the model the Grid uses, it throws with:
Error: System.ArgumentNullException: Value cannot be null. (Parameter 'nullableType')
Reproduction: https://blazorrepl.telerik.com/GyEUlFEs04AUJoJ601.
The issue is reproducible :
===
ADMIN EDIT
===
A possible workaround for the time being is to set the FieldType of the column: https://blazorrepl.telerik.com/wSugvFui10jhcpZy00.
If LoadGroupsOnDemand="false", I am able to programmatically expand the groups through the state. However, this is not possible when loading group data on demand.
Please allow programmatically expanding the groups when LoadGroupsOnDemand="true". This should go together with an event (OnStateChanged?) that will fire when LOD groups are expanded or collapsed.
Title: Add per-column value converters (WPF-style) to Telerik Blazor Grid columns
Product: UI for Blazor → Grid
Type: Feature Request
Description:
In Telerik UI for WPF, grid column definitions can reference a converter by name (e.g., IValueConverter) to transform values for display without writing a custom cell template for each column.
In Telerik UI for Blazor Grid, templates are currently the primary way to change how values render in a column (which works, but becomes repetitive across many columns/grids).
Request:
Add a column-level conversion API that allows specifying a converter/formatter function for display (and optionally editing). Example concepts:
Converter="nameof(MyConverters.StatusToText)"
or DisplayConverter="(item) => …" / ValueFormatter="Func<TItem, object, string>"
optionally ConvertBack-like support for editing scenarios (or separate EditConverter)
Why this is needed:
Reduces repeated <Template> markup for simple formatting/transformations
Centralizes formatting/conversion logic in reusable code
Improves maintainability and consistency across grids
Eases migration for teams coming from Telerik WPF where converters are a common pattern
Use cases:
Enum/int → user-friendly text
Boolean → “Yes/No”, icons, badges
Null/empty → placeholder text
Code → display name (via lookup)
Domain-specific formatting shared across many grids
Workarounds today:
Column <Template> or computed properties (both valid, but not as concise/reusable for large grids)
Extracting RenderFragments can reduce repetition, but still requires templating infrastructure for what is logically a simple conversion step
Expected behavior:
Converter applies consistently anywhere the column renders (cell, export if applicable, etc.)
Works with sorting/filtering in a predictable way (ideally sorting/filtering still uses raw field value unless explicitly configured)
Hi,
I would like to have a Expand/Collapse All Grid Groups button in the Grid Header. I know this is possible to do so programmatically outside of the grid but my users want it inside the Grid.
Thanks,
Humayoon
A column cannot be reordered by dragging beyond the currently visible columns of the Grid. This significantly limits the column reorder functionality only to the visible viewport.
The Grid does not scroll horizontally while the column is dragged.
The Grid scrolls horizontally while dragging the column and allows dropping it beyond the currently visible columns.
All
No response
When clicking a Grid row and the Grid is in GridDataLayoutMode.Stacked mode, the RowClick event fires twice.
The RowClick event fires twice.
The RowClick event fires once.
All
No response
I created a subclass of the TelerikGrid to extend the limited built-in search functionality.
To do that, I use the GridStateChanged event to rewrite the SearchFilter: I replace the default filter with a more complex CompositeFilterDescriptor (including highlighting). This works perfectly during normal interaction.
Now I also want the search to be persisted, so that after reloading the page the grid shows the same search again. Saving the grid state is not a problem, but when restoring the saved state during OnStateInit / GridStateInit, the following exception occurs:
Unable to cast object of type 'Telerik.DataSource.CompositeFilterDescriptor' to type 'Telerik.DataSource.FilterDescriptor'.
System.InvalidCastException: Unable to cast object of type 'Telerik.DataSource.CompositeFilterDescriptor' to type 'Telerik.DataSource.FilterDescriptor'.
at Telerik.Blazor.Components.Common.TableGridBase`2.LoadSearchFilter(IFilterDescriptor descriptor)
at Telerik.Blazor.Components.TelerikGrid`1.SetStateInternalAsync(GridState`1 state)
at Telerik.Blazor.Components.TelerikGrid`1.InvokeOnStateInit()
at Telerik.Blazor.Components.TelerikGrid`1.OnParametersSetAsync()
at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)
fail: Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]
Unhandled exception in circuit 'MYsaCsOgfpbyHeO0xNFpA7ViPHNUC6rpc1K9eIwVR5Y'.
System.InvalidCastException: Unable to cast object of type 'Telerik.DataSource.CompositeFilterDescriptor' to type 'Telerik.DataSource.FilterDescriptor'.
at Telerik.Blazor.Components.Common.TableGridBase`2.LoadSearchFilter(IFilterDescriptor descriptor)
at Telerik.Blazor.Components.TelerikGrid`1.SetStateInternalAsync(GridState`1 state)
at Telerik.Blazor.Components.TelerikGrid`1.InvokeOnStateInit()
at Telerik.Blazor.Components.TelerikGrid`1.OnParametersSetAsync()
at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)I also tried saving the search term and the selected columns separately and then restoring the state in OnAfterRender, but at that point the SearchFilter can no longer be set.
Sincerly Daniel
The following KB article shows a workaround for removing the Grid aggregate labels ("Sum" and "Count") from the exported Excel document: https://www.telerik.com/blazor-ui/documentation/knowledge-base/grid-remove-aggregate-labels-in-excel-footr
It would be nice to have this option as a parameter in the Grid. It would allow to toggle on/off this behavior, instead of having to rely on custom code to work around it.
Or in the OnBeforeExport method, add extra data to GridBeforeExcelExportEventArgs that contains the aggregates so they can be changed.
private async Task OnBeforeExcelExport(GridBeforeExcelExportEventArgs args)
{
await Task.CompletedTask;
// Loop through all columns and fix the footer aggregate values
// Replace the default "Sum: 1234.56" text with just the decimal number
foreach (var column in args.Columns)
{
if (column.HasAggregate)
{
// Set the number format for the column so Excel treats it as a number
column.Aggregate.Field.Value == "MyNewValue";
}
}
}