Grid inline editing when updating a separate state

[Micah]

Here's a demo: https://stackblitz.com/edit/react-yr7z7g?file=app%2Fmain.jsx

In the example, there are two different columns which are available for inline editing.

The first column "GridDataCell (Retains Focus)" is working as expected, and can be filled without issue.

The second column "ExternalDataCell (Loses Focus)" is not working as expected. After typing a character into the input, focus is lost and the user must refocus before typing another character.

The difference between the two is that the custom cell for the first column is updating the data state that is provided to the Grid, while the second column is using a separate state to store any Inedit data changes, and also reading the current value from that separate state.

Is there some way to achieve the setup of the second column without the behavior I'm seeing?

[Konstantin Dikov]

Hello Micah,

The issue that you are facing is due to a React behavior where the definition of child components is nested in another component (inline functional component within another). This forces React to re-mount on changes, thus losing the focus.

The correct way for handling the custom cells is by defining them outside of the main component as separate components. If additional data must be past, you can either add references to that data in the underlying data items or use React Context:

• https://stackblitz.com/edit/react-yr7z7g-jsxzmz?file=app%2Fmain.jsx,package.json

Hope this helps.

 

Regards,
Konstantin Dikov
Progress Telerik

[Micah]

That's a huge help, thank you!

One additional thing I'm trying to add is a button on each row which should clear the values on that row.

I added the ClearRowCell to the working demo but it is not functioning as I had hoped. It appears to update the state correctly, however the fields are retaining their values. Do you have any suggestion?

Demo: https://stackblitz.com/edit/react-yr7z7g-mvcu9f?file=app%2Fmain.jsx

[Konstantin Dikov]

Hi Micah,

I have tested and inspected the example and there were some issues with the code. Since the Grid displays the data that is set to its "data" property, any change to the values should be set to that collection. With that in mind, if you want to clear a value for a specific field, you need to clear the value of that field in the underlying data item. I have modified the example, so it can remove the value (I have also set the ProductName to be displayed in the input elements):

• https://stackblitz.com/edit/react-yr7z7g-7ebgg7?file=app%2Fmain.jsx

Additionally, the GridCellProps (for the custom cell) contain onChange callback that can be used to trigger the onItemChange event of the Grid, which means that you can handle the changed in the context of the Grid (without passing the grid data and the setter through the Context):

• https://www.telerik.com/kendo-react-ui/components/grid/editing/editing-custom/

Hope this helps.

[Micah]

Awesome, I really appreciate the support, thanks!

[Micah]

My comment above did not bump this thread so I'm adding another answer. I apologize if this isn't ideal, didn't want to create a new post.