Unplanned
Last Updated: 14 Dec 2021 14:20 by ADMIN
Anksu
Created on: 14 Dec 2021 14:13
Category: Grid
Type: Bug Report
2
ColumnVirtualization causes empty cells if the Grid or a column is resized

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;
    }
}

 

0 comments