This is a migrated thread and some comments may be shown as answers.

Bug Virtual Grid TotalCount > 3.000.000

9 Answers 10 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Wim
Top achievements
Rank 1
Wim asked on 19 Jan 2021, 12:32 PM

The virtual grid breaks when there are more than 3.000.000 records in TotalCount.

It overlays the actual Grid with extra height.

9 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 19 Jan 2021, 06:33 PM

Hi Wim,

Can you reproduce this for me with the snippet below? On my end, the grid looks well in terms of overflowing content (see this article for some more details on common issues with the configuration of the feature), yet I cannot get to the end of the items. Is this what you see too (screenshot attached at the end)?

@using Telerik.DataSource.Extensions

Total items: @GridData.Count

<TelerikGrid Data=@CurrentPage
             ScrollMode="@GridScrollMode.Virtual"
             Height="480px" RowHeight="60" PageSize="20"
             Sortable="true" FilterMode="@GridFilterMode.FilterMenu"
             OnRead="@OnReadHandler" TotalCount="@Total">
    <GridColumns>
        <GridColumn Field="Id" />
        <GridColumn Field="Name" Title="First Name" />
        <GridColumn Field="LastName" Title="Last Name" />
        <GridColumn Field="HireDate" Width="200px" DisplayFormat="{0:MMMM dd, yyyy}" />
    </GridColumns>
</TelerikGrid>

@code {
    public List<SampleData> GridData { get; set; }
    public IEnumerable<SampleData> CurrentPage { get; set; }
    int Total { get; set; }

    async Task OnReadHandler(GridReadEventArgs e)
    {
        var result = await GridData.ToDataSourceResultAsync(e.Request);

        CurrentPage = result.Data as IEnumerable<SampleData>;
        Total = result.Total;

        await InvokeAsync(StateHasChanged);
    }

    protected override async Task OnInitializedAsync()
    {
        GridData = await GetData();
    }

    private async Task<List<SampleData>> GetData()
    {
        return Enumerable.Range(1, 3000000).Select(x => new SampleData
        {
            Id = x,
            Name = $"name {x}",
            LastName = $"Surname {x}",
            HireDate = DateTime.Now.Date.AddDays(-x % 1000)
        }).ToList();
    }

    public class SampleData
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string LastName { get; set; }
        public DateTime HireDate { get; set; }
    }
}

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Wim
Top achievements
Rank 1
answered on 20 Jan 2021, 08:42 AM

Actually this is more our situation, we do our filtering, virtual pagination, etc.. on the back-end.

So everytime the onread is called we get 25 records from the database, where the virtual grid is situated at the moment with filtering if set. We do not get 3.000.000 records at once. But the TotalCount will be that amount.

550.000 records work fine, 600.000 records not.

@using Telerik.DataSource.Extensions
@attribute [Authorize]
 
Total items: @GridData.Count
 
<TelerikGrid Data=@CurrentPage
             ScrollMode="@GridScrollMode.Virtual"
             Height="480px" RowHeight="60" PageSize="20"
             Sortable="true" FilterMode="@GridFilterMode.FilterMenu"
             OnRead="@OnReadHandler" TotalCount="@Total">
    <GridColumns>
        <GridColumn Field="Id" />
        <GridColumn Field="Name" Title="First Name" />
        <GridColumn Field="LastName" Title="Last Name" />
        <GridColumn Field="HireDate" Width="200px" DisplayFormat="{0:MMMM dd, yyyy}" />
    </GridColumns>
</TelerikGrid>
 
@code {
    public List<SampleData> GridData { get; set; }
    public IEnumerable<SampleData> CurrentPage { get; set; }
    int Total { get; set; }
 
    async Task OnReadHandler(GridReadEventArgs e)
    {
        GridData = await GetData();
        var result = await GridData.ToDataSourceResultAsync(e.Request);
 
        CurrentPage = result.Data as IEnumerable<SampleData>;
        Total = result.Total;
 
        await InvokeAsync(StateHasChanged);
    }
 
    protected override async Task OnInitializedAsync()
    {
        GridData = new List<SampleData>();
    }
 
    private async Task<List<SampleData>> GetData()
    {
        return Enumerable.Range(1, 3000000).Select(x => new SampleData
        {
            Id = x,
            Name = $"name {x}",
            LastName = $"Surname {x}",
            HireDate = DateTime.Now.Date.AddDays(-x % 1000)
        }).ToList();
    }
 
    public class SampleData
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string LastName { get; set; }
        public DateTime HireDate { get; set; }
    }
}

 

 

0
Wim
Top achievements
Rank 1
answered on 20 Jan 2021, 11:58 AM
Also the GridToolBar disappears with the latest version 2.21, even with TotalCount 50 records.

@using Telerik.DataSource.Extensions
@attribute [Authorize]
 
Total items: @GridData.Count
 
<TelerikGrid Data=@CurrentPage
             ScrollMode="@GridScrollMode.Virtual"
             Height="480px" RowHeight="60" PageSize="20"
             Sortable="true" FilterMode="@GridFilterMode.FilterMenu"
             OnRead="@OnReadHandler" TotalCount="@Total">
    <GridToolBar>
        <GridCommandButton Icon="@IconName.Reload"></GridCommandButton>
    </GridToolBar>
    <GridColumns>
        <GridColumn Field="Id"/>
        <GridColumn Field="Name" Title="First Name"/>
        <GridColumn Field="LastName" Title="Last Name"/>
        <GridColumn Field="HireDate" Width="200px" DisplayFormat="{0:MMMM dd, yyyy}"/>
    </GridColumns>
</TelerikGrid>
 
@code {
    public List<SampleData> GridData { get; set; }
    public IEnumerable<SampleData> CurrentPage { get; set; }
    int Total { get; set; }
 
    async Task OnReadHandler(GridReadEventArgs e)
    {
        GridData = await GetData();
        var result = await GridData.ToDataSourceResultAsync(e.Request);
 
        CurrentPage = result.Data as IEnumerable<SampleData>;
        Total = result.Total;
 
        await InvokeAsync(StateHasChanged);
    }
 
    protected override async Task OnInitializedAsync()
    {
        GridData = new List<SampleData>();
    }
 
    private async Task<List<SampleData>> GetData()
    {
        return Enumerable.Range(1, 50).Select(x => new SampleData
        {
            Id = x,
            Name = $"name {x}",
            LastName = $"Surname {x}",
            HireDate = DateTime.Now.Date.AddDays(-x % 1000)
        }).ToList();
    }
 
    public class SampleData
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string LastName { get; set; }
        public DateTime HireDate { get; set; }
    }
}
0
Marin Bratanov
Telerik team
answered on 20 Jan 2021, 01:15 PM

Hi Wim,

We've been reviewing this and the problem stems from a browser limitation - elements can only be so large in a browser, which limits how many rows you would be able to see. I made this KB article to explain the situation better: https://docs.telerik.com/blazor-ui/knowledge-base/grid-virtualization-many-records.

As for the content overflowing - since the grid does not have such a border by default, my best guess is that there is some additional CSS in the project that affects it and causes that appearance.

I think such custom CSS is also contributing to the toolbar issue you are having - the grid in the screenshot does not seem to be using the built-in Telerik Theme.

I am attaching here a sample app that works and looks as expected for me with 2.21.0 so you can compare against it.

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Wim
Top achievements
Rank 1
answered on 20 Jan 2021, 02:06 PM

Thank you for the clarification, the virtual scroll has indeed a limitation because if the browser.

The issue with the toolbar and the content overflowing is happening when I use the bootstrap theme of kendo

<link href="_content/Telerik.UI.for.Blazor/css/kendo-theme-bootstrap/all.css" rel="stylesheet" />

It happens also in the sample. When I use the default theme it works fine.

0
Marin Bratanov
Telerik team
answered on 20 Jan 2021, 02:23 PM

Hi Wim,

Could you try clearing the browser cache? Perhaps your browser has an old stylesheet cached. I am attaching the sample and a video with the bootstrap theme where they still look as expected for me, it also shows how you can clear your browser cache easily.

 

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Wim
Top achievements
Rank 1
answered on 20 Jan 2021, 02:27 PM
Ok it changes one thing, I changed the count of the data     
0
Wim
Top achievements
Rank 1
answered on 20 Jan 2021, 02:29 PM

Ok it changes one thing, I changed the count of the data to 600.000.

No problem with the default template, but an extra border with the bootstrap template.

0
Accepted
Marin Bratanov
Telerik team
answered on 20 Jan 2021, 03:13 PM

Hello Wim,

That's a symptom of the same browser limitation. When the element size is hit, the browser does not render it properly and it goes out of the bounds of its parent element. I've updated the KB article with this information (see the Steps To Reproduce section). The solution is still the same - switch to regular paging if you have so many records that you hit the browser limit.

 

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Wim
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Wim
Top achievements
Rank 1
Share this question
or