Hello David,

You will have to use the Context for passing any additional data/functions/etc. to the custom editor, but it is not necessary to use multiple Contexts. Instead, you can pass all of the additional data with one Context:

• https://stackblitz.com/edit/react-9ycz1i-csxpst?file=app/main.tsx

Another syntax that might be more flexible in some cases would be the following:

  return (
    <EditContext.Provider
      value={{
        gridContext: { localizedData, validator: validation, handleBlur },
      }}
    >

const DropDownCellProvider = (props: GridCellProps) => {
  const { gridContext } = React.useContext(EditContext);
  debugger;
  return DropDownCell(props, gridContext);
};

Then in the custom cell you can use:

export const DropDownCell = (props: GridCellProps, gridContext: any) => {
  const v = gridContext.validator;

Hope this helps.

Regards,
Konstantin Dikov
Progress Telerik

Hello David,

The example demonstrates how to pass additional data to the custom editor from the main component through the Context Provider:

<EditContext.Provider value={{ additional data }}>

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

For your convenience, I have modified the example that you have provided to use context for passing the localizedData to the editor:

• https://stackblitz.com/edit/react-9ycz1i-cs9txu?file=app%2Fmain.tsx

As you will notice, the inline definition in the cell is replaced and a provider is used for passing the additional data through the context.

Please let us know if any further assistance is needed.

Regards,
Konstantin Dikov
Progress Telerik

Hello David,

The issue that you are facing is due to the inline function within the render, which forces React to re-mount the main component, thus causing the focus to be lost. For avoiding this, you should use React Context for passing additional data to the custom cell and declare it outside of the main component.

Here is an example for passing additional data through Raect.Context to a custom cell:

• https://stackblitz.com/edit/react-zv5ujy-xincxt?file=app%2Fmain.tsx

Hope this helps.

Regards,
Konstantin Dikov
Progress Telerik