In FluentDatagrid the FluentNumberfield does not update value in code

[chigivigi]

🐛 Bug Report

I created a datagrid in which user can edit the cells and run a update action that pass those values to an azure function. When changing the value of a cell containing the fluentnumberfield the value passed to the update action shows the old value not the new one.

💻 Repro or Code Sample

<FluentDataGrid RowsData="@filterResult" GridTemplateColumns="minmax(20em, 100em) minmax(15em, 40em) 8em">
            <PropertyColumn Title="Name" Property="@(p =>p.Name)" Sortable="true"></PropertyColumn>
            <TemplateColumn Title="Quantity" Context="context">
                <FluentNumberField @bind-Value="@context.Quantity" ></FluentNumberField>
            </TemplateColumn>
            <TemplateColumn Title="Action" Context="context" Align="Align.Center">
                @if(!context.IsLoading)
                {
                    <FluentButton @onclick="@(() => Update(context))">Update</FluentButton>
                }
                else
                {
                    <FluentProgressRing></FluentProgressRing>
                }
            </TemplateColumn>
</FluentDataGrid>

@code {
  private async Task Update (CustomObject customobject)
  {
  }

🤔 Expected Behavior

The object passed to the method shows the new quantity value.

😯 Current Behavior

The object passed to the method shows the old quantity value that was set when the DataGrid was filled.

🔦 Context

We cannot enable the user to edit record inside the datagrid. The FluentDatagrid shows the most relevant data regarding each customer.

🌍 Your Environment

Windows 11. Microsoft Edge latest. Visual Studio 2022.

[chigivigi]

When changing the FluentNumberfield by putting ValueChanged instead of bind-Value the breakpoint is triggered only after visiting the component for the second time.

[idea-lei]

Can confirm with v2.0.4 and v2.0.5

with very simple reproduction here

<FluentNumberField @bind-Value="@test" />
@code{
    public int testValue { get; set; }
}

does not work no matter with property or field, public or private

[chigivigi]

Hello @vnbaaij,

can you tell me when the new 2.1.0 nugget version will be released. The rc2 version makes the FluentNumberfield work but the FluentIcons do not work with it. Are you reworking how the icons will be used or you only need to adapt the code form the 2.0.5 version ?

[vnbaaij]

We have no firm date set yet. If you are using RC2, you need to make changes to your project. Did you see https://github.com/microsoft/fast-blazor/discussions/300#discussioncomment-4909264

[chigivigi]

@vnbaaij I see it, it helped me set the icons. The FluentRadio Value property expects a TValue and you cannot set a string value inside it.

[vnbaaij]

You need to supply it in the form @("...") This is a Blazor thing that it does not recognize a supplied string as a string.

[chigivigi]

@vnbaaij thank you for the help regarding the fluent radio, it work after making the changes

[vnbaaij]

So is the whole issue solved when using the 2.1 release? If so, please close it. Thanks.

[idea-lei]

So is the whole issue solved when using the 2.1 release? If so, please close it. Thanks.

I tested with 2.1.0-rc-2 and it still does not work for me with the example above.

[vnbaaij]

@idea-lei using this code to test:

@inject ILogger<DataGridGetStarted> logger;

<FluentDataGrid RowsData="@people">
    <PropertyColumn Property="@(p => p.PersonId)" Sortable="true" />
    <PropertyColumn Property="@(p => p.Name)" Sortable="true" />
    <PropertyColumn Property="@(p => p.BirthDate)" Format="yyyy-MM-dd" Sortable="true" />
    <TemplateColumn Title="Quantity" Context="context">
        <FluentNumberField @bind-Value="@context.Quantity"></FluentNumberField>
    </TemplateColumn>
    <TemplateColumn Title="Action" Context="context" Align="Align.Center">
         <FluentButton @onclick="@(() => Update(context))">Update</FluentButton>

    </TemplateColumn>
</FluentDataGrid>

@code {
    public class Person
    {
        public int PersonId { get; set; } 
        public string Name { get; set; }
        public DateOnly BirthDate { get; set; }
        public int Quantity { get; set; }

        public Person(int id, string name, DateOnly birthDate, int quantity)
        {
            PersonId = id;
            Name = name;
            BirthDate = birthDate;
            Quantity = quantity;
        }
    }

    IQueryable<Person> people = new[]
    {
        new Person(10895, "Jean Martin", new DateOnly(1985, 3, 16), 1),
        new Person(10944, "António Langa", new DateOnly(1991, 12, 1),2),
        new Person(11203, "Julie Smith", new DateOnly(1958, 10, 10),3),
        new Person(11205, "Nur Sari", new DateOnly(1922, 4, 27),4),
        new Person(11898, "Jose Hernandez", new DateOnly(2011, 5, 3),5),
        new Person(12130, "Kenji Sato", new DateOnly(2004, 1, 9),6),
    }.AsQueryable();

    private async Task Update(Person customobject)
    {
        logger.LogInformation($"Quantity: {customobject.Quantity}");

    }
}

Gives me the following in the browser:

Tested on latest RC-2

[chigivigi]

I have upgraded the nugget package to rc3 version because the Icons in the project were throwing errors. But in the rc3 version the number field works in a form, but it does not work if the fluent DataGrid column contains the fluent number field. I need to click outside the fluent number field and then click inside it again that the change in the fluent number field is recognized.

[chigivigi]

There is a exception when trying to build the project using the rc3 version of the nugget package. the exception is: Error CS0103: The name 'ConfigurationGenerator' does not exist in the current context.

I mean when trying to build it in for production.

[vnbaaij]

@chigivigi let's try not to mix issues. Makes it too hard to track everything. Please create a new one for the ConfigurationGenerator one.

With regards to the issue at hand. Try it with the example I gave above. On my site, I increase the number, click on the 'updat' button and see the updated value on screen and in when in debug mode. Let me know what you get with this sample. p.s. The number field normally responds to an onchange event so it needs to lose focus to notify the system its value has changed.

[chigivigi]

I am using the Value Changed property for the fluent number field component. I have made a few more test and noticed that when you use the up and down button inside the fluent number field, the change event is triggered, but if you change the value using the keyboard that you need to visit the same fluent number field two times to trigger the change event, and it will save the first change to the value.

[chigivigi]

@vnbaaij I tried out your example code and the fluent number field does not save the changes after I write it inside and click outside the DataGrid. I did not use the up and down button inside the fluent number field. I wrote the value using the keyboard. When I write the value using the keyboard I need to click outside the DataGrid that click on the fluent number field component that I changed and then the value will be saved inside the context.

[vnbaaij]

This is fixed in 2.1.0-rc-4. Package will be available on NuGet later today.