Add a ccs class to enable grid to show multiple lines of text. Partialy

fix #419
microsoft · Jun 2, 2023 · 74d9716 · 74d9716
1 parent ed15307
commit 74d9716
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 2 deletions.
diff --git a/examples/FluentUI.Demo.Shared/Pages/DataGrid/DataGridPage.razor b/examples/FluentUI.Demo.Shared/Pages/DataGrid/DataGridPage.razor
@@ -169,4 +169,12 @@
         <br/>
         See the 'Razor' tab on how these attributes have been applied to the class properties.
     </Description>
-</DemoSection>
+</DemoSection>
+
+<DemoSection Title="Multiline text content" Component="@typeof(DataGridMultilineText)">
+    <Description>
+
+        Example of using the <code>Class</code> parameter to style parts of the grid. Note that the class used in the example (<code>multiline-text</code>) has been added to the FluentDataGridCell css.
+    </Description>
+</DemoSection>
+
diff --git a/examples/FluentUI.Demo.Shared/Pages/DataGrid/Examples/DataGridMultilineText.razor b/examples/FluentUI.Demo.Shared/Pages/DataGrid/Examples/DataGridMultilineText.razor
@@ -0,0 +1,16 @@
+<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();
+}
diff --git a/examples/FluentUI.Demo.Shared/wwwroot/sources/DataGridMultilineText.razor.txt b/examples/FluentUI.Demo.Shared/wwwroot/sources/DataGridMultilineText.razor.txt
@@ -0,0 +1,16 @@
+<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();
+}
diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/DataGrid/FluentDataGridCell.razor.css b/src/Microsoft.Fast.Components.FluentUI/Components/DataGrid/FluentDataGridCell.razor.css
@@ -2,6 +2,11 @@
     text-overflow: ellipsis;
 }
 
+.multiline-text {
+    white-space: inherit;
+    overflow: auto;
+}
+
 .column-header {
     display: flex;
     align-self: center;

diff --git a/src/Microsoft.Fast.Components.FluentUI/wwwroot/js/CacheStorageAccessor.js b/src/Microsoft.Fast.Components.FluentUI/wwwroot/js/CacheStorageAccessor.js
@@ -1,6 +1,6 @@
 async function openCacheStorage() {
     try {
-        return await window.caches.open("Microsoft.Fast.Components.FluentUI")
+        return await window.caches.open("Microsoft.FluentUI.AspNetCore.Components")
     }
     catch (err) {
         return undefined;