editable master-detailgrid loses focus on update

2 Answers 421 Views
Grid
Waldemar
Top achievements
Rank 1
Iron
Waldemar asked on 30 Apr 2021, 11:29 AM

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
Telerik team
commented on 03 May 2021, 08:33 AM

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
Top achievements
Rank 1
Iron
commented on 03 May 2021, 11:21 AM

Thanks for the update. Would it be possible to get a small sample App showing the points above?
Stefan
Telerik team
commented on 03 May 2021, 12:54 PM

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

2 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 30 Apr 2021, 12:38 PM

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.

0
Waldemar
Top achievements
Rank 1
Iron
answered on 30 Apr 2021, 01:37 PM | edited on 30 Apr 2021, 02:07 PM

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

Tags
Grid
Asked by
Waldemar
Top achievements
Rank 1
Iron
Answers by
Stefan
Telerik team
Waldemar
Top achievements
Rank 1
Iron
Share this question
or