V4.11.3 DataGrid fix cell height doesn't work

[nvangnoob]

I update to V4.11.3 to fix the cell height #3173 but I am not seeing it on my data grid. Is there something I'm missing?

@using Microsoft.FluentUI.AspNetCore.Components

@inject HttpClient Http
@inject NavigationManager NavManager

<p>
    Show:
    <FluentCheckbox @bind-Value="showCity">City</FluentCheckbox>
    <FluentCheckbox @bind-Value="showState">State</FluentCheckbox>
</p>

<div style="height: 434px; overflow:auto;" tabindex="-1">
    <FluentDataGrid ItemsProvider="foodRecallProvider"
                    TGridItem="FoodRecall"
                    GenerateHeader="GenerateHeaderOption.Sticky"
                    ResizableColumns="true"
                    ResizeType="DataGridResizeType.Discrete"
                    HeaderCellAsButtonWithMenu="true"
                    Pagination="@_pagination"
                    ShowHover="true" >
        <ChildContent>
            <SelectColumn TGridItem="FoodRecall"
                          SelectMode="DataGridSelectMode.Multiple"
                          SelectFromEntireRow="true"
                          Property="@(e => e.Selected)" />
            <TemplateColumn Width="80px" Title="View" Align="@Align.Start">
                <FluentButton aria-label="View Document" IconEnd="@(new Icons.Regular.Size16.Eye())" />
            </TemplateColumn>
            <PropertyColumn Title="ID" Property="@(c => c!.Event_Id)" />
            @if (showState)
            {
                <PropertyColumn Property="@(c => c!.State)" Style="color: #af5f00 ;" />
            }
            @if (showCity)
            {
                <PropertyColumn Property="@(c => c!.City)" />
            }
            <PropertyColumn Title="Company" Property="@(c => c!.Recalling_Firm)" Tooltip="true" />
            <PropertyColumn Property="@(c => c!.Status)" />
            <TemplateColumn Title="Actions" Align="@Align.End">
                <FluentButton aria-label="Edit item" IconEnd="@(new Icons.Regular.Size16.Edit())" />
                <FluentButton aria-label="Delete item" IconEnd="@(new Icons.Regular.Size16.Delete())" />
            </TemplateColumn>
        </ChildContent>
        <EmptyContent>
            <FluentIcon Value="@(new Icons.Filled.Size24.Document())" Color="@Color.Accent" />&nbsp; No results to display.
        </EmptyContent>
        <LoadingContent>
            <FluentStack Orientation="Orientation.Vertical" HorizontalAlignment="HorizontalAlignment.Center">
                Loading...<br />
                <FluentProgress Width="240px" />
            </FluentStack>
        </LoadingContent>
    </FluentDataGrid>
</div>

<FluentPaginator State="@_pagination">
    <SummaryTemplate>
        <strong>@(_pagination.TotalItemCount ?? 0)</strong> records found.
    </SummaryTemplate>
</FluentPaginator>



@code {
    PaginationState _pagination = new PaginationState { ItemsPerPage = 25 };

    GridItemsProvider<FoodRecall> foodRecallProvider = default!;
    
    int? numResults;

    bool showCity = true;
    bool showState = true;      

    protected override async Task OnInitializedAsync()
    {
        // Define the GridRowsDataProvider. Its job is to convert QuickGrid's GridRowsDataProviderRequest into a query against
        // an arbitrary data soure. In this example, we need to translate query parameters into the particular URL format
        // supported by the external JSON API. It's only possible to perform whatever sorting/filtering/etc is supported
        // by the external API.
        foodRecallProvider = async req =>
        {
            var url = NavManager.GetUriWithQueryParameters("https://api.fda.gov/food/enforcement.json", new Dictionary<string, object?>
                        {
                { "skip", req.StartIndex },
                { "limit", req.Count },
                        });

            var response = await Http.GetFromJsonAsync<FoodRecallQueryResult>(url, req.CancellationToken);

            // Simulate a slow data retrieval process
            if (req.Count is null)
            {
                await Task.Delay(2500);
            }

            return GridItemsProviderResult.From(
                items: response!.Results,
                totalItemCount: response!.Meta.Results.Total);
        };        

        // Display the number of results just for information. This is completely separate from the grid.
        numResults = (await Http.GetFromJsonAsync<FoodRecallQueryResult>("https://api.fda.gov/food/enforcement.json"))!.Meta.Results.Total;
    }

    // Represents the data returned by https://open.fda.gov/apis/food/enforcement/
    // This is a subset of the fields available on that API
    public class FoodRecall
    {
        public string Event_Id { get; set; }
        public string Status { get; set; }
        public string City { get; set; }
        public string State { get; set; }
        public string Recalling_Firm { get; set; }
        public bool Selected { get; set; }
    }

    public class FoodRecallQueryResult
    {
        public Metadata Meta { get; set; }
        public FoodRecall[] Results { get; set; }

        public class Metadata
        {
            public ResultsInfo Results { get; set; }
        }

        public class ResultsInfo
        {
            public int Total { get; set; }
        }
    }
}

[vnbaaij]

The template columns with the buttons are higher than the default RowSize. Setting a different RowSize is not being picked up right now because that style rule looks at Items not being null where in this case an ItemsProvider is being used.

To get an height being set on the cells now (as in with 4.11.3), you either need to have:

 Virtualize=true
 ItemSize="46"

Or use
Items' instead of 'ItemsProvider

For next version we'll make this work with ItemsProvider and without Virtualize

[nvangnoob]

Waiting for the next version. Thanks.