Completed
Last Updated: 04 Jun 2024 11:47 by ADMIN
Marcu
Created on: 20 May 2024 13:58
Category: KendoReact
Type: Bug Report
0
Kendo React Grid Drag&Drop duplicate entries

Hello,

We are encountering an issue with duplicate entries in our Kendo Grid with drag & drop functionality. When the grid is scrolled, clicking on any of the header cells multiple times results in the first entry being duplicated. This problem occurs on the example provided on your website as well: Kendo React Grid Row Reordering

Reproduction Steps:

  1. Scroll down within the grid.
  2. Click on any header cell multiple times.
  3. Scroll back to the top of the grid.

You will notice that the first entry is duplicated multiple times. It appears that the reorder logic is being triggered when a header cell is pressed.

We are using version 6.1.0. Please refer to the attached video for a visual representation of the issue.

Thank you for your assistance.

Attached Files:
5 comments
ADMIN
Plamen
Posted on: 04 Jun 2024 11:47

Hello,

Thank you for elaborating the issues - I have updated the demo code as you described in the stackblitz and it seems to work correctly - https://stackblitz.com/edit/react-sgds2i-y3dtvs?file=app%2Fmain.jsx

In addition I want to clarify that we will also research possibilities to improve even further this demo in some of the future version of KendoReact  as its code is quite complicated.

If you observe other issues of you have further questions please don't hesitate to contact us again.

Regards,
Plamen
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!

Marcu
Posted on: 30 May 2024 06:38

Hello,

Please take a look at my video. Element with id 11 ends up on top after I press the header.

Attached Files:
ADMIN
Plamen
Posted on: 28 May 2024 10:17

Hello,

Would you please try share the steps that could help us replicate the additional issue with the latest stackblitz example that I sent you so we could inspect it again and think of the best approach that we would recommend to handle it?

I will be looking forward to your reply.

Regards,
Plamen
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!

Marcu
Posted on: 27 May 2024 13:12

Hi,

We have also tried the check for null direction but it didn't work in all cases. If you move some items and then you press on the header, there is also a strange behavior. If I remember right, the order of the items was changing.

What we did was to add an extra check if the activeItem is null on the first IF statement, and we set the activeItem to null after each reorder.

Also, for extra safety we also do a check that prevIndex !== -1.

ADMIN
Plamen
Posted on: 27 May 2024 13:00

Hi,

Thank you for getting in touch with us.

it seems like a bug in our demo example - we need to have a check if the direction is set to a different than null value before taking the action as it is done in the code below:

  const reorder = (dataItem, direction) => {
    if (activeItem === dataItem || direction === null) {
      return;
    }

Here is an updated version of the demo that worked correctly at my side - https://stackblitz.com/edit/react-sgds2i-obpukw?file=app%2Fmain.jsx

Thank you for your concern with KendoReact components. If you observe other issues please don't hesitate to contact us again.

Regards,
Plamen
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!