(bug report only)
Regression introduced in 13.0.0.
1. Run this example: https://blazorrepl.telerik.com/wUuSGClv00orFeRm59
(optional)
The Size, Rounded, FillMode parameters are ignored.
The parameter values should apply and change the appearance of the SearchBox.
Hi Support,
I have an issue with the DragToSelect feature of a Telerik grid in Blazor when this grid is inside a TelerikWindow.
Summary
When a TelerikGrid configured with GridSelectionSettings DragToSelect="true" is rendered inside the <WindowContent> of a <TelerikWindow>, the drag-to-select (rubber-band) behavior is not working properly — the user can only select cells/rows via individual clicks.
Single-click selection continues to work in both cases. The issue is specific to the drag gesture.
Steps to reproduce
Create a page with a TelerikWindow set to Visible="true".
Inside <WindowContent>, place a TelerikGrid with:
SelectionMode="@GridSelectionMode.Multiple"
SelectedCells / SelectedCellsChanged bound
<GridSettings><GridSelectionSettings SelectionType="@GridSelectionType.Cell" DragToSelect="true" /></GridSettings>
Open the window and try to select multiple cells by pressing the mouse button on a cell and dragging over neighboring cells.
Expected behavior
A rubber-band selection rectangle appears and all cells the pointer passes over become selected — same as when the identical grid is placed on a regular page (outside a modal window).
Actual behavior
Drag selection occur rarely. Only the single cell under the initial mousedown gets selected. The rubber-band rectangle rarely appears, and SelectedCellsChanged fires with a single descriptor instead of the full drag range.
Minimal repro (REPL-ready)
<TelerikWindow Visible="true" Width="800px" Height="500px">
<WindowTitle>Repro</WindowTitle>
<WindowContent>
<TelerikGrid Data="@Data" TItem="SampleItem"
SelectionMode="@GridSelectionMode.Multiple"
SelectedCells="@SelectedCells"
SelectedCellsChanged="@((IEnumerable<GridSelectedCellDescriptor> c) => SelectedCells = c)">
<GridSettings>
<GridSelectionSettings SelectionType="@GridSelectionType.Cell" DragToSelect="true" />
</GridSettings>
<GridColumns>
<GridColumn Field="@nameof(SampleItem.Id)" />
<GridColumn Field="@nameof(SampleItem.Name)" />
</GridColumns>
</TelerikGrid>
</WindowContent>
</TelerikWindow>
@code {
public record SampleItem(int Id, string Name);
private List<SampleItem> Data = Enumerable.Range(1, 20).Select(i => new SampleItem(i, $"Item {i}")).ToList();
private IEnumerable<GridSelectedCellDescriptor> SelectedCells = Enumerable.Empty<GridSelectedCellDescriptor>();
}
Now my questions :
- Is this a known limitation of DragToSelect when the grid is inside a modal TelerikWindow?
- Is there an officially supported workaround (CSS pointer-events tweak on .k-overlay, event capture override, grid setting, etc.)?
- If it is a bug, could you open a public issue we can track?
Many thanks you in advance.
Franck Boisdé
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>
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
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
When going fast over the Grid rows with the mouse cursor, the rows are highlighted after a delay. The delay is more noticeable on higher resolutions (2560x1440 or higher).
In the app that targets .NET10 the row hover styles are applied with a delay, whereas in the app that targets .NET8 the hover styles are applied as soon as the mouse enters the boundaries of a row.
Similar performance in applying hover-related styles.
All
No response