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