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
2 Answers, 1 is accepted
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
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Iron
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
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');
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