Grid custom cell Loses focus on any state Change

[Farid]

Hi

I have a scenario to add onChange for custom Grid Cell the issue is that When I try to do that the cell loses focus on
any update of the grid parent component state

when I added useEffect to track the component lifecycle, the component unmounts and mounts with every change.
"The cell that loses focus here is the Discount cell"

Running Example stackblitz
Code

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Grid, GridColumn } from '@progress/kendo-react-grid';
import { NumericTextBox } from '@progress/kendo-react-inputs';

const products = [
  {
    ProductID: 1,
    ProductName: 'Chai',
    Price: 18.0,
    Discount: 0,
  },
  {
    ProductID: 2,
    ProductName: 'Chang',
    Price: 19.0,
    Discount: 0,
  },
];

const CustomCell = (props) => {
  React.useEffect(() => {
    console.log('componet mount');
  }, []);

  return (
    <td style={{ padding: '1rem', textAlign: 'center' }}>
      <NumericTextBox
        onChange={(e) => props.onChange(e, props)}
        style={{ width: '100px' }}
        value={props.dataItem[props.field]}
      />
    </td>
  );
};

const App = () => {
  const [data, setData] = React.useState(products);

  const handleDiscountChange = (e, cellProps) => {
    setData((_data) => {
      return _data.map((item) => {
        if (item.ProductName === cellProps.dataItem.ProductName) {
          item.Discount = e.value || 0;
          item.Price -= item.Discount;
        }
        return item;
      });
    });
  };

  return (
    <>
      <Grid data={data} title={'title'} editField="inEdit">
        <GridColumn field="ProductName" title="Product Name" />
        <GridColumn
          field="Discount"
          cell={(props) => {
            return <CustomCell {...props} onChange={handleDiscountChange} />;
          }}
        />
        <GridColumn field="Price" title="Price" editor="numeric" />
      </Grid>
    </>
  );
};

ReactDOM.render(<App />, document.querySelector('my-app'));

[Konstantin Dikov]

Hi Farid,

The problem that you are facing is due to the fact that you are defining the custom cell as inline functional component in the main component, which forces React to re-mount on each change. The correct way would be to pass the change function with React Context:

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

As a side note, the GridCellProps contain "onChange" handler, which if used will fire the onItemChange event of the Grid, where you can update the items. You can take a look at our "Custom editors" example for reference:

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

Hope this helps.

 

Regards,
Konstantin Dikov
Progress Telerik