Combining Grid grouping with always-editable in-cell editing.

[Patrick]

I've been having trouble building something using the grid.

I have several requirements:

• A grouped table or grid with three levels, having about 50 rows with six to eight numeric columns of percents.
• Sums (aggregates) of the columns at the top level and the second level.
• All of the numeric value cells should be in-cell editable.
• Editing the numeric value cells should update the aggregate numbers.
• Formatting and validation for values should be enforced: cells may only contain values from 0.00% to 100.00% to two decimal places.

I know that's a lot - we *might* be able to flex on the last three, but it would be preferred not to.

My issue is that updating a value updates the Grid's `data` prop, and the implementations I've tried so far seem to have one or two issues:

1) The input delay is quite large (calls to update the row onItemChange recalculate aggregates on every input). Recalculating and changing the state hook for the Grid's `data` prop takes noticeable time.

2) When using a custom cell via `cells={{}}`, updating causes the input to lose focus. If one enters a value and hits the Tab key to focus the next (custom) cell input, updating the Grid's `data` prop causes the Grid to be redrawn. I'm passing `dataItemKey` to the Grid component, and each custom cell has set `key={id}`, but the focus is lost regardless.

I would appreciate any input you could provide, including "You should use <<other thing>>".

[Konstantin Dikov]

Hello Patrick,

Regarding the first issue that you are facing, I have to say that with the built-in editors the onItemChange will fire after each input and since you have too many records with NumericTextBox components on each row, this will have some hit on the performance (even if it is rendering of the virtual DOM only). Nevertheless, there are few things that you can do to increase the performance:

• Reduce the page size to 10 or 20
• Switch to inline or in-cell edit mode
• Implement custom edit cell where the state of the editor will be held internally in the cell and props.onChange can be called only within the onBlur event of the NumericTextBox (which will trigger the onItemChange only when the user is finished with the changes)

As for the second problem, this will occur if the custom cell is defined inline, which forces React to re-mount the entire component. The custom cell must be set in the "cell={CustomCell}" format and must be defined outside of the main component. 

Note that if you need to pass a reference from the main component to the custom cell, you can use React Context:

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

Hope this helps.

 

Regards,
Konstantin Dikov
Progress Telerik