Igniteui-angular: Drop indicators between grid rows
Is your feature request related to a problem? Please describe.
When dragging rows to reorder as demo'd here I would like to show a drop indicator to show where the row will be dropped
Describe the solution you'd like
It would be nice if it was automatic like when we drag columns to re order them
Describe alternatives you've considered
If its not possible to do automatically then could a dragmove event be exposed on the igxDrop target (the grid) so that we can determine the current row and insert an indicator manually between the rows
It would also be great to add that to your stackblitz example above
Lightw3ight
All 6 comments
Such functionality is currently not available but we may create a feature request for implementing such functionality.
About the event that you suggest - we are currently working on exposing an onOver event that will be triggered when an IgxDrag instanced element moves inside the boundaries of the drop area - similar to MouseOver. It is going to be available in some of the upcoming versions of the library and we will update the sample once it is done.
dafo
on 17 Jul 2019
About the event that you suggest - we are currently working on exposing an
onOverevent that will be triggered when an IgxDrag instanced element moves inside the boundaries of the drop area - similar toMouseOver. It is going to be available in some of the upcoming versions of the library and we will update the sample once it is done.
You already have an event onEnter which triggers when you mouse over an igxDrop area (Like a mouse over) but because the igxDrop directive is attached to the grid, you dont get any event when the drag goes over a row
would your onOver event be more akin to a mousemove event while dragging inside a igxDrop area?
Lightw3ight
on 17 Jul 2019
Yes, that's the idea.
You may find more in the API of the IgxDrag/IgxDrop Directives Specification
dafo
on 18 Jul 2019
Related #5319
kdinev
on 24 Jul 2019
@Lightw3ight
With the official release of 8.2 and the new functionality that the IgxDropDirective exposes, I've put together a small sample, showcasing how you can emulate custom drop indicators under the target row.
In the example, I make use of the over emitter, exposed by the IgxDropDirective. The way we emulate a drop area is by adding a bottom border to the row element that will be before the dropped row.
Going with an approach that would try to append a DOM element after the target row is not advised, as additional DOM elements created in the grid will lead to unexpected behavior - i.e. the grid virtualization will not work properly.
ViktorSlavov
on 1 Oct 2019
Awesome, thanks @ViktorSlavov
Lightw3ight
on 6 Oct 2019
Related issues
tkiryu
路
3Comments
ymita
路
3Comments
Hypenate
路
3Comments
ChronosSF
路
3Comments
Hypenate
路
3Comments
Most helpful comment
@Lightw3ight
With the official release of 8.2 and the new functionality that the
IgxDropDirectiveexposes, I've put together a small sample, showcasing how you can emulate custom drop indicators under the target row.In the example, I make use of the
overemitter, exposed by theIgxDropDirective. The way we emulate a drop area is by adding a bottom border to the row element that will be before the dropped row.Going with an approach that would try to append a DOM element after the target row is not advised, as additional DOM elements created in the grid will lead to unexpected behavior - i.e. the grid virtualization will not work properly.