[QuickGrid] Set column title by using DataAnnotations.DisplayAttribute

vnbaaij commented 1 year ago

Summary

In the Microsoft.Fast.Components.FluentUI package I'm using a QuickGrid copy that is extended to define a column title by using the System.ComponentModel.DataAnnotations.DisplayAttribute on the property you want to display in a column (instead of specifying a Title parameter on the TemplateColumn or PropertyColumn)

Motivation and goals

Attribute can load data from a resource file which makes localization easier
Potentially this can later also be used for auto generating columns by leveraging the Order (and other) properties
In scope
Add the necessary code to enable this

Out of scope

Auto generating colums

Risks / unknowns

Risk is low as the original Title parameter is kept in place. This just offers an alternative way of setting a column's title. Need to document what option gets precedence over the other

Examples

For example code and implementation see the Razor tab at https://brave-cliff-0c0c93310.azurestaticapps.net/DataGrid#column-headers

Alternative approach

We could also use DisplayName attribute (from System.ComponentModel) to be able to specify a title on a property but we would lose the option to read from a resource file with that. Also, this approach would not help with a possible auto generation scenario later (no Order or other properties).

vnbaaij commented 1 year ago

@mkArtakMSFT this is incorrectly labeled as 'area-identity'. Can you re-label as 'area-blazor'? And add label 'feature-blazor-quickgrid'. Thanks!

mkArtakMSFT commented 1 year ago

@vnbaaij it's not clear what the specific ask is. Do you want the DataAnnotations attributes to support localization so that the title changes based on the culture of the application?

ghost commented 1 year ago

Hi @vnbaaij. We have added the "Needs: Author Feedback" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

vnbaaij commented 1 year ago

Hi Artak,

I'm proposing an extra/alternative way to specify a Title for a column by leveraging the DataAnnotations attribute on the source of the column data. In the implementation I have in my QuickGrid copy it looks like this:

@using System.ComponentModel.DataAnnotations
<FluentDataGrid RowsData="@people">
    <PropertyColumn Property="@(p => p.PersonId)" Sortable="true" />
    <PropertyColumn Property="@(p => p.Name)" Sortable="true" />
    <PropertyColumn Property="@(p => p.BirthDate)" Format="yyyy-MM-dd" Sortable="true" />
</FluentDataGrid>

@code {
    public class Person
    {
        public Person(int personId, string name, DateOnly birthDate)
        {
            PersonId = personId;
            Name = name;
            BirthDate = birthDate;
        }

        [Display(Name="Identity")]
        public int PersonId { get; set; }

        [Display(Name = "Full name")]
        public string Name { get; set; }

        [Display(Name = "Birth date")]
        public DateOnly BirthDate { get; set; }
    }

    IQueryable<Person> people = new[]
    {
        new Person(10895, "Jean Martin", new DateOnly(1985, 3, 16)),
        new Person(10944, "António Langa", new DateOnly(1991, 12, 1)),
        new Person(11203, "Julie Smith", new DateOnly(1958, 10, 10)),
        new Person(11205, "Nur Sari", new DateOnly(1922, 4, 27)),
        new Person(11898, "Jose Hernandez", new DateOnly(2011, 5, 3)),
        new Person(12130, "Kenji Sato", new DateOnly(2004, 1, 9)),
    }.AsQueryable();
}

In contrast to the regular implementation where it looks like this:

<FluentDataGrid RowsData="@people">
    <PropertyColumn Title="Identity" Property="@(p => p.PersonId)" Sortable="true" />
    <PropertyColumn Title="Full name" Property="@(p => p.Name)" Sortable="true" />
    <PropertyColumn Title="Birthdate" Property="@(p => p.BirthDate)" Format="yyyy-MM-dd" Sortable="true" />
</FluentDataGrid>

@code {
    record Person(int PersonId, string Name, DateOnly BirthDate);

    IQueryable<Person> people = new[]
    {
        new Person(10895, "Jean Martin", new DateOnly(1985, 3, 16)),
        new Person(10944, "António Langa", new DateOnly(1991, 12, 1)),
        new Person(11203, "Julie Smith", new DateOnly(1958, 10, 10)),
        new Person(11205, "Nur Sari", new DateOnly(1922, 4, 27)),
        new Person(11898, "Jose Hernandez", new DateOnly(2011, 5, 3)),
        new Person(12130, "Kenji Sato", new DateOnly(2004, 1, 9)),
    }.AsQueryable();
}

By using the DataAnnotations, it would be possible for a developer to localize the grid for different cultures.

I'm not proposing to change the current implementation but to augment it with the described behavior. If we agree on this being a good addition, I could provide a PR for it.

ghost commented 1 year ago

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

Eleve2023 commented 1 year ago

Hello everyone, I just wanted to let you know that I have submitted a pull request for the feature we discussed here. Here is the link: https://github.com/dotnet/aspnetcore/pull/47993. I would appreciate your feedback and suggestions. Thank you!

dotnet / aspnetcore