Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[DataGrid Fix issue when scrolling horizontally and Virtualize="true" (…
…#3107) * [DataGrid] - Use correct spacer for Virtualize - Remove unused style - Only render row-type if not default * Add IssueTeste with current issue example * Fix tests * Add specific block to issue page for this issue
- Loading branch information
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| @using Microsoft.FluentUI.AspNetCore.Components | ||
|
|
||
| <h2>FluentDataGrid</h2> | ||
| <div style="height: 400px; width: 800px; overflow-y: scroll;"> | ||
| <FluentDataGrid @ref="grid1" Items=@items Virtualize="true" RowSize="DataGridRowSize.Medium" ItemSize="44" GenerateHeader="@GenerateHeaderOption.Sticky"> | ||
|
|
||
| <PropertyColumn Property="@(c => c.Item1)" Sortable="true" /> | ||
| <PropertyColumn Property="@(c => c.Item2)" /> | ||
| <PropertyColumn Property="@(c => c.Item3)" Align="Align.Center" /> | ||
| <PropertyColumn Property="@(c => c.Item4)" Align="Align.End" /> | ||
|
|
||
| <PropertyColumn Property="@(c => c.Item5)" Sortable="true" /> | ||
| <PropertyColumn Property="@(c => c.Item6)" /> | ||
| <PropertyColumn Property="@(c => c.Item8)" Align="Align.End" /> | ||
| <PropertyColumn Property="@(c => c.Item7)" Align="Align.Center" /> | ||
|
|
||
| <PropertyColumn Property="@(c => c.Item9)" Sortable="true" /> | ||
| <PropertyColumn Property="@(c => c.Item10)" /> | ||
| <PropertyColumn Property="@(c => c.Item11)" Align="Align.Center" /> | ||
| <PropertyColumn Property="@(c => c.Item12)" Align="Align.End" /> | ||
|
|
||
| <PropertyColumn Property="@(c => c.Item13)" Sortable="true" /> | ||
| <PropertyColumn Property="@(c => c.Item14)" /> | ||
| <PropertyColumn Property="@(c => c.Item15)" Align="Align.Center" /> | ||
| <PropertyColumn Property="@(c => c.Item16)" Align="Align.End" /> | ||
|
|
||
|
|
||
| </FluentDataGrid> | ||
| </div> | ||
|
|
||
|
|
||
| @code { | ||
| FluentDataGrid<SampleGridData>? grid1; | ||
| FluentSwitch? _clearToggle; | ||
|
Check warning on line 34 in examples/Demo/Shared/Pages/Lab/IssueTester3102.razor
|
||
|
|
||
| bool _clearItems = false; | ||
| public record SampleGridData(string Item1, string Item2, string Item3, string Item4, | ||
| string Item5, string Item6, string Item7, string Item8, | ||
| string Item9, string Item10, string Item11, string Item12, | ||
| string Item13, string Item14, string Item15, string Item16); | ||
|
|
||
| IQueryable<SampleGridData>? items = Enumerable.Empty<SampleGridData>().AsQueryable(); | ||
|
|
||
| private IQueryable<SampleGridData> GenerateSampleGridData(int size) | ||
| { | ||
| SampleGridData[] data = new SampleGridData[size]; | ||
|
|
||
| for (int i = 0; i < size; i++) | ||
| { | ||
| data[i] = new SampleGridData($"value {i}-1", $"value {i}-2", $"value {i}-3", $"value {i}-4", | ||
| $"value {i}-5", $"value {i}-6", $"value {i}-7", $"value {i}-8", | ||
| $"value {i}-9", $"value {i}-10", $"value {i}-11", $"value {i}-12", | ||
| $"value {i}-13", $"value {i}-14", $"value {i}-15", $"value {i}-16"); | ||
| } | ||
| return data.AsQueryable(); | ||
| } | ||
| protected override void OnInitialized() | ||
| { | ||
| items = GenerateSampleGridData(5000); | ||
| } | ||
|
|
||
| private void ToggleItems() | ||
| { | ||
| if (_clearItems) | ||
| { | ||
| items = Enumerable.Empty<SampleGridData>().AsQueryable(); | ||
| } | ||
| else | ||
| { | ||
| items = GenerateSampleGridData(5000); | ||
| } | ||
| } | ||
|
|
||
| private async Task SimulateDataLoading() | ||
| { | ||
| _clearItems = false; | ||
|
|
||
| items = Enumerable.Empty<SampleGridData>().AsQueryable(); | ||
| //grid?.SetLoadingState(true); | ||
| await Task.Delay(1500); | ||
|
|
||
| items = GenerateSampleGridData(5000); | ||
| //grid?.SetLoadingState(false); | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,5 @@ | ||
| .fluent-data-grid { | ||
| width: auto; | ||
| display: grid; | ||
| border-collapse: collapse; | ||
| align-items: center; | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.