When the Virtualization feature is enabled, triggering Incell edit causes the Grid to scroll. When we scroll the edit is canceled. This happens when the row is partially visible.
https://www.screencast.com/t/zCJ9z9P83c
A more specific case is when you try to edit the last row. In case the editor height is bigger than the row height the Grid tries to scroll but there is no more data. The editor is closed and the item cannot be edited.
https://www.screencast.com/t/331cT4xxt
Reproduction: https://blazorrepl.telerik.com/QxEcECvx22pq4BBG59
Hello everyone,
Until we fix this issue, here is a possible workaround for in-cell editing. Another option is to switch the Grid to popup edit mode.
<TelerikGrid @ref="@GridRef"
Data="@GridData"
EditMode="@GridEditMode.Incell"
Navigable="true"
ScrollMode="@GridScrollMode.Virtual"
RowHeight="42"
Height="400px"
PageSize="10"
OnUpdate="@OnGridUpdate"
OnCreate="@OnGridCreate"
OnStateChanged="@( (GridStateEventArgs<Product> args) => GridSkip = args.GridState.Skip )"
OnEdit="@OnGridEdit">
<GridToolBarTemplate>
<GridCommandButton Command="Add" Icon="@SvgIcon.Plus">Add Item</GridCommandButton>
</GridToolBarTemplate>
<GridColumns>
<GridColumn Field="@nameof(Product.Name)" Title="Product Name" />
<GridColumn Field="@nameof(Product.Price)" Title="Unit Price" />
<GridColumn Field="@nameof(Product.Stock)" Title="Units In Stock" />
<GridColumn Field="@nameof(Product.ReleaseDate)" Title="Release Date" />
<GridColumn Field="@nameof(Product.Discontinued)" Title="Discontinued" />
</GridColumns>
</TelerikGrid>
@code {
TelerikGrid<Product> GridRef { get; set; }
List<Product> GridData { get; set; }
int? GridSkip { get; set; } = 0;
int VisibleRowsInGrid = 7;
private async Task OnGridEdit(GridCommandEventArgs args)
{
var originalEditItem = (Product)args.Item;
var itemIndex = GridData.FindIndex(x => x.Id == originalEditItem.Id);
if (itemIndex >= GridSkip + VisibleRowsInGrid)
{
var gridState = GridRef.GetState();
gridState.Skip += 1;
gridState.OriginalEditItem = originalEditItem;
gridState.EditItem = originalEditItem.Clone();
await GridRef.SetStateAsync(gridState);
}
}
private void OnGridUpdate(GridCommandEventArgs args)
{
var argsItem = args.Item as Product;
var index = GridData.FindIndex(i => i.Id == argsItem.Id);
if (index != -1)
{
GridData[index] = argsItem;
}
}
private void OnGridCreate(GridCommandEventArgs args)
{
var argsItem = args.Item as Product;
argsItem.Id = GridData.Count + 1;
GridData.Insert(0, argsItem);
}
private void OnGridDelete(GridCommandEventArgs args)
{
var argsItem = args.Item as Product;
GridData.Remove(argsItem);
}
protected override void OnInitialized()
{
GridData = new List<Product>();
var rnd = new Random();
for (int i = 1; i <= 500; i++)
{
GridData.Add(new Product()
{
Id = i,
Name = $"Product {i}",
Price = (decimal)(rnd.Next(1, 100) * 3.14),
Stock = (short)rnd.Next(0, 1000),
ReleaseDate = DateTime.Now.AddMonths(-rnd.Next(0, 120)).AddDays(rnd.Next(1, 30)),
Discontinued = Convert.ToBoolean(rnd.Next(0, 2))
});
}
}
public class Product
{
public int Id { get; set; }
public string Name { get; set; }
public decimal? Price { get; set; }
public short? Stock { get; set; }
public DateTime? ReleaseDate { get; set; }
public bool Discontinued { get; set; }
public Product Clone()
{
return new Product()
{
Discontinued = Discontinued,
Id = Id,
Name = Name,
Price = Price,
ReleaseDate = ReleaseDate,
Stock = Stock
};
}
}
}
Regards,
Dimo
Progress Telerik