How to use GridColumn cell/cells correctly

[Grant]

Hi Team, 

Im having some trouble understanding how the GridColmn cell/cells properties are intended to be used. 

Quesion: When should I use the 'cell' property vs the 'cells' property. Historically I've used 'cell' and rendered its content based on the declarde editField. I now see there is a 'cells' property that has 'data' and 'edit' attributes. Should I be using these instead, they seem to handle that if check on the editField nativly?

What am I doing?
This example simulates what Im trying to achieve. This is an order form and each item can be ordered as units OR cases. For cases to be ordered, units must be 0 (and visa-versa). You can see in the itemChangeHandler im handling this as well as ensuring thats items cant have a negtive Qty. Thats all fine, but I want to make this UI more intutive by disabling the NumericTextBox that cannot be edited and preventing it from stepping below zero.

The problem Im having is extending the numeric editor on the GridColumn. I thought would be able to use the GridCell component and that it would manage the editor based on the grid editField, then I could either manipulate the GridCustomCellProps.children or GridCustomCellProps.render to add a disabled/max attribute to the NumericTextBox that is being rendered. 

However this does not appear to the case, the GridCell component does not consider the editField. Hence my original question? Uncomment line 80-84 to demo.

Why dont I just render a custom NumericTextBox?
This is possible but I have found that when the grid data changes, the NumericTextBox that is being edited looses focus (because all the lines are being re-rendered), which doesnt make a good UX. The native numeric editor doesnt loose focus though, so if you know how to solve that, it would help too.

!!! IMPORTANT I am using KendoReact v 5.19.0, updating it to the latest is not feasible, this needs to be resovled in the current version.

Any advice or feedback is appreciated.

Thanks,
Grant

[Grant]

RESOLVED but still need answers please.

Ok, its embarrassing that I was able to resolve this 5mins after posting it. I must have been starting at it too long yesterday.

The solution is here, and instead of using the <GridCell /> component, I used a <td /> with the GridCustomerCellProps.tdProps and was able to extend the children of it.

I would still like some clarification on my original questions though:
1. When to use cell vs cells?
2. Why doesnt the <GridCell /> take accont for the editField?
3. How is focus maintained on the NumericTextBox when teh grid data rerenders?

[Grant]

So for Q3 if I replace 

cells={{
  edit: {
    numeric: CustomNumericRender,
  },
}}

with

cells={{
  edit: {
    numeric: (props: GridCustomCellProps) => <CustomNumericRender {...props} /> 
  },
}}

Then the focus is lost.

So somewhere, the component is being momoized? Any clarity on this would help. Thanks

 

 

[Filip]

Hello, Grant,

When using the "cell" prop adding the class names and event handlers should be added manually, because of that we introduced the "cells" for easily applying the default props. The cells prop also allows you to specify which state of the cell you need to customize:

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

As for the focus lost, I passed the custom `EditNumericCell` in order to reproduce the focus issue, however I was not able to. Usually focus issues are observed if custom cells are defined inside the main component, as that causes a re-mount, it seems in your code they are defined outside. Can you please provide more information on the required focus behavior?  This will allow me to look for another potential solution.

Regards,
Filip