dotnet / aspnetcore

ASP.NET Core is a cross-platform .NET framework for building modern cloud-based web applications on Windows, Mac, or Linux.
https://asp.net
MIT License
35.41k stars 10k forks source link

Quickgrid with Virtualize=true not displaying the data. #53872

Open KurinchiA opened 8 months ago

KurinchiA commented 8 months ago

Is there an existing issue for this?

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. Screenshot

SteveSandersonMS commented 8 months ago

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 commented 8 months ago

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 commented 8 months ago

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 commented 8 months ago

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 commented 8 months ago

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 commented 8 months ago

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 commented 8 months ago

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 commented 7 months ago

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

jefffhaynes commented 7 months ago

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

@rendermode InteractiveServer