If a Grid with ColumnVirtualization enabled is programmatically resized at runtime, some of its cells appear empty.
The same behavior will occur after column resizing. It looks like it is not accordingly updated as if a scroll horizontally, it updates and the missing data is rendered.
===
Edit: Here is a workaround for the column resizing scenario. Part of this approach can be used to workaround Grid resizing as well -
Use the OnStateChanged event simulate horizontal scrolling inside the Grid after column resize. The custom Grid CSS class is optional, if there are pages with multiple Grids.
Razor
<TelerikGrid Class="virtual-grid"
OnStateChanged="@( (GridStateEventArgs<GridModel> args) => OnGridStateChanged(args) )" />
C#
async Task OnGridStateChanged(GridStateEventArgs<User> args)
{
if (args.PropertyName == "ColumnStates")
{
await js.InvokeVoidAsync("loadColumns", "virtual-grid");
}
}
JavaScript
function loadColumns(gridClass) {
var rowContainer = document.querySelector("." + gridClass + " .k-grid-content");
if (rowContainer) {
rowContainer.scrollLeft += 1;
rowContainer.scrollLeft -= 1;
}
}