editable master-detailgrid loses focus on update

[Waldemar]

Hi,

I have a requirement to implement an editable master-detailgrid. 

After updating a child-record, the master needs to be updated. The update is triggered by tabbing out of the current cell. Then the sum is calculated and updated in the master-grid. 

My problem is, that after updating the master-grid , the child looses its focus.

Here is a simplyfied version of my project:

https://stackblitz.com/edit/react-ctg3nj

Any help would be appreciated.

Regards

[Stefan]

This is expected as the Grid has no built-in navigation on tap.

They have to be handled by the developer on the onKeyDawn event by placing the next editable cell in edit. A possible approach is shown here:

https://www.telerik.com/kendo-react-ui/components/grid/accessibility/#toc-in-cell-editing-with-tab

We are also working on extending the new keyboard navigation feature to make this easier to achieve.

Also, in functional components when passing props between components we recommend using React.Context as using functions we always re-mount them:

https://reactjs.org/docs/context.html

For example here, we recommend passing the extra information via React.Context instead of using an extra function:

const renderers = new Renderers(enterEdit, exitEdit, 'Value');

[Waldemar]

Thanks for the update. Would it be possible to get a small sample App showing the points above?

[Stefan]

Currently, our avaialbe sample application has only single-level Grid or noneditable ones:

https://www.telerik.com/kendo-react-ui/getting-started/#toc-sample-applications

We have one example that shows how to pass extra props to cells using React. Context. The example is for single-level editing, but it can be used as a reference to how to utilize React.Context:

https://stackblitz.com/edit/react-4oklj4?file=src%2FEditableGrid.jsx

[Stefan]

Hello, Waldemar,

This occurs because of the use of forceUpdate.

We recommend updating the data not its reference. I know that we have shown this in class components, but it is not recommended for functional components. We only added it in the demos to make the code simpler.

In real cases, the data in the state has to be updated. I updated the example to showcase this:

https://stackblitz.com/edit/react-yvqsps?file=src%2FDetailComponent.jsx

I hope this is helpful.

Regards,
Stefan
Progress Telerik

[Waldemar]

Hello Stefan,

thanks for your fast response. 

I tested your solution and after pressing the tab-key the focus is still "lost" . Instead it should be in the next row.

Basicly I want to enter a value, then tab into the next row and so on and everytime I leave a field I need to update the sum in the master.

Is there any fix to that?

 

Regards,
Waldemar