Igniteui-angular: Drag a `IgxRowComponent` from an `IgxGrid` to a specific position in another `IgxGrid`

[julianobrasil]

Question

Is it possible to use an IgxTreeGridRowComponent as a drop zone (igxDrop)?

Use case: I want to drag a row to a specific position in another grid. Ideally, I should be able to decide whether to drop the dragged row:

• Over a row (it would become a child)
• Above a row (as a sibling)
• Below a row (as a sibling)

It would be great if we could get a final effect as we get in Angular CDK Drag and Drop. Anyway, if I could, at least, use an IgxTreeGridRowComponent as a drop zone, I think I could built up an acceptable solution.

• igniteui-angular version: 10.0.4
• browser: Any browser

[julianobrasil]

It's just come to me that it doesn't make sense to impose the position of the dragged item, as it would have to follow the columns sorting rules. But it makes sense to define if you're dropping it as a sibling or as a child of a given row.

[Lipata]

Hi, @julianobrasil.

Such functionality is not coming out of the box with the grids, but it can be achieved on an application level, and below you can find implementations for each one of the grids (search for reorder demo):

• reorder rows in igx-grid - Sample, StackBlitz, CodeSandbox
• reorder rows in igx-tree-grid - Sample, StackBlitz, CodeSandbox
• reorder rows in igx-hierarchical-grid - Sample, StackBlitz, CodeSandbox

In the grid template, you are not defining a row and that is why you cannot specify igxDrop directive on a row-level, but only on the grid. You can check samples to see how we achieved that. The other thing that needs to be done to achieve the Angular CDK effect is to create a ghost row that is moved along with the dragged row. Those things are feature requests and instead, you can use the samples above.

[julianobrasil]

Thanks for the links, @Lipata. I've got it done yesterday, but I had to write some code that I think could be part of the API. For example:

1. Some utility methods to transfer data from one grid to another grid, or to move data from one parent to another parent in the same grid.
2. Another thing I had to build by myself is a way to observe the position of the dragging ghost. The regular Infragistics' Drag and Drop API has this @Output() dragMove, but that seems not to be present in the rowDraggable API (at least I couldn't find it).

I know it's hard to build an easy-to-use API concerning drag-and-drop stuff. You guys have already done an awesome job building up what's already there. To this moment, with some work, I've got everything in place to do what I wanted.

[Lipata]

@julianobrasil you are correct about 2) that we don't expose move event - this can be logged as a feature request. For 1) we think methods for deleting and adding rows from the grid and additional context for the hierarchy is enough for a developer to handle it in his specific case.

[julianobrasil]

Should I open a new issue asking for the dragMove output and close this one?

[VirtualisProject]

Hello @julianobrasil,

I came across this ticket related to finding a way to observe the position of the dragging ghost, as you displayed in your GIF (blue overlay). Could you provide some information on how you accomplished this?