feat: Add multi line text to FluentDataGrid PropertyColumn

[Ogglas]

🙋 Feature Request

Add the possibility to use multi line text to FluentDataGrid PropertyColumn

😯 Current Behavior

Currently text-overflow: ellipsis; is always used.

fluent-data-grid-cell[b-58jkn3no8z] {
    text-overflow: ellipsis;
}

💁 Possible Solution

My current solution that works but I would rather have a setting for it:

app.css:

.datagrid-multiline-text {
    white-space: inherit;
    overflow: auto; /*Only used for virtualized table with fixed height*/
}

Component:

<FluentDataGrid RowsData="@people">
    <PropertyColumn Property="@(p => p.PersonId)" Sortable="true" />
    <PropertyColumn Property="@(p => p.Name)" Sortable="true" />
    <PropertyColumn Property="@(p => p.Description)" Sortable="true" Class="datagrid-multiline-text" />
</FluentDataGrid>

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

    IQueryable<Person> people = new[]
    {
        new Person(10895, "Jean Martin", "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),
        new Person(10944, "António Langa", "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),
        new Person(11203, "Julie Smith","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),
    }.AsQueryable();
}

[vnbaaij]

Hi Oscar,

We are staying very close to the original QuickGrid with the FluentDataGrid. This so we can upgrade with ease when new versions/bug fixes come out. We will therefore not be adding this. Think the Class way of solving this is a good enough solution here.

[vnbaaij]

After some rethinking...I can add a class to the isolated css and include your sample using that class on the demo page. Thoughts?

[vnbaaij]

Sample has been added:

with this razor file (multiline-text css class has been added to FluentDataGridCell.razor.css:

<FluentDataGrid RowsData="@people">
    <PropertyColumn Property="@(p => p.PersonId)" Sortable="true" />
    <PropertyColumn Property="@(p => p.Name)" Sortable="true" />
    <PropertyColumn Property="@(p => p.Description)" Sortable="true" Class="multiline-text" />
</FluentDataGrid>

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

    IQueryable<Person> people = new[]
    {
        new Person(10895, "Jean Martin", "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),
        new Person(10944, "António Langa", "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),
        new Person(11203, "Julie Smith","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),
    }.AsQueryable();
}

[Ogglas]

Tried the sample in V2.3.5 and it works as expected. Nice addition! :)