How to implement inline editing of FluentDataGrid rows?

[ghost]

Looking at the Remote Data example there are buttons that would be used to edit or delete a row but they are not implemented. Do you have any recommendations on how to implement the edit in particular? I wanted to be able to use the "RowIndex" property in determining the UI for the row being edited but I don't see how to reference the property from either the TemplateColumn or PropertyColumn components. Thank you for any advice and the library in general.

[vnbaaij]

If you look at the example in Template Colums2 you can find how the focused row is retrieved.

[jasonshave]

@vnbaaij, I'm having the same questions about this component after trying something simple. I want to update the name of my 'to do' data in the table.

Your suggestion is somewhat helpful but the trigger for focusing a cell or row happens before data entry. I'd prefer to have an OnCellChange or OnCellBlur, etc. If I enter the text field, the OnRowFocus is triggered but the data passed is the old data. To get this to work I have to click away after editing the data, then click back into the text field to trigger the OnCellFocus again which now has the edited/updated data.

[vnbaaij]

The underlying Fluent-data-grid components (plural, also row and cell) do not support change or blur events, so there is no way we can implement that.
My advise is consistent on this: Don't use the Datagrid for inline editing. Add a button or icon which opens a dialog with a form to make the update(s).

[jasonshave]

I must have missed the "consistent" advice.

Some feedback for you...

The FluentTextField has two properties, Value and ValueChanged where the description seems to indicate the method is called and used to get or set the value. This appears to be equal to setting the @bind-Value property exclusively as there is a compile error otherwise.

1. It would be helpful to update the documentation to describe when to use @bind-Value vs. setting both the Value and ValueChanged properties (compare and contrast the two approaches).
2. For the ValueChanged property, it would appear the current value of the text field is not passed to the invokable method, but rather the original value so having documentation reflecting this limitation would be helpful.
3. Lastly, if people are asking about inline editing of a table, and your advice is consistent, consider writing this in the public documentation.

In the meantime, I'll just create a simple dialog; but it does seem like overkill in my opinion.

[vnbaaij]

1. They are the same. @bind-Value is just tellling the compiler to use the Value property and create an EventCallback delegate (named ValueChanged). S\This is standard Blazor functionality. You will always get a compiler error when you use both @bind-Value and ValueChanged on a component that implements both properties.

2. Please create an issue (with reproduction steps) for this. I don't fully grasp what you mean here. Thanks.

3. Every time people asked for editing, I've given the same answer: don't do it. That is what I mean with consistent. The first line on the DataGrid's docmentation page reads: The component is used to display tabular data. (emphasis added here), but I'll add some more words to that.

It might be a bit of overkill, but as we lack the right events on the row and cell web components, it is the best way to get a working and stable editing functionality