InCell Edit with DateRangePicker

[Sanja Tolo]

Hello,

we have a few specific use cases that requires us to configure inCell editing in all cells, so text, numeric, date, and time (Time picker). We are using rowRender and cellRender that are defined in renderers file.
The problem which came to light was that on text and numeric it loses focus on change of value because it rerenders because dataItem changes for the given component, but in renderers in CellRender we capture focus again with input ref, so case for input and numeric text box works.
Problem is with DateRangePicker, on selecting any value it closes. So for example if I change the start value, I want it to remain open but instead it immedietaly closes because dataItem changes and we call onChange. Entering the input in DateInput of the picker results in same thing. We tried to programmatically call onBlur and control it's show property but it is just weird. OnBlur method of DateRangePicker is called on first clicking on value, and then every other value the method is not called until you close it which is expected behaviour expect for the onBlur on first click.

Ideally, we would like to use custom cells: https://www.telerik.com/kendo-react-ui/components/grid/cells/

And we tried to implement them with inCell editing but we ran into this issue.

We would like to define our data cell for showing data. And have custom cells for edit: {text, numeric, date} which are all inCell and use that throughout the project and that they behave as we would expect it. Is there an example or PoC in which there is InCell editing with custom cells that inlcude both text, numeric, date (DateRangePicker or DatePicker)?

Thank you for your help!

[Konstantin Dikov]

Hi Sanja,

The issue that you are facing with the focus is most likely due to an inline definition of the custom cells. Please note that custom cells must be defined as separate components outside of the main component and in the column they must be set only through the name of that component:

<Column cell={MyCustomCell} ....

<Column cells={{data: MyCustomCell}} ...

As for the DatePickers, note that the logic for the in-cell editing will close the cell on blur, so you need to add condition to check if focus is within the popup of the DatePickers and if so, skip the closing of the cell:

export const RowRender = (props: RowRenderProps) => {
  const trProps = {
    ...props.tr.props,
    onBlur: () => {
      setTimeout(() => {
        const activeElement = document.activeElement;
        if(activeElement.className.indexOf("k-calendar")<0){
            props.exitEdit();
        }
      });
    },
  };

Additionally, when custom cell are used with the in-cell editing, you need to explicitly call the props.render.call with the new content, so that the cellRender can be called for the custom cell as well.

Following is an example with in-cell editing and custom cell with DatePicker:

• https://stackblitz.com/edit/react-xqg73w-shgdgh?file=app%2FDateCell.tsx,app%2Frenderers.tsx

Please let us know if further questions arise.

 

Regards,
Konstantin Dikov
Progress Telerik