fluentui-blazor icon indicating copy to clipboard operation
fluentui-blazor copied to clipboard

fix: [ResizableColumns=true In RTL Direction] in FluentDataGrid

Open NabaviFard-Mahdi opened this issue 4 months ago • 0 comments

🐛 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

NabaviFard-Mahdi avatar Oct 20 '24 13:10 NabaviFard-Mahdi