Declined
Last Updated: 17 Apr 2020 18:59 by ADMIN
Tamas
Created on: 16 Apr 2020 19:20
Category: Grid
Type: Bug Report
0
Grid is showing only placeholders with virtual scrolling

TelerikGird with virtual scrolling was working in version 2.7, but after upgrading to 2.10, it is only showing placeholders.

When scrolling, it shows the values for a split second, but then those get replaced by the placeholders.

 

@page "/test"

<TelerikGrid Data=@GridData
             SelectionMode="GridSelectionMode.Single"
             ScrollMode="GridScrollMode.Virtual"
             Height="300px" RowHeight="20">
    <GridColumns>
        <GridColumn Field=@nameof(Employee.Name) />
        <GridColumn Field=@nameof(Employee.Team) Title="Team" />
    </GridColumns>
</TelerikGrid>

@code {
    public List<Employee> GridData { get; set; }

    protected override void OnInitialized()
    {
        GridData = new List<Employee>();
        for (int i = 0; i < 15; i++)
        {
            GridData.Add(new Employee()
            {
                EmployeeId = i,
                Name = "Employee " + i.ToString(),
                Team = "Team " + i % 3
            });
        }
    }

    public class Employee
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
    }
}

2 comments
Tamas
Posted on: 17 Apr 2020 18:15
That solved it, thanks!
ADMIN
Marin Bratanov
Posted on: 17 Apr 2020 07:01

Hi Tamas,

The RowHeight is too low - these rows are 40-50px tall (that's how the browser will render them regardless of your value, if it's too low), and so the low value will break the virtualization logic. Please review the notes about this feature in the following section of the documentation for more details and a few other things to keep in mind: https://docs.telerik.com/blazor-ui/components/grid/virtual-scrolling#notes

The following works fine for me, please give it a try and let me know how it goes:

<TelerikGrid Data=@GridData
             SelectionMode="GridSelectionMode.Single"
             ScrollMode="GridScrollMode.Virtual"
             Height="300px" RowHeight="50">
    <GridColumns>
        <GridColumn Field=@nameof(Employee.Name) />
        <GridColumn Field=@nameof(Employee.Team) Title="Team" />
    </GridColumns>
</TelerikGrid>

@code {
    public List<Employee> GridData { get; set; }

    protected override void OnInitialized()
    {
        GridData = new List<Employee>();
        for (int i = 0; i < 15; i++)
        {
            GridData.Add(new Employee()
            {
                EmployeeId = i,
                Name = "Employee " + i.ToString(),
                Team = "Team " + i % 3
            });
        }
    }

    public class Employee
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
    }
}

 

Regards,
Marin Bratanov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.