Replace data grid column headers with custom template

[adamint]

Description

@vnbaaij graciously added the ability to resize columns via a UI to fluentui-blazor. However, this is done by adding a button to the column header cell, space which adds up when there are many columns in a grid. For example,

We are still required to have some way to toggle this UI, so I created two wrapper classes FluentTemplateColumn and FluentPropertyColumn which set the header cell template to a button that, when clicked, opens a menu allowing the user to select between Sort and Resize - this UI concept is taken directly from the accessible data grid example provided here. The button is not a MenuButton because we do not want to show the chevron (again, for space reasons).

The resize ui (column options ui) is toggled if a cell is clicked that is not sortable, as can be seen in the recording below. Most changes are Property/TemplateColumn -> AspireProperty/TemplateColumn

Screen.Recording.2024-08-12.at.11.28.47.AM.mov

Fixes #3364, fixes #3365

Checklist

• Is this feature complete?
  • Yes. Ready to ship.
  • No. Follow-up changes expected.
• Are you including unit tests for the changes and scenario tests if relevant?
  • Yes
  • No
• Did you add public API?
  • Yes
    • If yes, did you have an API Review for it?
      • Yes
      • No
    • Did you add <remarks /> and <code /> elements on your triple slash comments?
      • Yes
      • No
  • No
• Does the change make any security assumptions or guarantees?
  • Yes
    • If yes, have you done a threat model and had a security review?
      • Yes
      • No
  • No
• Does the change require an update in our Aspire docs?
  • Yes
    • Link to aspire-docs issue:
  • No

[vnbaaij]

@dvoituron should we perhaps consider this to be our default behavior as well?

[JamesNK]

The context menu sometimes appears on the right of the column instead of the left:

[JamesNK]

The curved arrow button feels confusing. It seems to be a reset button, yes?

Should it only be enabled when there is a value to reset? Otherwise, people will click on it and not see any change. Also, clicking the tick button closes the popup. I think that clicking the reset button should close the dialog as well.

---

Edit: I think this feedback can be ignored if we go with +/- buttons. See below.

[JamesNK]

I'm curious if there was a reason why you chose a text box compared to + and - buttons like FluentUI?

https://www.fluentui-blazor.net/DataGrid

It is easier to find the size you want by tapping those buttons compared to guessing with a pixel number.

[JamesNK]

Discussion here indicates +/- are ok.

[JamesNK]

Hmm, I think there might be the opportunity to reduce the amount of change by having a custom FluentDataGrid type instead of custom columns. The custom grid type could loop through the columns and set HeaderCellItemTemplate = AspireFluentDataGridHeaderCell.RenderHeaderContent(Grid); on all the columns.

However, that might create problems of its own if there are situations where that is wrong behavior. Custom columns that set the header is probably ok for now. It's verbose, but it gives us control.

[vnbaaij]

The curved arrow button feels confusing. It seems to be a reset button, yes?

Should it only be enabled when there is a value to reset? Otherwise, people will click on it and not see any change. Also, clicking the tick button closes the popup. I think that clicking the reset button should close the dialog as well.

---

Edit: I think this feedback can be ignored if we go with +/- buttons. See below.

Yes, it is a reset button (same as Shift+r key).
I don't think we have a mechanism yet to determine if any changes have been made.
Agree on reset closing the dialog.

[vnbaaij]

I'm curious if there was a reason why you chose a text box compared to + and - buttons like FluentUI?

https://www.fluentui-blazor.net/DataGrid

It is easier to find the size you want by tapping those buttons compared to guessing with a pixel number.

We offer both as options for resizing. It is controlled by the ResizeType parameter

[dvoituron]

@dvoituron should we perhaps consider this to be our default behavior as well?

Yes, I find it preferable to have a minimum of visual information on the grid headers.
And it will look more like FluentUI React.

[adamint]

I'm curious if there was a reason why you chose a text box compared to + and - buttons like FluentUI?

https://www.fluentui-blazor.net/DataGrid

It is easier to find the size you want by tapping those buttons compared to guessing with a pixel number.

Should it only be enabled when there is a value to reset? Otherwise, people will click on it and not see any change. Also, clicking the tick button closes the popup. I think that clicking the reset button should close the dialog as well.

We don't own that resize UI. That's provided from fluentui-blazor. I changed it to Discrete, but @vnbaaij should we just open issues for the display of that UI?

[adamint]

The context menu sometimes appears on the right of the column instead of the left:

I couldn't see how that behavior is anything but a bug in fluentui. I've been trying to figure it out, even setting the horizontal position explicitly to left or start doesn't change it. @vnbaaij for confirmation

However, if there's no easy resolution, since this isn't a blocking bug - whereas we are on strict timelines for accessibility sev2s - we could still merge.

[JamesNK]

Agree that it's not a blocking bug. But please create an issue in the fluentui repo.

[adamint]

/azp run

[adamint]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[adamint]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[drewnoakes]

Build failed with a timeout of 100 seconds on downloading a file:

##[error].packages/microsoft.net.runtime.workloadtesting.internal/9.0.0-preview.5.24272.3/Sdk/WorkloadTesting.Core.targets(82,5): error MSB3923: (NETCORE_ENGINEERING_TELEMETRY=Build) Failed to download file "https://dot.net/v1/dotnet-install.sh". The request was canceled due to the configured HttpClient.Timeout of 100 seconds elapsing. ---> A task was canceled. ---> A task was canceled.

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).