Quickgrid with Virtualize=true not displaying the data.

[KurinchiA]

Is there an existing issue for this?

• [x] I have searched the existing issues

Describe the bug

Trying to use QuickGrid with Virtualize = true using Data from a List. Followed the sample provided in https://aspnet.github.io/quickgridsamples/virtualizing

The grid header is displayed and the number of items is displayed correct. But, the grid data is is not displayed/empty.

Expected Behavior

Expect to see the sample data in the list to be displayed in the grid with virtualize feature. printing result.TotalItemCount to check if the items are in itemProvider and the count looks correct. just the grid data is not displayed.

What am I missing?

Steps To Reproduce

@page "/virtualize"
@using News.Shared;
@using Microsoft.AspNetCore.Components.QuickGrid
<QuickGrid ItemsProvider="@itemsProvider" Virtualize="true" Height="400px" @ref="grid">
    <PropertyColumn Title="Time" Property="@(p => p.Time)" Format="HH:mm" Sortable="true" />
    <PropertyColumn Title="Document Id" Property="@(p => p.DocId)" Sortable="true" />
    <PropertyColumn Title="Service" Property="@(p => p.Service)" Sortable="true" />
    <PropertyColumn Title="File" Property="@(p => p.File)" Sortable="true" />    
    <PropertyColumn Title="Headline" Property="@(p => p.Headline)" Sortable="true" />
</QuickGrid>

<div>
    Total: <strong>@numResults stories received</strong>
</div>

@code {
    QuickGrid<StoryPOC>? grid;
    GridItemsProvider<StoryPOC>? itemsProvider;
    int numResults;

    protected override void OnInitialized()
    {
        itemsProvider = async request =>
        {            
            var data = News.Shared.Data.Stories;

            var result = GridItemsProviderResult.From(
                 items: data,
                 totalItemCount: data.Count);

            if (result.TotalItemCount != numResults && !request.CancellationToken.IsCancellationRequested)
            {
                numResults = result.TotalItemCount;
                StateHasChanged();
            }
            return result;            
        };
    }
==========================================================
Sample data -

namespace News.Shared
{
    public static class Data
    {
        public static List<StoryPOC> Stories = StoriesData();
        public static List<StoryPOC> StoriesData()
        {
            Stories = new List<StoryPOC>();
            Stories.Add(new StoryPOC { Time = DateTime.Now, Service = "DJN", File = "4222", Headline = "Test 1" });
            Stories.Add(new StoryPOC { Time = DateTime.Now, Service = "TKR", File = "8789", Headline = "Test 2" });
            Stories.Add(new StoryPOC { Time = DateTime.Now, Service = "DJN", File = "4223", Headline = "Test 3" });
            Stories.Add(new StoryPOC { Time = DateTime.Now, Service = "LOC", File = "4105", Headline = "Test 4" });
            Stories.Add(new StoryPOC { Time = DateTime.Now, Service = "TKR", File = "4107", Headline = "Test 5" });

            return Stories;
        } 
    }
}
---------------------------------------------------------

public class StoryPOC 
{     
    public string DocId { get; set; }
    public DateTime Time { get; set; }
    public string? File { get; set; }
    public string? Service { get; set; }    
    public string? Headline { get; set; }
}

Exceptions (if any)

No response

.NET Version

8.0.1

Anything else?

Attached screenshot with the developer tool open. you can see the table data section is empty.

[SteveSandersonMS]

Could you check you've added the required CSS rules to ensure all the rows are a fixed, known height?

For example in https://aspnet.github.io/quickgridsamples/virtualizing/, it has:

/* Fix height and enable scrolling */
.grid {
    height: 25rem;
    overflow-y: auto;
}

.grid ::deep table {
    min-width: 100%;
}

/* Sticky header while scrolling */
::deep thead {
    position: sticky;
    top: 0;
    background-color: #d8d8d8;
    outline: 1px solid gray;
    z-index: 1;
}

/* For virtualized grids, it's essential that all rows have the same known height */
::deep tr {
    height: 30px;
    border-bottom: 0.5px solid silver;
}

::deep tbody td {
    white-space: nowrap;
    overflow: hidden;
    max-width: 0;
    text-overflow: ellipsis;
}

[KurinchiA]

Yes. I added the exact css from the sample. https://aspnet.github.io/quickgridsamples/virtualizing/ Added CSS into virtualize.razor.css file and my code is in virtualize.razor.

Following is the css I have in virtualize.razor.css. Do you see anyother issue? The only difference between sample provided in https://aspnet.github.io/quickgridsamples/virtualizing/ and my code is the data.

/ Fix height and enable scrolling / .grid { height: 25rem; overflow-y: auto; }

.grid ::deep table { min-width: 100%; }

/ Sticky header while scrolling / ::deep thead { position: sticky; top: 0; background-color: #d8d8d8; outline: 1px solid gray; z-index: 1; }

/ For virtualized grids, it's essential that all rows have the same known height / ::deep tr { height: 30px; border-bottom: 0.5px solid silver; }

::deep tbody td { white-space: nowrap; overflow: hidden; max-width: 0; text-overflow: ellipsis; }

[SteveSandersonMS]

Thanks for the extra info. I'm afraid I can't tell why you're not getting any output if your code is the same as the sample that does work.

One possible way to diagnose it is if you can create a runnable repro on https://blazorrepl.telerik.com/. Either things will work there, and that will indicate there's some unrelated problem in your app, or if you can repro the same blank output there, it will be easy for me to have a look and probably identify the issue.

[KurinchiA]

Can you please share a working Quickgrid sample in https://blazorrepl.telerik.com/?

I tried to use QuickGrid in https://blazorrepl.telerik.com. added package manager for quickgrid (Microsoft.AspNetCore.Components.QuickGrid) and added @using Microsoft.AspNetCore.Components.QuickGrid in the main.razor page I am getting the following error: The type or namespace name 'QuickGrid' does not exist in the namespace 'Microsoft.AspNetCore.Components' (are you missing an assembly reference?) Here is the blazorrepl sample url. (just added only package manager and trying to use quickgrid - commented the quickgrid as it is looking for reference)

https://blazorrepl.telerik.com/weEwPRFp51EuRQ3B57

[mkArtakMSFT]

Hi. It looks like this is a question about how to use ASP.NET Core. While we do our best to look through all the issues filed here, we are not a general-purpose forum. To get a faster response we suggest posting your questions to StackOverflow using the blazor tag.

[yanis-abc]

Hello. Is your page in render mode static (without @rendermode normally yes) ? I had the same problem until i change to the render mode "InteractiveWebAssembly" (server mode will work too i think).

[KurinchiA]

No. It is InteractiveWebAssembly. I even tried to set the render mode in the page.

app.MapRazorComponents() .AddInteractiveServerRenderMode() .AddInteractiveWebAssemblyRenderMode() .AddAdditionalAssemblies(typeof(QuickGridTestApp.Client._Imports).Assembly);

[jefffhaynes]

I have the same issue. No matter what I do the data does not render when Virtualize is set to true.

[jefffhaynes]

I got this to work. Per @yanis-abc suggestion, I had to add the render mode to the page.

@rendermode InteractiveServer