I am using InCell Grid editing. I want to prevent an edit cell from closing on certain condition. However, when I cancel the update with args.IsCancelled = true in OnUpdate, the user can still close the edited cell with Enter or Tab. This is inconsistent with inline or popup editing.
===
A possible workaround is to cancel both OnUpdate and the subsequent OnEdit.
https://blazorrepl.telerik.com/QykMHkks10APuDLQ47
@using System.ComponentModel.DataAnnotations
<TelerikGrid Data="@GridData"
EditMode="@GridEditMode.Incell"
OnEdit="@OnGridEdit"
OnUpdate="@OnGridUpdate">
<GridColumns>
<GridColumn Field="@nameof(SampleModel.Name)" />
<GridColumn Field="@nameof(SampleModel.Min)" />
<GridColumn Field="@nameof(SampleModel.Max)" />
</GridColumns>
</TelerikGrid>
<TelerikNotification @ref="@NotificationRef"
HorizontalPosition="@NotificationHorizontalPosition.Center"
VerticalPosition="@NotificationVerticalPosition.Top" />
@code {
private TelerikNotification? NotificationRef { get; set; }
private List<SampleModel> GridData { get; set; } = new();
private bool ShouldCancelOnEdit { get; set; }
private int LastId { get; set; }
private void OnGridEdit(GridCommandEventArgs args)
{
if (ShouldCancelOnEdit)
{
ShouldCancelOnEdit = false;
args.IsCancelled = true;
}
}
private void OnGridUpdate(GridCommandEventArgs args)
{
var updatedItem = (SampleModel)args.Item;
if (updatedItem.Min > updatedItem.Max)
{
NotificationRef?.Show(new NotificationModel()
{
ThemeColor = ThemeConstants.Notification.ThemeColor.Error,
Text = "Min must be smaller than Max"
});
args.IsCancelled = true;
ShouldCancelOnEdit = true;
}
else
{
var originalItemIndex = GridData.FindIndex(i => i.Id == updatedItem.Id);
if (originalItemIndex != -1)
{
GridData[originalItemIndex] = updatedItem;
}
ShouldCancelOnEdit = false;
}
}
protected override void OnInitialized()
{
for (int i = 1; i <= 5; i++)
{
GridData.Add(new SampleModel()
{
Id = ++LastId,
Name = $"SampleModel {LastId}",
Min = Random.Shared.Next(1, 10),
Max = Random.Shared.Next(11, 20)
});
}
}
public class SampleModel
{
public int Id { get; set; }
[Required]
public string Name { get; set; } = string.Empty;
public int Min { get; set; }
public int Max { get; set; }
}
}
The behavior is reproducible in server-side apps when using the Inline or Incell mode and editing numerical values.
When inputting into the field the first value input is either ignored or removed. The default is 0, when backspacing to clear it and then inputting a number, sometimes the number is shown and then immediately removed, and sometimes it's not shown at all and will only displayed when typed a second time.
===
ADMIN EDIT
===
Possible workarounds for the time being:
My Grid uses a lot of data (more than 200 000 records). I noticed that only in Firefox the export fails if the file is large - approximately 60MB.
The export of such large files works well in Chrome and Edge.
The scenario is:
In this case, the Grid should not try to create or clone an edit item on its own. Instead, it should rely on the returned instance from OnModelInit. However, the Grid first fires OnModelInit and then it still tries to clone or create an edit item, which causes an exception.
A possible workaround is to manage the whole edit process manually, similar to the example with ListView popup editing.
I have a Grid with row selection and column virtualization. After selecting all rows and zooming out my browser to 80% or less, the column virtualization stops working - data is not loaded in the cells on vertical scroll.
I use a custom filter row for the Grid where I have added a custom component holding the filter cell content. I am saving the Grid state upon change and restoring it on initialization.
I noticed that the custom filter component is initialized before the Grid state. As a result, there is an applied filter but the input in the custom filter component does not show it.
This behaviour was new since version 6.0.0. With 5.1.1 it doesn't appear.
I have a grid that can have a large number of pages and is intended to be able to be viewed on a small width device.
The issue is that upon loading the grid and its data, the pager of the grid isn't changing how it's displayed even though it is supposed to be adaptive.
If the page is manually resized, only then does the pager correctly show as a dropdown.
I've reproduced this in a REPL, though it seems slightly inconsistent as opposed to my main project where it is able to be reproduced every time.
In the attached gif, notice that upon loading the page, the grid shows the pager as a list of numbers as it would if the page was a large width screen, but when resizing the page slightly, it is triggered to show the pages as a dropdown, which I believe is the intended behavior.
Is this issue known and is there a way to trigger the grid to redraw its pager after the data is loaded, or some other form of workaround for this without implementing a custom pager template?
Please consider adding built-in support for a TextTruncationWithAction or TruncateWithButton mode on GridColumn components. This feature would display long text as truncated with ellipsis (...) and a button or icon to reveal the full content, such as in a modal or popover.
Why This Is Needed
In enterprise applications like ERP, cutover planning, or audit logs, we often display descriptions, notes, or comments that can span multiple lines. However:
Please consider extending the GridColumn component to include fine-grained header presentation properties, such as:
These enhancements would dramatically improve clarity and usability in complex data grids.
Why This Is Important
In enterprise-grade applications — like ERP dashboards, financial reporting, or cutover schedules — grids are dense and loaded with meaning. Users rely heavily on headers to interpret the data beneath, especially when:
Please consider adding new grid-level properties to control visual styling and editing behavior more intuitively:
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:
These settings would empower developers to deliver purpose-built grids without deep CSS overrides or workarounds.
Refreshing the Grid data frequently may cause performance issues.
The focus indicator on the GridSearchBox is broken when using an outline themes like A11Y, Bootstrap etc.
Temporarily override the overflow style on .k-toolbar-items (e.g., overflow: unset;) using custom CSS to restore the focus indicator.
Please add support for programmatic exporting of Grids (SaveAsExcelFileAsync() and ExportToExcelAsync() ) with a GridExcelExportOptions argument and multi-column headers.
===
A potential workaround is to programmatically click the built-in export command button, which can even be hidden:
@using Telerik.Blazor.Components.Grid
@inject IJSRuntime JS
<PageTitle>Home</PageTitle>
<TelerikGrid Data="@GridData">
<GridToolBarTemplate>
<TelerikButton OnClick="@ExportGridWithOtherColumns">Export Programmatically</TelerikButton>
<GridCommandButton Class="hidden-export-button" Command="ExcelExport">Export Natively</GridCommandButton>
</GridToolBarTemplate>
<GridSettings>
<GridExcelExport OnBeforeExport="@OnGridBeforeExport" />
</GridSettings>
<GridColumns>
<GridColumn Field="@nameof(Product.Id)" Width="100px" />
<GridColumn Field="@nameof(Product.Name)" Width="120px" />
<GridColumn Title="Product Details">
<Columns>
<GridColumn Field="@nameof(Product.Group)" Width="180px" />
<GridColumn Field="@nameof(Product.Price)" DisplayFormat="{0:c2}" Width="120px" />
<GridColumn Field="@nameof(Product.Quantity)" DisplayFormat="{0:n0}" Width="120px" />
<GridColumn Field="@nameof(Product.Released)" DisplayFormat="{0:d}" Width="180px" />
<GridColumn Field="@nameof(Product.Discontinued)" Width="100px" />
</Columns>
</GridColumn>
</GridColumns>
</TelerikGrid>
<style>
.hidden-export-button {
display: none;
}
</style>
<script suppress-error="BL9992">
function clickExportCommandButton() {
let hiddenExportButton = document.querySelector(".hidden-export-button");
if (hiddenExportButton) {
hiddenExportButton.click();
}
}
</script>
@code {
private List<Product> GridData { get; set; } = new();
private void OnGridBeforeExport(GridBeforeExcelExportEventArgs args)
{
List<string> exportableColumnFields = new List<string> { nameof(Product.Name), nameof(Product.Price), nameof(Product.Quantity) };
List<GridExcelExportColumn> ColumnsToExport = new();
foreach (GridExcelExportColumn column in args.Columns)
{
if (exportableColumnFields.Contains(column.Field))
{
ColumnsToExport.Add(column);
}
}
args.Columns = ColumnsToExport;
}
private async Task ExportGridWithOtherColumns()
{
await JS.InvokeVoidAsync("clickExportCommandButton");
}
protected override void OnInitialized()
{
var rnd = Random.Shared;
for (int i = 1; i <= 7; 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; }
}
}
I discovered "incell" editing mode on the grid, I love it! It makes the UI very intuitive and quick to update individual fields. It also works great with a PATCH API endpoint.
One minor glitch with "incell editing". If I click on a cell in a different row, it immediately takes the previous cell out of edit and puts the new cell in edit with a single click -- VERY cool. But, if you click on a cell in the same row it takes the previous cell out of edit, but doesn't put the new cell in edit mode. It would be cool if it worked the same as the "clicking in separate rows" functionality.
Thanks,
Kenny