Skip to content

[Datagrid] Page reload issue when using SaveStateInUrl #2987

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vnbaaij merged 3 commits into from
Nov 29, 2024
Merged

[Datagrid] Page reload issue when using SaveStateInUrl #2987

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7049530
Fix datagrid page reload
svrooij Nov 29, 2024
b743805
DataGrid SaveStateInUrl disabled in example site
svrooij Nov 29, 2024
cae901b
Merge branch 'dev' into dev
vnbaaij Nov 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Merge branch 'dev' into dev
  • Loading branch information
@vnbaaij
vnbaaij authored Nov 29, 2024
commit cae901b4ab248c10588d1e7b4f8ff8b6b9a3468f
88 changes: 44 additions & 44 deletions examples/Demo/Shared/Pages/DataGrid/Examples/DataGridTypical.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,50 +3,50 @@
<p>To test set ResizeType on the DataGrid to either DataGridResizeType.Discrete or DataGridResizeType.Exact</p>
<p>Remove the parameter completely to get the original behavior</p>

<FluentDataGrid Items="@FilteredItems"
ResizableColumns=true
ResizeType="DataGridResizeType.Discrete"
Pagination="@pagination"
GridTemplateColumns="0.2fr 1fr 0.2fr 0.2fr 0.2fr 0.2fr"
RowClass="@rowClass"
RowStyle="@rowStyle"
HeaderCellAsButtonWithMenu="true"
Style="height: 405px;overflow:auto;"
ColumnResizeLabels="@customLabels">
<TemplateColumn Tooltip="true" HeaderTooltip="Flag of each team" TooltipText="@(c => "Flag of " + c.Name)" Title="Rank" SortBy="@rankSort" Align="Align.Center" InitialSortDirection="SortDirection.Ascending" IsDefaultSortColumn=true>
<img class="flag" src="_content/FluentUI.Demo.Shared/flags/@(context.Code).svg" alt="Flag of @(context.Code)" />
</TemplateColumn>
<PropertyColumn Property="@(c => c.Name)" Sortable="true" Filtered="!string.IsNullOrWhiteSpace(nameFilter)" Tooltip="true" Title="Name of the country">
<ColumnOptions>
<div class="search-box">
<FluentSearch Autofocus=true @bind-Value=nameFilter @oninput="HandleCountryFilter" @bind-Value:after="HandleClear" Placeholder="Country name..." Style="width: 100%;" Label="Filter" />
</div>
</ColumnOptions>
</PropertyColumn>
<PropertyColumn Property="@(c => c.Medals.Gold)" Sortable="true" Align="Align.Start" Tooltip="true" TooltipText="@(c => "That is " + c.Medals.Gold + " x GOLD!!")" />
<PropertyColumn Property="@(c => c.Medals.Silver)" Sortable="true" Align="Align.Center" Tooltip="true" />
<PropertyColumn Property="@(c => c.Medals.Bronze)" Sortable="false" Align="Align.End" />
<PropertyColumn Property="@(c => c.Medals.Total)" Sortable="true" Filtered="@(minMedals != 0 || maxMedals != 130)" Align="Align.End" Tooltip="true">
<ColumnOptions>
<div style="width: 100%; height: 150px;">
<FluentSlider Label="@($"Min ({minMedals})")" Min="0" Max="150" Step="1" Orientation="Orientation.Horizontal" @bind-Value=minMedals Immediate="true" Style="width: 100%;">
<FluentSliderLabel Position="0">0</FluentSliderLabel>
<FluentSliderLabel Position="50">50</FluentSliderLabel>
<FluentSliderLabel Position="100">100</FluentSliderLabel>
<FluentSliderLabel Position="150">150</FluentSliderLabel>
</FluentSlider>
<br /><br />
<FluentSlider Label="@($"Max ({maxMedals})")" Min="0" Max="150" Step="1" Orientation="Orientation.Horizontal" @bind-Value=maxMedals Immediate="true" Style="width: 100%;">
<FluentSliderLabel Position="0">0</FluentSliderLabel>
<FluentSliderLabel Position="50">50</FluentSliderLabel>
<FluentSliderLabel Position="100">100</FluentSliderLabel>
<FluentSliderLabel Position="150">150</FluentSliderLabel>
</FluentSlider>
</div>
</ColumnOptions>
</PropertyColumn>
</FluentDataGrid>

<div style="height: 380px; overflow-x:auto; display:flex;">
<FluentDataGrid Items="@FilteredItems"
ResizableColumns=true
ResizeType="DataGridResizeType.Discrete"
GridTemplateColumns="0.3fr 1fr 0.2fr 0.2fr 0.2fr 0.2fr"
Pagination="@pagination"
RowClass="@rowClass"
RowStyle="@rowStyle"
HeaderCellAsButtonWithMenu="true"
ColumnResizeLabels="@customLabels">
<TemplateColumn Tooltip="true" TooltipText="@(c => "Flag of " + c.Name)" Title="Rank" SortBy="@rankSort" Align="Align.Center" InitialSortDirection="SortDirection.Ascending" IsDefaultSortColumn=true>
<img class="flag" src="_content/FluentUI.Demo.Shared/flags/@(context.Code).svg" alt="Flag of @(context.Code)" />
</TemplateColumn>
<PropertyColumn Property="@(c => c.Name)" Sortable="true" Filtered="!string.IsNullOrWhiteSpace(nameFilter)" Tooltip="true" Title="Name of the country">
<ColumnOptions>
<div class="search-box">
<FluentSearch Autofocus=true @bind-Value=nameFilter @oninput="HandleCountryFilter" @bind-Value:after="HandleClear" Placeholder="Country name..." Style="width: 100%;" Label="Filter" />
</div>
</ColumnOptions>
</PropertyColumn>
<PropertyColumn Property="@(c => c.Medals.Gold)" Sortable="true" Align="Align.Start" Tooltip="true" TooltipText="@(c => "That is " + c.Medals.Gold + " x GOLD!!")" />
<PropertyColumn Property="@(c => c.Medals.Silver)" Sortable="true" Align="Align.Center" Tooltip="true" />
<PropertyColumn Property="@(c => c.Medals.Bronze)" Sortable="false" Align="Align.End" />
<PropertyColumn Property="@(c => c.Medals.Total)" Sortable="true" Filtered="@(minMedals != 0 || maxMedals != 130)" Align="Align.End" Tooltip="true">
<ColumnOptions>
<div style="width: 100%; height: 150px;">
<FluentSlider Label="@($"Min ({minMedals})")" Min="0" Max="150" Step="1" Orientation="Orientation.Horizontal" @bind-Value=minMedals Immediate="true" Style="width: 100%;">
<FluentSliderLabel Position="0">0</FluentSliderLabel>
<FluentSliderLabel Position="50">50</FluentSliderLabel>
<FluentSliderLabel Position="100">100</FluentSliderLabel>
<FluentSliderLabel Position="150">150</FluentSliderLabel>
</FluentSlider>
<br /><br />
<FluentSlider Label="@($"Max ({maxMedals})")" Min="0" Max="150" Step="1" Orientation="Orientation.Horizontal" @bind-Value=maxMedals Immediate="true" Style="width: 100%;">
<FluentSliderLabel Position="0">0</FluentSliderLabel>
<FluentSliderLabel Position="50">50</FluentSliderLabel>
<FluentSliderLabel Position="100">100</FluentSliderLabel>
<FluentSliderLabel Position="150">150</FluentSliderLabel>
</FluentSlider>
</div>
</ColumnOptions>
</PropertyColumn>
</FluentDataGrid>
</div>

<FluentPaginator State="@pagination" />

Expand Down
Loading
You are viewing a condensed version of this merge commit. You can view the full changes here.