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.
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.
I have the following configuration:
Editor component in Grid EditorTemplate and the Grid editing mode is popup
Here is a REPL example https://blazorrepl.telerik.com/QeuUwsvb15sxbLuB04
The popup that opens when editing the Grid resizes when I type in the Editor
Steps to reproduce the issue:
1. Run the REPL example
2. Click the Edit button in the Grid
3. Resize the popup
4. Start to type something in the Editor
5. The popup resizes
The Grid performance worsens progressively with each subsequent edit operation. Please optimize that.
Test page: https://blazorrepl.telerik.com/mJuHFNbb17FpJu9b54
Click on a Price or Quantity cell to start edit mode and tab repetitively to observe the degradation.
The CheckBoxList filter does not work as expected when the Grid is bound to ExpandoObject
===
ADMIN EDIT: A possible workaround is to bind the Grid with OnRead event and populate the MemberType property of the filter descriptors manually:
@using System.Dynamic
@using Telerik.DataSource
@using Telerik.DataSource.Extensions
<TelerikGrid OnRead="@OnGridRead"
TItem="@ExpandoObject"
Pageable="true"
Sortable="true"
FilterMode="@GridFilterMode.FilterMenu"
FilterMenuType="@FilterMenuType.CheckBoxList"
Height="400px">
<GridToolBarTemplate>
<GridSearchBox />
</GridToolBarTemplate>
<GridColumns>
@{
if (GridData != null && GridData.Any())
{
<GridColumn Field="PropertyInt" FieldType="@GridPropertyTypes["PropertyInt"]" />
<GridColumn Field="PropertyString" FieldType="@GridPropertyTypes["PropertyString"]" />
<GridColumn Field="PropertyGroup" FieldType="@GridPropertyTypes["PropertyString"]" />
<GridColumn Field="PropertyDate" FieldType="@GridPropertyTypes["PropertyDate"]" />
<GridColumn Field="PropertyBool" FieldType="@GridPropertyTypes["PropertyBool"]" />
}
}
</GridColumns>
</TelerikGrid>
@code {
private List<ExpandoObject> GridData { get; set; } = new List<ExpandoObject>();
private Dictionary<string, Type> GridPropertyTypes { get; set; } = new Dictionary<string, Type>() {
{ "Id", typeof(int) },
{ "PropertyInt", typeof(int) },
{ "PropertyString", typeof(string) },
{ "PropertyGroup", typeof(string) },
{ "PropertyDate", typeof(DateTime) },
{ "PropertyBool", typeof(bool) }
};
private async Task OnGridRead(GridReadEventArgs args)
{
args.Request.Filters.OfType<CompositeFilterDescriptor>()
.Each(x =>
{
x.FilterDescriptors.OfType<FilterDescriptor>()
.Each(y => y.MemberType = GridPropertyTypes[y.Member]);
});
var result = GridData.ToDataSourceResult(args.Request);
args.Data = result.Data;
args.Total = result.Total;
args.AggregateResults = result.AggregateResults;
}
protected override void OnInitialized()
{
for (int i = 1; i <= 18; i++)
{
dynamic expando = new ExpandoObject();
expando.Id = i;
expando.PropertyGroup = $"Group {(i % 3 + 1)}";
expando.PropertyInt = i;
expando.PropertyString = $"String {(char)(64 + i)}{(char)(64 + i)}";
expando.PropertyDate = DateTime.Now.AddMonths(-i);
expando.PropertyBool = i % 2 != 0;
GridData.Add(expando);
}
}
}
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.
How to reproduce:
The regression was introduced in version 12.2.0. The last version that works correctly is 12.0.0.
The possible workarounds are:
@using System.ComponentModel.DataAnnotations
@using Telerik.DataSource
@using Telerik.DataSource.Extensions
<TelerikGrid @ref="@GridRef"
OnRead="@OnGridRead"
TItem="@Product"
EditMode="@GridEditMode.Incell"
OnCreate="@OnGridCreate"
OnDelete="@OnGridDelete"
OnUpdate="@OnGridUpdate"
Height="600px">
<GridToolBarTemplate>
<GridCommandButton Command="Add">Add Item</GridCommandButton>
</GridToolBarTemplate>
<GridColumns>
<GridColumn Field="@nameof(Product.Name)">
<EditorTemplate>
@{ var dataItem = (Product)context; }
<span @onfocusout="@( async () => await OnGridCellFocusOut(nameof(Product.Name)) )">
<TelerikTextBox @bind-Value="@dataItem.Name" />
</span>
</EditorTemplate>
</GridColumn>
@* <GridColumn Field="@nameof(Product.Price)" DisplayFormat="{0:C2}" />
<GridColumn Field="@nameof(Product.Quantity)" DisplayFormat="{0:N0}" />
<GridColumn Field="@nameof(Product.ReleaseDate)" DisplayFormat="{0:d}" /> *@
<GridColumn Field="@nameof(Product.Discontinued)" Width="120px">
<EditorTemplate>
@{ var dataItem = (Product)context; }
<span @onfocusout="@( async () => await OnGridCellFocusOut(nameof(Product.Discontinued)) )">
<TelerikCheckBox @bind-Value="@dataItem.Discontinued" />
</span>
</EditorTemplate>
</GridColumn>
<GridCommandColumn Width="180px">
<GridCommandButton Command="Delete">Delete</GridCommandButton>
</GridCommandColumn>
</GridColumns>
</TelerikGrid>
@code {
private TelerikGrid<Product>? GridRef { get; set; }
private ProductService GridProductService { get; set; } = new();
private async Task OnGridCellFocusOut(string field)
{
await Task.Delay(100);
if (GridRef is null)
{
return;
}
GridState<Product> gridState = GridRef.GetState();
Product? editItem = gridState.EditItem as Product;
if (editItem is null)
{
return;
}
GridCommandEventArgs args = new GridCommandEventArgs()
{
Field = field,
Item = editItem
};
await OnGridUpdate(args);
gridState.EditField = default;
gridState.EditItem = default!;
gridState.OriginalEditItem = default!;
await GridRef.SetStateAsync(gridState);
}
private async Task OnGridCreate(GridCommandEventArgs args)
{
var createdItem = (Product)args.Item;
await GridProductService.Create(createdItem);
}
private async Task OnGridDelete(GridCommandEventArgs args)
{
var deletedItem = (Product)args.Item;
await GridProductService.Delete(deletedItem);
}
private async Task OnGridRead(GridReadEventArgs args)
{
DataSourceResult result = await GridProductService.Read(args.Request);
args.Data = result.Data;
args.Total = result.Total;
args.AggregateResults = result.AggregateResults;
}
private async Task OnGridUpdate(GridCommandEventArgs args)
{
var updatedItem = (Product)args.Item;
await GridProductService.Update(updatedItem);
}
public class Product
{
public int Id { get; set; }
[Required]
public string Name { get; set; } = string.Empty;
public string Description { get; set; } = string.Empty;
public decimal? Price { get; set; }
public int Quantity { get; set; }
[Required]
public DateTime? ReleaseDate { get; set; }
public bool Discontinued { get; set; }
}
#region Data Service
public class ProductService
{
private List<Product> Items { get; set; } = new();
private int LastId { get; set; }
public async Task<int> Create(Product product)
{
await SimulateAsyncOperation();
product.Id = ++LastId;
Items.Insert(0, product);
return LastId;
}
public async Task<bool> Delete(Product product)
{
await SimulateAsyncOperation();
if (Items.Contains(product))
{
Items.Remove(product);
return true;
}
return false;
}
public async Task<List<Product>> Read()
{
await SimulateAsyncOperation();
return Items;
}
public async Task<DataSourceResult> Read(DataSourceRequest request)
{
return await Items.ToDataSourceResultAsync(request);
}
public async Task<bool> Update(Product product)
{
await SimulateAsyncOperation();
int originalItemIndex = Items.FindIndex(x => x.Id == product.Id);
if (originalItemIndex != -1)
{
Items[originalItemIndex] = product;
return true;
}
return false;
}
private async Task SimulateAsyncOperation()
{
await Task.Delay(100);
}
public ProductService(int itemCount = 5)
{
Random rnd = Random.Shared;
for (int i = 1; i <= itemCount; i++)
{
Items.Add(new Product()
{
Id = ++LastId,
Name = $"Product {LastId}",
Description = $"Multi-line\ndescription {LastId}",
Price = LastId % 2 == 0 ? null : rnd.Next(0, 100) * 1.23m,
Quantity = LastId % 2 == 0 ? 0 : rnd.Next(0, 3000),
ReleaseDate = DateTime.Today.AddDays(-rnd.Next(365, 3650)),
Discontinued = LastId % 2 == 0
});
}
}
}
#endregion Data Service
}
OnChange and OnBlur event for editors (TelerikTextBox, NumericTextBox, and others) is not fired in InCell edit mode with Tab key.
Telerik input components inside EditorTemplate render the whole grid on each keystroke
<AdminEdit>
As a workaround, you can use the standard Input components provided by the framework together with a CSS class that would visually make them like the Telerik Input Components. An example for the TextArea:
<InputTextArea class="k-textarea" @bind-Value="@myValue"></InputTextArea></AdminEdit>
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é
(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.
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>
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.