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

1 Answer 23 Views
DropDownList Grid NumericTextBox
Abhishek
Top achievements
Rank 1
Iron
Iron
Iron
Abhishek asked on 20 Feb 2024, 04:49 PM | edited on 20 Feb 2024, 06:09 PM

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

 

 

1 Answer, 1 is accepted

Sort by
1
Konstantin Dikov
Telerik team
answered on 22 Feb 2024, 09:30 AM

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:

  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

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!

Abhishek
Top achievements
Rank 1
Iron
Iron
Iron
commented on 26 Feb 2024, 04:39 PM

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
Telerik team
commented on 27 Feb 2024, 08:01 PM

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.

Tags
DropDownList Grid NumericTextBox
Asked by
Abhishek
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Konstantin Dikov
Telerik team
Share this question
or