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:

• Shrink the browser width. Hide a column, show it back and then show its column menu.
• Start from a wide browser. Show a column menu. Shrink the browser. Show the same column menu.
• Start from a narrow browser. Show a column menu. Expand the browser. Show the same column menu.

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.

• Case 1: click a date cell to enter edit mode, then click outside the Grid — edit mode terminates.
• Case 2: click a date cell to enter edit mode, open the DatePicker popup, then click outside the Grid — the popup closes but the cell remains stuck in edit mode until pressing Esc or clicking another cell.

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; }
    }
}

I am resetting the Grid State by calling Grid.SetState(null). This doesn't reset ColumnState<T>.Locked boolean to false and the columns remain locked.

---

ADMIN EDIT

---

A possible workaround for the time being is to additionally loop through the ColumnStates collection of the State and set the Locked property to false for each column.

Example: https://blazorrepl.telerik.com/QTYmkpvb49c6CPxa42

Bug Description

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

Steps to reproduce the behavior:

1. Go to https://blazorrepl.telerik.com/mgEobKlm00OJm8OW55
2. Click the DropDownList to show its list
3. Inspect the second item in the browser dev tools

Also reproducible in: https://dojo.telerik.com/ZVOXYUsb/3

Expected Behavior

The item that has no text should have the same height as items that have text.

Actual Behavior

The height of the span.k-list-item-text is 0px.

Screenshots/Videos

Environment Information

Affected Theme(s)

• All themes

Affected Component(s)

Please specify the component(s) where the bug occurs: ___________

Affected Suites

• Kendo UI for jQuery
• Telerik UI for Blazor
• Telerik UI for ASP.NET Core
• Telerik UI for ASP.NET MVC
• likely others as well

Browser Information

• All browsers

Build System Information

Reproduction Case

CodePen/StackBlitz/JSFiddle Link

https://blazorrepl.telerik.com/mgEobKlm00OJm8OW55

https://dojo.telerik.com/ZVOXYUsb/3

Sample Code

<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;
    }
}

Workaround

<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>

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.

Draft feature request (copy/paste)

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

Description

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.

Steps To Reproduce

1. Run this example: https://blazorrepl.telerik.com/QqudFlYZ18zv7Gv547
2. Drag a column header to the right border of the Grid.

Actual Behavior

The Grid does not scroll horizontally while the column is dragged.

Expected Behavior

The Grid scrolls horizontally while dragging the column and allows dropping it beyond the currently visible columns.

Browser

All

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

No response

Description

When clicking a Grid row and the Grid is in GridDataLayoutMode.Stacked mode, the RowClick event fires twice.

Steps To Reproduce

1. Run this example: https://blazorrepl.telerik.com/QgkmvDvQ296Ea3Ij28
2. Click a row in the Grid

Actual Behavior

The RowClick event fires twice.

Expected Behavior

The RowClick event fires once.

Browser

All

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

No response

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";
         }
     }
 }

The Grid's CheckBoxColumn doesn't support the TextAlign property, making it impossible to center the checkbox with just Grid markup, you have to resort to a workaround.

The TextAlign property in other columns causes style="text-align: center" to be added to the underlying table cell.  This would also work for the checkbox column.

See this test:

<table class="table">
    <tr>
        <td class="table-active" style="width: 40px; text-align: center"><input type="checkbox" /> </td>
        <td>test</td>
    </tr>
</table>

Please add the TextAlign property to the CheckboxColumn.

I want to reorder the Grid rows the same way I can reorder the columns - via the keyboard.

For reference: Telerik jQuery Grid drag and drop

Column headers and column data do not match after reordering. 

See this example: https://blazorrepl.telerik.com/GKkFcwlF54CvZoVp34 

1. Reorder Group 1 and Group 2.

2. The column headers within these 2 groups are not reordered with their parent.

Reordering should work according to the rules specified in the documentation: https://www.telerik.com/blazor-ui/documentation/components/grid/columns/multi-column-headers#reordering

Hello,

 there is inconsistency/behaviour/order in events of the Grid: OnStateInit and OnRead. Which leads to scenario with no clear sollution and would be nice to fix it, and how to solve it as "hotfix".
Also i think its not new in 12.x. release, it exists longer ;)

<TelerikGrid TItem="GData" @ref="gHL" OnRead=@GReadItems OnStateInit="@OnStateGHL">
...
<GridAggregates>
@if(1==2){...}
</GridAggregates>
@code{
protected async Task GReadItems(GridReadEventArgs args)
{
	**hack for C)
	if(gHL==null)return;//state init AVOID 2x call gread PRIOR OnStateInit
...// must be called:
args.AggregateResults = rr.ToDataSourceResult(args.Request).AggregateResults;
...
}
void OnStateGHL(GridStateEventArgs<GData> args) //or async Task doesnt matter
{
//default SORTing:args.GridState = new GridState<GData>
	{
		SortDescriptors = new List<Telerik.DataSource.SortDescriptor>
	{
		new Telerik.DataSource.SortDescriptor{ Member = nameof(GData.DatPorizeni), SortDirection = Telerik.DataSource.ListSortDirection.Descending },
		//new Telerik.DataSource.SortDescriptor{ Member = nameof(GData.Skupina), SortDirection = Telerik.DataSource.ListSortDirection.Ascending }

	}
	};
}
}
	

Problematic scenarios, single page, same grid:

A) when NO aggregates markup EXISTS at all
1. OnStateInit
2. OnRead  - gHL IS NULL
=OK

B) when EMPTY aggregates markup EXISTS
1. OnRead
2. OnStateInit
=FAIL
HOW to read and ui data with correct STATE?
https://www.telerik.com/blazor-ui/documentation/components/grid/state

cannot call gHL.rebind, also gHL is null
NONE initinal "sorting,filtering etc" is set, WRONG data,columns,displayed to the user


C) when SOME real aggregates markup EXISTS
1. OnRead
2. OnStateInit
3. OnRead
=partial FAIL("**hack used"), but managed by if(gHL==null)return


D) "hotfix" used with  GridAggregates="@( HasAggregates ? GridAggregatesTemplate : null )"
act as A or C, but gHL is always null, which is also bad againts C)

Expected:
ALWAYS only A) - First 1.OnStateInit THEN 2.OnRead. its the best one, without any additional hacks = UNIFY the event orders and behaviour.
OR
A) or C)
everything else is unmanagable.
 Especially when initial sorting "is must" and aggregates,columns and so on, are managed by user(non static)
B) is completly WRONG: incorrect event order of OnStateInit and OnRead
D) is againts C) (cannot detect reference of gHL)

related to:
https://feedback.telerik.com/blazor/1654029-onstateinit-does-not-fire-if-gridaggregates-exists-but-is-empty

https://www.telerik.com/forums/grid-onstateinit-event-and-onread-event-chaos

OR how to solve it generally = what is the way to LOAD gridState, and after that, LOAD Data by defined GridState?

Thanks