fluentui-blazor
fluentui-blazor copied to clipboard
fix: [ResizableColumns=true In RTL Direction] in FluentDataGrid
🐛 Bug Report
When Change Direction = RTL And in Data Grid ResizableColumns=true When Move Mouse Left Or Right To move and change the size of the column, they work in the opposite way
💻 Repro or Code Sample
Company.razor
@page "/Company"
@using AppManager.Common.Resources
@using AppManager.Application.Modules.Company.Dtos
@using AppManager.WebAppV1.Common
@attribute [StreamRendering]
<PageTitle> @AppStringResource.CompanyPageTitle </PageTitle>
<FluentCard MinimalStyle="true" Width="100%" Height="100%">
<FluentDataGrid TGridItem="CompanyDto" AutoFit="true"
ItemKey="dto => { return dto.Id; }"
ShowHover="true"
Data="@_companies"
Items="@_companies?.AsQueryable()"
Loading="@(_companies == null)"
ResizableColumns=true
ResizeType="DataGridResizeType.Exact"
Pagination="@UiHelper.PaginationState">
<SelectColumn TGridItem="CompanyDto"
SelectMode="DataGridSelectMode.Single"
SelectFromEntireRow="true"
Property="dto => dto.Selected"
OnSelect="@(e => e.Item.Selected = e.Selected)"
Filtered="true"/>
<TemplateColumn Tooltip="true" Title="@AppStringResource.LogoTitle" Align="Align.Center" Sortable="false" Filtered="false" Width="50rem">
<img class="flag" src="@context.Logo" alt="Logo @context.Name" />
</TemplateColumn>
<PropertyColumn
Property="@(p => p.Name)" Sortable="true" Filtered="true"
IsDefaultSortColumn="true" Align="Align.End" InitialSortDirection="SortDirection.Ascending"/>
<PropertyColumn Property="@(p => p.EnName)" Sortable="true" Filtered="true"
Align="Align.End" InitialSortDirection="SortDirection.Ascending"/>
<PropertyColumn Property="@(p => p.CodeName)" Sortable="true" Filtered="true"
Align="Align.End" InitialSortDirection="SortDirection.Ascending"/>
<PropertyColumn Property="@(p => p.PhoneNumber)" Sortable="true" Filtered="true"
Align="Align.End" InitialSortDirection="SortDirection.Ascending"/>
<PropertyColumn Property="@(p => p.Fax)" Sortable="true" Filtered="true"
Align="Align.End" InitialSortDirection="SortDirection.Ascending"/>
<PropertyColumn Property="@(p => p.Email)" Sortable="true" Filtered="true"
Align="Align.End" InitialSortDirection="SortDirection.Ascending"/>
<PropertyColumn Property="@(p => p.Address)" Sortable="true" Filtered="true"
Align="Align.End" InitialSortDirection="SortDirection.Ascending"/>
<PropertyColumn Property="@(p => p.Description)" Sortable="true" Filtered="true"
Align="Align.End" InitialSortDirection="SortDirection.Ascending"/>
<TemplateColumn Title="Actions" Align="@Align.End">
<FluentButton Title="@AppStringResource.Edit" IconEnd="@(new Icons.Regular.Size16.Edit().WithColor(Color.Warning))" />
<FluentButton Title="@AppStringResource.Delete" IconEnd="@(new Icons.Regular.Size16.Delete().WithColor(Color.Error))" OnClick="async () => { await OnDeleteAsync(context.Id); }"/>
</TemplateColumn>
</FluentDataGrid>
</FluentCard>
@ Code {
public List<CompanyDto>? _selectedItems { get; set; }
public IReadOnlyList<CompanyDto>? _companies { get; set; }
[Inject] private ICompanyService _companyService { get; set; }
protected override async Task OnInitializedAsync()
{
var result = await _companyService.GetAllAsync(CancellationToken.None);
if (result.IsSuccess)
{
_companies = result.Data!;
await InvokeAsync(StateHasChanged);
}
await base.OnInitializedAsync();
}
private async Task OnDeleteAsync(Guid id)
{
//var res = await _companyService.DeleteAsync(id, CancellationToken.None);
}
}
🤔 Expected Behavior
The direction of mouse movement and the direction of changing the size of the columns should be in the same direction
😯 Current Behavior
Currently, they are not in the same direction and in the opposite direction
💁 Possible Solution
🔦 Context
Get Data From Database And display With Data Grid in RTL Direction
🌍 Your Environment
FluentUi : 4.10.2 OS Name: Windows OS Version: 10.0.19045 OS Platform: Windows RID: win-x64 DotNet 8.0.10 X64 Browser : Chrome Version 130.0.6723.59 (Official Build) (64-bit) Editor : Visual Studio 2022 v17.10.5 X64