When triggering Grid edit mode through the Grid state and the component is using adaptive mode, the edit form doesn't show.
Possible workarounds include:
1. User clicks the sparkled button that opens the AI window in this demo: https://demos.telerik.com/blazor-ui/grid/ai-data-operations
2. User chooses a predefined prompt suggestion, enters one via the keyboard, or uses voice access to dictate one, and clicks apply. The operation runs successfully and returns output.
3. Now the user clicks the sparkled button again, and the AI window opens. Once open, the prompt text box fills with the previously entered request text.
How to remove or prevent the previously entered request text from filling the text box on every sequential opening of the AI window?
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.
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)
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";
}
}
}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.
(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.
(bug report only)
Regression introduced in 9.0.0.
1. Run the code posted below and export the Grid.
2. Open the exported Excel file.
<TelerikGrid Data=@GridData
Pageable="true" Sortable="true" Resizable="true" Reorderable="true"
ShowColumnMenu="true" FilterMode="@GridFilterMode.FilterMenu"
Width="800px" Height="400px">
<GridToolBar>
<GridToolBarExcelExportTool>
Export to Excel
</GridToolBarExcelExportTool>
</GridToolBar>
<GridExport>
<GridExcelExport FileName="telerik-grid-export" AllPages="false" />
</GridExport>
<GridColumns>
<GridColumn Title="Personal Information">
<Columns>
<GridColumn Field=@nameof(Customer.FirstName) Title="First Name" Width="100px" />
<GridColumn Field=@nameof(Customer.LastName) Title="Last Name" Width="100px" />
</Columns>
</GridColumn>
<GridColumn Title="Company">
<Columns>
<GridColumn Field=@nameof(Customer.CompanyName) Title="Name" />
<GridColumn Field=@nameof(Customer.HasCompanyContract) Title="Has Contract" Width="120px" />
</Columns>
</GridColumn>
<GridColumn Title="Contact Details">
<Columns>
<GridColumn Field="@nameof(Customer.Email)" Title="Email"></GridColumn>
<GridColumn Field="@nameof(Customer.Phone)" Title="Phone"></GridColumn>
<GridColumn Field="@nameof(Customer.City)" Title="City"></GridColumn>
</Columns>
</GridColumn>
</GridColumns>
</TelerikGrid>
@code {
public List<Customer> GridData { get; set; }
public class Customer
{
public int Id { get; set; }
public string PasswordHash { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string CompanyName { get; set; }
public bool HasCompanyContract { get; set; }
public string Email { get; set; }
public string Phone { get; set; }
public string City { get; set; }
}
// generation of dummy data
protected override void OnInitialized()
{
GridData = GenerateData();
}
List<Customer> GenerateData()
{
var data = new List<Customer>();
string[] fNames = new string[] { "Nancy", "John", "Orlando", "Jane", "Bob", "Juan" };
string[] lNames = new string[] { "Harris", "Gates", "Smith", "Caprio", "Gash", "Gee" };
string[] cNames = new string[] { "Acme", "Northwind", "Contoso" };
string[] cities = new string[] { "Denver", "New York", "LA", "London", "Paris", "Helsinki", "Moscow", "Sofia" };
Random rnd = new Random();
for (int i = 0; i < 150; i++)
{
string fName = fNames[rnd.Next(0, fNames.Length)];
string lName = lNames[rnd.Next(0, lNames.Length)];
string cName = cNames[rnd.Next(0, cNames.Length)];
data.Add(new Customer
{
Id = i,
PasswordHash = "not shown",
FirstName = fName,
LastName = lName,
CompanyName = cName,
HasCompanyContract = i % 3 == 0,
Email = $"{fName}.{lName}@{cName}.com",
Phone = $"{rnd.Next(100, 999)}-555-{rnd.Next(100, 999)}",
City = cities[rnd.Next(0, cities.Length)]
});
}
return data;
}
}
(optional)
The “Personal Information”, “Company”, “Contact Details” headers are not exported.
The multi-column headers are exported.
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; }
}
}
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; }
}
}
The TelerikGrid never loads any data. the app just hangs.
I copied the Telerik sample from the online demo.
The HTML table loads perfectly.
Using VS 2019 16.1.0 Preview 2.0.
Acquired Telerik nuget package directly from Telerik feed.
<TelerikGrid Data=@ViewModel.GetCorePharmacies() Height="300">
<TelerikGridColumns>
<TelerikGridColumn Field="ID" Title="NCPDP#" />
<TelerikGridColumn Field="NPINumber" Title="NPI#" />
<TelerikGridColumn Field="DBAName" Title="Pharmacy" />
<TelerikGridColumn Field="StoreNumber" Title="Store#" />
</TelerikGridColumns>
</TelerikGrid>
@*<table class="table">
<thead>
<tr>
<th>NCPDP</th>
<th>NPI</th>
<th>DBA Name</th>
<th>Store#</th>
</tr>
</thead>
<tbody>
@foreach (var pharmacy in ViewModel.GetCorePharmacies())
{
<tr>
<td>@pharmacy.ID.ToString()</td>
<td>@pharmacy.NPINumber.ToString()</td>
<td>@pharmacy.DBAName</td>
<td>@pharmacy.StoreNumber</td>
</tr>
}
</tbody>
</table>*@
Any thoughts.
Super low priority and super nit picky ... The command buttons on the Blazor Grid have extra space after the icon if you leave the name blank. Either remove the space or center the icon when no name is entered.
Dear Telerik,
i have a TelerikGrid with a TelerikGridColumn bound to a Decimal field.
The property Editable="true" is set.
I can edit the number , but only 1 number at te time.
If I type one number, the edit-cell is closed immediately.
If I want to input the number 1000 , I habe to click the cell 4 times for each number . I cannot type 1000 in one action.
The problem does not occur with a String column.
Regards,
Gert
Hello,
I'm trying the grid component and I'm able to add a row to the grid using the embbed editor. But I wanted to add an item externally to the list:
<button @onclick="@MyClick">Add item</button>
void MyClick()
{
MyData.Add(new SampleData() { ID = 46, Name = "from click" });
StateHasChanged();
}The new line does not appear on the grid but if I add a second item through the embbed editor then I get the 2 items!
I also try to replace the List<MyData> by an ObservableCollection<MyData> unsuccessfully.
Thanks & regards,
Here is how this page looks on mac, multiple browsers: https://demos.telerik.com/blazor-ui/grid/grouping
Notice that the columns are misaligned. I believe this is because the scrollbar isn't rendered on a mac if it is "disabled" (there is nothing to scroll).
Probably the best solution would be for it to render like this on all browsers, but have the columns line up (get rid of the spacer in the end of the header row) as the 'empty' scrollbar is not attractive :)