[TreeList] Еxpanding/collapsing items breaks the built-in row reordering

[georgi-sla]

Describe the bug Currently, when there is a designated feature for programmatically expanding/collapsing the TreeList's items, the built-in row reordering does not allow the user to reorder the rows.

To Reproduce

1. Create a TreeList component.
2. Enable row reordering.
3. Utilize the kendoTreeListExpandable directive and the expandedKeys property.
4. Modify the items in the array bound to the expandedKeys property to expand/collapse items in the TreeList.
5. Try to reorder the TreeList items.

For further reference, please check out the following StackBlitz demo: https://stackblitz.com/edit/angular-ngylbd

Expected behavior Expanding/Collapsing items in the TreeList should not affect the built-in row reordering.

Workaround https://stackblitz.com/edit/angular-ngylbd-4z6jrc

[georgi-sla]

The behavior mentioned above could be observed when the default expand/collapse feature is enabled (clicking on the designated arrows) since the rows cannot be reordered after the expand/collapse. To successfully move the items, the user has to drag and immediately drop a specific item and then drag it again. For further reference, please check out the following screen recording and StackBlitz demo:

https://github.com/telerik/kendo-angular/assets/108671673/ba32315b-38e6-4e14-9eff-5500cbcaa07e

StackBlitz demo: https://stackblitz.com/edit/angular-wq7kyd

Here is a possible workaround: https://stackblitz.com/edit/angular-qrkvwp

[piraxi]

georgi-sla.

Thank you so much for your solution! This has been driving me nuts.

I found if I used expandable nodes, the drag drop re-ordering more often than not didn't allow re-ordering. You had to drag the node many times, otherwise it just shows the "No Drop" icon like in your video, but even worse for me.

This even occurs on Kendo's official re-ordering demo https://www.telerik.com/kendo-angular-ui/components/treelist/row-reordering. Chrome and Edge, using Kendo UI version 16.3.0.

I took your work around, but I found I needed it not only on the (expand) and (collapse) events, but also after I loaded data.

For anybody else who finds they can't re-order rows when using kendoTreeListExpandable, this should solve it.

Thank you so much georgi-sla.

  // Required by workaroundKendoTreeListCantReorderUiBug() to deal with KendoUI won't allow row re-order bug
  // (see https://github.com/telerik/kendo-angular/issues/4191)
  @ViewChild('treelist') public treelist!: TreeListComponent;

  workaroundKendoTreeListCantReorderUiBug(): void {
    // Deal with KendoUI Bug that won't allow rows to be re-ordered when using kendoTreeListExpandable
    // (https://github.com/telerik/kendo-angular/issues/4191)
    setTimeout(() => {
      this.treelist.dragTargetContainer.notify();
      this.treelist.dropTargetContainer.notify();
    });
  }

After loading any data call:

        // Fix Kendo UI won't allow row reordering bug
        this.workaroundKendoTreeListCantReorderUiBug();