fix: Resizable columns do not work correctly with dynamic columns in FluentDataGrid

[NickHirras]

🐛 Bug Report

A FluentDataGrid with ResizableColumns="true" and utilizing Dynamic Columns doesn't work correctly.

💻 Repro or Code Sample

@page "/test"

<p>
  Show:
  <FluentCheckbox @bind-Value="showName">Name</FluentCheckbox>
  <FluentCheckbox @bind-Value="showBirthDate">Birth date</FluentCheckbox>
</p>


<FluentDataGrid Items="@people.AsQueryable()" GridTemplateColumns="0.5fr 1fr 1fr" style="width: 500px;" ResizableColumns="true">
  <PropertyColumn Title="ID" Property="@(c => c.PersonId)" Sortable="true" />
  @if (showName)
  {
    <TemplateColumn Title="Name">
      <strong>@context.LastName</strong>, @context.FirstName
    </TemplateColumn>
  }
  <PropertyColumn Title="Last name" Property="@(c => c.LastName)" Sortable="true" />
  <PropertyColumn Title="First name" Property="@(c => c.FirstName)" Sortable="true" />
  <TemplateColumn Title="Some junk">
    The Microsoft.FluentUI.AspNetCore.Components package provides a set of Blazor components. Some of the components are wrappers around Microsoft's official Fluent UI Web Components. Others are components that leverage the Fluent Design System or make it easier to work with Fluent. To get up and running with the Microsoft.FluentUI.AspNetCore.Components library, see the 'Getting Started'' section below.
  </TemplateColumn>
  @if (showBirthDate)
  {
    <PropertyColumn Title="Birth date" Property="@(c => c.BirthDate)" Format="yyyy-MM-dd" Sortable="true" />
  }
  <TemplateColumn Title="Some junk2">
      The Microsoft.FluentUI.AspNetCore.Components package provides a set of Blazor components. Some of the components are wrappers around Microsoft's official Fluent UI Web Components. Others are components that leverage the Fluent Design System or make it easier to work with Fluent. To get up and running with the Microsoft.FluentUI.AspNetCore.Components library, see the 'Getting Started'' section below.
    </TemplateColumn>
</FluentDataGrid>


@code {
  bool showName = true;
  bool showBirthDate = false;

  public class Person
  {
    public int PersonId { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public DateTime BirthDate { get; set; }
  }

  private Person[] people = new Person[]
  {
    new Person { PersonId = 1, FirstName = "John", LastName = "Doe", BirthDate = new DateTime(1980, 1, 1) },
    new Person { PersonId = 2, FirstName = "Jane", LastName = "Doe", BirthDate = new DateTime(1985, 2, 2) },
    new Person { PersonId = 3, FirstName = "Sam", LastName = "Smith", BirthDate = new DateTime(1990, 3, 3) },
  };

}

🤔 Expected Behavior

I would expect the contents of the FluentDataGrid to be rendered correctly, and for resizable columns to work correctly. And to continue to work as dynamic columns are shown/hidden.

😯 Current Behavior

The grid renders artifacts and the resize behavior becomes erratic. See attached screen recording.

💁 Possible Solution

🔦 Context

🌍 Your Environment

• MacOS
• Chrome (arm64)
• .NET 8.0.101

https://github.com/microsoft/fluentui-blazor/assets/3911628/f2c3bd3a-9301-4b27-9a94-dcc1397bb0dc

[vnbaaij]

Fixing this will require significant re-work of the DataGrids's JS resizing code. Will take some time probably...

[vnbaaij]

In the code you provided, there are initially 6 columns shown but you only specify 3 columns in the GridTemplateColumns. That is not going to work well...If you update GridTemplateColumns to have 6 (or even 7) values, things line up a lot better already.

[NickHirras]

Yes in my actual application I'm dynamically providing the correct number of GridTemplateColumns and it's improved there but still experiences this bug. I'll update test code to reflect that.

[NickHirras]

Here's using dynamically generated GridTemplateColumns so that it accurately reflects the currently visible set of columns.

@page "/test"

<p>
  Show:
  <FluentCheckbox @bind-Value="showName">Name</FluentCheckbox>
  <FluentCheckbox @bind-Value="showBirthDate">Birth date</FluentCheckbox>
</p>

<p>GridTemplateColumns="@GridTemplateColumns()"</p>

<FluentDataGrid Items="@people.AsQueryable()" GridTemplateColumns="@GridTemplateColumns()" style="width: 800px;" ResizableColumns="true">
  <PropertyColumn Title="ID" Property="@(c => c.PersonId)" Sortable="true" />
  @if (showName)
  {
    <TemplateColumn Title="Name">
      <strong>@context.LastName</strong>, @context.FirstName
    </TemplateColumn>
  }
  <PropertyColumn Title="Last name" Property="@(c => c.LastName)" Sortable="true" />
  <PropertyColumn Title="First name" Property="@(c => c.FirstName)" Sortable="true" />
  <TemplateColumn Title="Some junk">
    The Microsoft.FluentUI.AspNetCore.Components package provides a set of Blazor components. Some of the components are wrappers around Microsoft's official Fluent UI Web Components. Others are components that leverage the Fluent Design System or make it easier to work with Fluent. To get up and running with the Microsoft.FluentUI.AspNetCore.Components library, see the 'Getting Started'' section below.
  </TemplateColumn>
  @if (showBirthDate)
  {
    <PropertyColumn Title="Birth date" Property="@(c => c.BirthDate)" Format="yyyy-MM-dd" Sortable="true" />
  }
  <TemplateColumn Title="Some junk2">
      The Microsoft.FluentUI.AspNetCore.Components package provides a set of Blazor components. Some of the components are wrappers around Microsoft's official Fluent UI Web Components. Others are components that leverage the Fluent Design System or make it easier to work with Fluent. To get up and running with the Microsoft.FluentUI.AspNetCore.Components library, see the 'Getting Started'' section below.
    </TemplateColumn>
</FluentDataGrid>


@code {
  bool showName = true;
  bool showBirthDate = false;

  string GridTemplateColumns()
  {
    var cols = "0.5fr ";

    if (showName)
    {
      cols += "1.5fr ";
    }

    cols += "0.75fr 0.5fr 2fr ";

    if (showBirthDate)
    {
      cols += "0.75fr ";
    }

    cols += "2fr";

    return cols;
  }

  public class Person
  {
    public int PersonId { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public DateTime BirthDate { get; set; }
  }

  private Person[] people = new Person[]
  {
    new Person { PersonId = 1, FirstName = "John", LastName = "Doe", BirthDate = new DateTime(1980, 1, 1) },
    new Person { PersonId = 2, FirstName = "Jane", LastName = "Doe", BirthDate = new DateTime(1985, 2, 2) },
    new Person { PersonId = 3, FirstName = "Sam", LastName = "Smith", BirthDate = new DateTime(1990, 3, 3) },
  };

}

And a demo:

https://github.com/microsoft/fluentui-blazor/assets/3911628/e49ee902-3f05-48b3-a06c-964b564765d1

[vnbaaij]

I managed to make it a little beter by 'resetting' the column widths on the first resize action. Now if can just trigger that when a column gets added/removed...

[vnbaaij]

I tried your latest code with the changes I made in the PR to fix #1596 and I think that is as far as we can take it for now. Can you try it with the preview package that will be published tonight?

I don't have more time available to work on this resizing logic right now and I think it is a fairly niche use case. Feel free to work on it more if you can and if you find a solid, good working solutio, we happily take in a PR.

[NickHirras]

Sounds great, I think I'll be able to test it tomorrow. Thank you for your help!

[NickHirras]

Would this release include the changes?

Microsoft.FluentUI.AspNetCore.Components: preview.24059.19

If not, how can I pull in the correct version? I'm referencing fluent in my csproj as: <PackageReference Include="Microsoft.FluentUI.AspNetCore.Components" Version="4.*-*" />

@vnbaaij

[vnbaaij]

Not yet. I was ahead of the pack a bit. The PR got merged this morning so package will be available tomorrow morning

[NickHirras]

Testing this morning with release 4.4.2-preview.24060.3

Still very buggy for our screen with this version. I'll post a screen capture of the behavior this morning. (Is also still buggy as you play around with the test page I submitted above).

I appreciate the time put into improvements, I'll try to continue that work and see if I can make any additional improvements in the javascript, if I do I'll submit a PR. Thank you!

https://github.com/microsoft/fluentui-blazor/assets/3911628/dd19af2d-396a-4129-931b-95c4075eb63a

[vnbaaij]

Hi Nick,

I made a mistake here. The changes I made are in a separate branch (fix-issue-#1596) and that does not end up in the nightly preview package (only built for dev branch). That PR only got merged 4 days ago. So you'll need to try the package that gets released tonight. Sorry for the confusion

[NickHirras]

Will try and report back, thanks for the update!

[NickHirras]

Testing with FluentUI 4.4.2-preview.24064.26, behavior seems different but still very buggy.

https://github.com/microsoft/fluentui-blazor/assets/3911628/e8d6fc89-15c5-4ac4-b158-07101d31ae5f

[vnbaaij]

Thanks for reporting. As said, this is as far as I can take it. I intend to close the issue as 'not planned' because that reflects the state accurately. Agreed?

[NickHirras]

Yes that's fine, I do appreciate the work on it, thanks!

On Wed, Mar 6, 2024, 12:47 AM Vincent Baaij @.***> wrote:

Thanks for reporting. As said, this is as far as I can take it. I intend to close the issue as 'not planned' because that reflects the state accurately. Agreed?

— Reply to this email directly, view it on GitHub https://github.com/microsoft/fluentui-blazor/issues/1553#issuecomment-1980190512, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA527THS55TRHYGJEF24KVLYW23XJAVCNFSM6AAAAABDT5SNGSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSOBQGE4TANJRGI . You are receiving this because you authored the thread.Message ID: @.***>