After exiting from the incell edit, still the cell is in edit mode.

[Abhishek]

I have couple of issues related to in-cell editing in react grid. I am using NextJs as well.

1) The problem i am facing is when i exit from the cell, the particular cell is still in edit mode. i have added an example for numeric textbox. Even though i have clicked outside the grid, the border is till highlighted & the field is in edit mode.  I am already using custom cell for different fields like( Dropdown list, checkboxes. textboxes, Numeric-text-boxes)

2) In the above numeric textbox, when i add any integer, it will display the number & the cursor will vanish immediately. I have to again click on the numeric text box to add the next  number in the same cell.

3) I have almost 300 records in the grid. I am experiencing slowness in rendering the cells when i edit different cells .

 

I have referred to this example:

https://stackblitz.com/edit/react-czmt6w-tpf8qh?file=app%2FcustomCells.jsx,app%2Fmain.jsx

 

 

[Konstantin Dikov]

Hi Abhishek,

If a cell is opened for editing is entirely controlled by the developer. With that in mind, you can handle the mousedown event of the document and determine if the cell should be closed or not. For your convenience, following is an example demonstrating such approach:

• https://stackblitz.com/edit/react-czmt6w-7n4qeo?file=app%2Fmain.jsx

  const grid1Ref = React.useRef(null);
  React.useEffect(() => {
    document.addEventListener('mousedown', (e) => {
      let gridElement = grid1Ref.current.element;
      if (gridElement && e.target) {
        let isWithinGrid = gridElement.contains(e.target);
        let isWithinPopup = false;
        let popups = document.querySelectorAll('.k-animation-container');
        if (popups && e.target) {
          popups.forEach((popup) => {
            if (popup.contains(e.target)) {
              isWithinPopup = true;
            }
          });
        }

        if (!isWithinGrid && !isWithinPopup) {
          exitEdit();
        }
      }
    });
  }, []);

I have added additional logic for the popups, so that the DatePicker and DropDown editors can work.

Hope this helps.

 

Regards,
Konstantin Dikov
Progress Telerik

[Abhishek]

Thank You, the above solution worked. Can you also help me related to the numeric text box issue. If i add a number the cursor will go off. i have to click again on the numeric textbox to add next number. 

ex: if i want add number 21 in the numeric textbox, after adding 2 the cursor will go off. i have to click again on the box to type 1

[Konstantin Dikov]

Hi Abhishek,

The issue that you are observing is often caused by inline definition of custom cells, so please check your configuration and if you have inline definition of a custom cell, please remove it as a separate component as shown in the previous example.

If further assistance is needed, share a stackblitz example reproducing the problem.