fix: FluentDataGrid with ResizableColumns allows sortable column resize handle to be covered by adjacent column header

[kjkrum]

Create a FluentDataGrid with ResizableColumns="true" and at least one PropertyColumn with any other type of column to its right. Grab the resize handle to the right of the PropertyColumn and drag it left as far as it will go.

Problem: The header of the column to the right of the PropertyColumn covers the resize handle you are currently holding. If you release the mouse button you can never interact with that resize handle again.

This does not occur when dragging the resize handle to the right of a TemplateColumn.

[vnbaaij]

A fix for this will be in the next release. See #2059.

Also, if resizing ever gets messed up oy you just want a reset without reloading the page, shift+r key combo will reset to original layout and column sizes.

[kjkrum]

@vnbaaij I do not believe this is a duplicate. The fix for the similar issue was just CSS, so I copied the change from c23f893 into my app.css. I also added background-color: red to confirm that my changed CSS was matching the correct elements, which it was.

.col-width-draghandle {
    height: auto;
    width: calc(var(--design-unit) * 1px + 2px);
    right: calc(var(--col-gap)/2 - 0.5rem);
    border-top: none;
    border-left: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
    cursor: col-resize;
    position: sticky;
    background-color: red;
}

This does not solve the problem specifically affecting PropertyColumn. I'll write a SSCCE.

[kjkrum]

Aha! It isn't PropertyColumn, it's the column being sortable. Maybe the width of the sort direction indicator is not being accounted for.

@page "/grid"

<FluentDataGrid Data="@Data" TGridItem="@Model" ResizableColumns="true">
    <PropertyColumn Property="@(o => o.Foo)" Sortable="true" />
    <PropertyColumn Property="@(o => o.Bar)" Sortable="false" />
    <PropertyColumn Property="@(o => o.Baz)" Sortable="true" />
</FluentDataGrid>

@code {
    private IQueryable<Model> Data =
        Enumerable.Empty<Model>().AsQueryable();

    public class Model
    {
        public int Foo { get; set; }
        public int Bar { get; set; }
        public int Baz { get; set; }
    }
}

Shift-R does nothing for me.

[vnbaaij]

Ok, I'll remove the label. Let's dive in deeper.

[vnbaaij]

I fixed it locally by adding to .col-with-draghandle

min-width: calc(var(--design-unit) * 1px + 2px);

Also found a small inconsistency through this in the height of the non-sortable column; the 'bar' column header is not the same height as the other ones:

So in FluentDataGridCell.razor.css I added: height: 100%;

With these changes, the resize bar stays in view and is useable, even if a column is resized really small.

(the Shift-R only works if a header has focus)

Would be great if you can confirm.

[kjkrum]

@vnbaaij The resize bar is usable, but only barely. It narrows to 1 pixel in width, becoming almost invisible and making it difficult to interact with.

This library is nowhere near production-ready.

[vnbaaij]

This library is nowhere near production-ready.

The .NET team decided on using this library to build the (GA released) Aspire Dashboard with. But sure, if you say so.