DataGrid changes planned for 4.11

[vnbaaij]

I'm swapping out the web components for standard HTML table elements. There are 2 reasons for doing this:

1. the web components will probably not be available in v3 as of the first release. We can't do a v5 release without a DataGrid component

2. using standard table elements is, in this case, good for performance. Loading the DataGrid examples page (which is still too heavy) is 2.2 seconds quicker with this new rendering applied.

Because of some HTML/CSS trickery, it is still possible to use the GridTemplateColumns parameter on the grid or the Width property on the columns to set column widths.

There will also be some breaking changes with this...

• The option to choose between using the new way of adding column actions (introduced in 4.10 or doing it the previous way, will disappear. The new way will be the standard moving forward. This is done because of code maintenance reasons but also because we achieve much better accessibility with this. It is possible to have both. See question below.
• A lot of changes have been made to the structure of the rendered content and the class names used. If you have been overriding grid classes in your own code, these probably no longer work.
• When you have rows in a table with content that needs to span multiple lines, you now need to use and set the new MultiLine (bool) parameter of the FluentDataGrid. Previously this could be done by setting a RowClass on a column but that does not work anymore

The new version of this grid can be seen in preview at https://black-pebble-0dc79cb03-2664.westeurope.3.azurestaticapps.net/

Question:
With a resizable grid you can set ResizeType to get an alternative/extra way to resize columns by using a column action (which is a must for a11y requirements).

• If set AND when setting HeaderCellAsButtonWithMenu to true you'll get a menu on clicking a column. This is 'the new way to invoke column actions introduced with 4.10'. It looks like this:
  

• If set and HeaderCellAsButtonWithMenu is false or not set, you get an extra button displayed in every column to invoke the actions popup which then contains resize and/or filter options. (it replaces the filter button that is shown it that spot if no ResizeType is specified) It looks like this:
  
  An alternative is to show a button at the end of each header using a 'three dot vertical' icon:
  

If we go with that one, I think we should align the popup to the right so it lines up with the action button

What would be your preferred way to invoke the actions popup? With the chevron in front or with the dots at the end?

Thoughts? Comments? Let us know below!

[coderdnewbie]

My opinion is the three dots looks better as we use arrows for sorting as well.

[ra-one]

I would go with "chevron in front" as sometimes you may have column that is too wide (to fit that one line that is too long) then you have to scroll all the way to right for action.

[vnbaaij]

My opinion is the three dots looks better as we use arrows for sorting as well.

++

I would go with "chevron in front" as sometimes you may have column that is too wide (to fit that one line that is too long) then you have to scroll all the way to right for action.

So combining both comments... three dots at the start?

[RobDene]

Why not make it a configurable option ? ie a MenuAppearance" attribute?

[vnbaaij]

We have a11y requirements high on our priority list. With what we have now, it is possible to have a grid that can only resize by using the drag handle at the end of a column. That, we learned from testing that was done for Aspire, is a no-go. With this new version we will eliminate that possibility... If a grid is resizable an action (besides dragging) will be offered to resize)

So choice of menu vs 'extra button' is fine but I don't want to create more options (as the DataGrid has a lot of parameters already) to define how that extra button should look and where it is placed (so at least 2 more parameters).

It is not just adding the parameters but also adding extra code that is needed to make them actually function. For instance, the action popup now lines out at the start of the column. If the extra button is shown at the end, the popup should probably align at the end as well. That is both C# code and JS code we need to code, test and maintain.

[RobDene]

Our preference would be chevron at the beginning -as an alternative is there any reason not to use a right click on the column heading ?

[AJ1000]

I just had a look at the 'Remote data' Section on my Android tablet and the grid does not render properly on my tablet. The other grids on the page all render fine.

[coderdnewbie]

As discussed in the meeting here are the screenshots. The broken grid on my Android tablet is the first grid in the 'Remote data' section. I also included a correct grid from the same page as there was only one broken gird on the page.

Hopefully this helps, if I can help further, please let me know.

[PascalVorwerk]

Bezig.met.opnemen.2024-10-19.141950.mp4

Not only on tablet's it seems to not work

[PascalVorwerk]

Hi!
Is there any estimation on the impact of this change, i.e. if the breaking changes described above do not apply, is there any migration steps at all?
Also, is there an estimated time of arrival for these changes? We use the datagrid a lot for our application, so if there is much work to be done we would love to plan it a bit in advance.

Great work on these components! We have been using it a bunch :)

[PascalVorwerk]

Not asking if there is an exact time table, just wondering if we could expect this in 2024/2025 or even later!

[vnbaaij]

It will definitely be released in 2024 :).

Is there any estimation on the impact of this change, i.e. if the breaking changes described above do not apply, is there any migration steps at all?

Besides those mentioned, probably no work needed.

I'll try to release a preview package so you can test it before we release it on NuGet

[NabaviFard-Mahdi]

FluentGrid GenerateHeader="GenerateHeaderOption.Sticky" not work correctly in Remote Data. And the headers are hidden after scrolling down a bit

[NabaviFard-Mahdi]

Resize anchor is not correct is RTL mode , instead of the end of the column header, it is at the beginning of them

[vnbaaij]

Already fixed locally

[PascalVorwerk]

Just asking the question here. Anyone else having issues with the new Autofit feature that has recently been added? If i use it on my datagrids with remote data, i get the following 'fr' values:

The data i am showing isn't really that large or anything and i am only using 1 template column to show a tag depending on an enum.

Anyone else that has seen this behaviour or should i try to setup a quick test project to see if the autofit feature works with remote data?

[vnbaaij]

The AutoFit in the 4.11 grid? If so, yes please create reproduction code.

[PascalVorwerk]

Allright, so please don't look at the conflicting name 'Weatherpage' , i have simply combined the template and the remote data example from the documentations and merged them to quickly set this up:

@page "/weather"

@inject HttpClient Http
@inject NavigationManager NavManager

<div style="height: 434px; overflow:auto;" tabindex="-1">
    <FluentDataGrid style="height: 100%;" Loading="@(numResults == null)" 
                    ItemsProvider="foodRecallProvider" Virtualize="true" ItemSize="46" 
                    GenerateHeader="GenerateHeaderOption.Sticky" 
                    TGridItem="FoodRecall" 
                    AutoFit="@(true)"
    >
        <PropertyColumn Title="ID" Property="@(c => c!.Event_Id)" />
        <PropertyColumn Property="@(c => c!.State)" Style="color: #af5f00 ;" />
        <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>
    </FluentDataGrid>
</div>

<p>Total: <strong>@numResults results found</strong></p>

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

    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 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; }
        }
    }

#nullable enable
}

When opening this page, i first see a grid columns, that is saying there is no items, although there are items in the paginator:

Then after a few seconds, or even only 1 second, it will rerender and the headers will dissappear, or look like they dissappeared, probably because the FR's are being set so large:

Note: I am using global interactivity on webassembly render mode, with prerendering disabled.

[PascalVorwerk]

This reproduction code requires a http client to be registered in the client project:

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

Other then that, no setup was needed i believe.