diff --git a/examples/FluentUI.Demo.Shared/Pages/DataGrid/DataGridPage.razor b/examples/FluentUI.Demo.Shared/Pages/DataGrid/DataGridPage.razor index a219690c40..c1476f0414 100644 --- a/examples/FluentUI.Demo.Shared/Pages/DataGrid/DataGridPage.razor +++ b/examples/FluentUI.Demo.Shared/Pages/DataGrid/DataGridPage.razor @@ -169,4 +169,12 @@
See the 'Razor' tab on how these attributes have been applied to the class properties. - \ No newline at end of file + + + + + + Example of using the Class parameter to style parts of the grid. Note that the class used in the example (multiline-text) has been added to the FluentDataGridCell css. + + + diff --git a/examples/FluentUI.Demo.Shared/Pages/DataGrid/Examples/DataGridMultilineText.razor b/examples/FluentUI.Demo.Shared/Pages/DataGrid/Examples/DataGridMultilineText.razor new file mode 100644 index 0000000000..a587b8fedc --- /dev/null +++ b/examples/FluentUI.Demo.Shared/Pages/DataGrid/Examples/DataGridMultilineText.razor @@ -0,0 +1,16 @@ + + + + + + +@code { + record Person(int PersonId, string Name, string Description); + + IQueryable 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(); +} \ No newline at end of file diff --git a/examples/FluentUI.Demo.Shared/wwwroot/sources/DataGridMultilineText.razor.txt b/examples/FluentUI.Demo.Shared/wwwroot/sources/DataGridMultilineText.razor.txt new file mode 100644 index 0000000000..a587b8fedc --- /dev/null +++ b/examples/FluentUI.Demo.Shared/wwwroot/sources/DataGridMultilineText.razor.txt @@ -0,0 +1,16 @@ + + + + + + +@code { + record Person(int PersonId, string Name, string Description); + + IQueryable 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(); +} \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/DataGrid/FluentDataGridCell.razor.css b/src/Microsoft.Fast.Components.FluentUI/Components/DataGrid/FluentDataGridCell.razor.css index d30badec1c..0a6264e6db 100644 --- 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 index 3a6d4307ec..059c6de077 100644 --- 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;