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

https://github.com/user-attachments/assets/3a4bda73-c20d-4789-88ff-f6728dcf75cf

Fixes #3364, fixes #3365

Checklist

• Is this feature complete?
  • [X] Yes. Ready to ship.
  • [ ] No. Follow-up changes expected.
• Are you including unit tests for the changes and scenario tests if relevant?
  • [ ] Yes
  • [X] 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
  • [X] 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
  • [X] No
• Does the change require an update in our Aspire docs?
  • [ ] Yes
    • Link to aspire-docs issue:
  • [X] 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.

[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[bot]]

Azure Pipelines successfully started running 1 pipeline(s).

[adamint]

/azp run

[azure-pipelines[bot]]

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[bot]]

Azure Pipelines successfully started running 1 pipeline(s).