HxGrid Inline editing HandleSelectedDataItemChanged.after sends wrong edititemrow

[bluisanajmr]

Hello,

I have noticed strange behavior with inline editing using the HandleSelectedDataItemChanged.after.

Using an example grid like below.

`private InvoiceLineItemGrid edititem;

 <HxGrid MultiSelectionEnabled="true" @bind-SelectedDataItems="MultiInvoiceLineItems"
 @ref="InvoiceLineItemDataGrid" TItem="InvoiceLineItemGrid" Responsive="true" DataProvider="GetGridData" PageSize="10" 
 @bind-SelectedDataItem:after="HandleSelectedDataItemChanged"
 @bind-SelectedDataItem="edititem">

public async Task HandleSelectedDataItemChanged()
{
    //edititem is always data from the clicked row without changes
    //shouldn't this be the changed data from the previously edited row?
    if (edititem != null)
    {
        //we just remove and add edited items
        await _InProcessLineItems.RemoveInvoiceLineItemAsync(edititem.Id);

        await _InProcessLineItems.AddInvoiceLineItemAsync(edititem);

    }
}
`

if you click on the second row of this grid (Order = 2) the HandleSelectedDataItemChanged fires and you get the edititem data for (Order = 2) while in this method. This is great but I haven't changed any data on that row yet. Now I change the description of this row to 3 and then click on the 3rd row (Order = 3) .

The 3rd row becomes inline editable and HandleSelectedDataItemChanged fires again but the edititem is now (order = 3) instead of my edited data from (order = 2). The grid shows the correct changes but I have no way to save the changes I made to (order =2) back to the database? All I can do is get the current values for the rows that are clicked on before I make any changes to them.

Am I completely missing something or is this a bug?

[hakenr]

The SelectedDataItem parameter does represent the current item selected in the grid.
The @bind-SelectedDataItem:after="..." is called after the value changes, e.g. after the selection changes (= the new value is already in edititem.

If you want to save the changes "when another item is selected", you need to use the original value of editItem. Try this approach:

<HxGrid SelectedDataItem="edititem" SelectedDataItemChanged="HandleSelectedDataItemChanged" ...>

@code {
  private InvoiceLineItemGrid editItem;
  public async Task HandleSelectedDataItemChanged(InvoiceLineItemGrid newSelectedDataItem)
  {
     // at the beginning, the editItem still holds the original item selected
     // save it here
  
    editItem = newSelectedDataItem; // this is needed when you use custom `SelectedDataItemChanged` handling, this is what was missing in your orignal approach #755 
  
    // the rest of the method is analogous to @bind-SelectedDataItemChanged:after="...",
    // the editItem is already populated with the newSelectedDataItem
  }
}

[bluisanajmr]

Hey Hakenr,

I have experimented with the approach that you showed above and the approach that I was originally using.

I would like to be able to use my original approach. The root of my problem with the original approach is simply that I have no way to get the changed values of the row. This is because the @bind-SelectedDataItem:after="HandleSelectedDataItemChanged" does not fire when a user changes data in the textboxes inside of each column of the rows they are editing. It only fires when a row is selected to be edited. Is the intent of the bind-SelectedDataItem:after method binding to fire this method when any data changes occur? When I change the value shown below of 4 to 3 the HandleSelectedDataItemChanged does not fire. That is why I started trying to save the data changes on selecting a new row. That approach creates all sorts of interesting problems though. I just want this event to fire when any of the data is changed so that I can save the data as the user is editing it.

This is the exact same approach as what is shown in the inline-editing source code. In this example I do not believe that the HandleSelectedDataItemChanged will save any data changes. This will just call the update UpdateEmployeeAsync method with the selecteddataitem representing the original data in the grid row that user clicked on.

@code {
	private EmployeeDto selectedDataItem;

	private async Task<GridDataProviderResult<EmployeeDto>> GetGridData(GridDataProviderRequest<EmployeeDto> request)
	{
		return new GridDataProviderResult<EmployeeDto>()
			{
				Data = await DemoDataService.GetEmployeesDataFragmentAsync(request.StartIndex, request.Count, request.CancellationToken),
				TotalCount = await DemoDataService.GetEmployeesCountAsync(request.CancellationToken)
			};
	}

	private async Task HandleSelectedDataItemChanged()
	{
		if (selectedDataItem != null)
		{
			await DemoDataService.UpdateEmployeeAsync(selectedDataItem);
		}
	}
}

[bluisanajmr]

Hello Hakenr,

I was finally able to achieve save data changes by manually adding :after binding to each of the editable item columns data binding inside of my editable rows and removing @bind-SelectedDataItem:after="HandleSelectedDataItemChanged" from the grid configuration. This approach works but it seems like it shouldn't be necessary from how the example source code from online editing is done on your site.

All of my columns in the grid are like this now.

 <ItemTemplate Context="InvoiceLineItemContext">
     @if (edititem == InvoiceLineItemContext)
     {
         <HxInputNumber @bind-Value="edititem.Price" @bind-Value:after="@HandleSelectedDataItemChanged" Decimals="2" InputGroupStartText="$" />
     }
     else
     {
         <div>@InvoiceLineItemContext.Price.ToString("c0")</div>
     }
 </ItemTemplate>

This causes the HandleSelectedDataItemChanged task to execute when ever a user changes the editable column inputnumber value and the edititem inside of the HandleSelectedDataItemChanged task has the changed value. I don't see how the example on your site does anything other than save the current (unedited) version of the edititem when the user clicks on the row.

[hakenr]

Hello @bluisanajmr,
our demo https://havit.blazor.eu/components/HxGrid#inline-editing is not correct, the selectedDataItem in HandleSelectedDataItemChanged is not the original row changed, but the new row selected. The whole demo "works" only as the DemoDataService holds the instances of employees in memory and these instances are being changed by the input-components binding.

I will adjust the demo to demonstrate the correct approach mentioned in my previous comment. The approach you chose is also applicable but it does save changes on every single input-component change, not the row as a single change.

Another possibility is to add a "Save" button to the row and make it visible only when the row is being edited. Clicking the Save button will save the data and set the selectedDataItem to null to disable editing.

[hakenr]

(The demo was fixed.)