Hi,
Is it possible to scroll across the rows by dragging a row from the top of the grid to the bottom of the grid?
Thanks,
Mani
Hello Mani,
Thank you for posting in our community.
What I can suggest, for achieving your requirement, is to use the dragMove event of the IgxDragDirective and then to check for the position of the row based on the IgxTreeGridComponent body and if it is at the most top or bottom point to get the verticalScrollContainer that the IgxTreeGridComponent uses and to scroll the IgxTreeGridComponent using the scrollNext or scrollPrev method of the verticalScrollContainer. I crated a small sample illustrating my approach, which you can find here. Please test it on your side and let me know whether you find it helpful.
Please let me know if you have any further questions or concerns.
Regards,
Viktor Kombov
Entry Level Software Developer
Infragistics, Inc.
Hello Viktor,
Thank you for the Response.
I can scroll only till a particular row when dragging the row downwards.
I guess it is scrolling till what we have in the data list.
Hello,
Thank you for the reply.
I'm now able to scroll across the grid but I am getting an incorrect dragged row value during the drop.
Drag data is correct when I drop without scrolling the grid page and once the viewport changes, the drag data value is changing
Hello Manikanta,
We were able to reproduce the described behavior on our side and we are currently looking into this matter for you.
Will keep you posted on the progress.
Thank you and Please let me know once the progress is made.
Thank you for the patience!
What I can suggest, for achieving your requirement is getting the rowData of the dragged row and to use it for finding the correct index in the data array when handling onRowDragStrart event.
I have created a sample illustrating that when a row is dragged and dropped, its value is correct. It can be found here. Please test it on your side and let me know whether you find it helpful.
Thank you for the suggestion.
But my object structure is not flat and Is it possible to use IgxTreeGridRowComponent instead of rowData?
I have also tried accessing the dragged row via TreeGrid.RowList but on scroll, the rowlist gets updated.
Can you please let me know if by any chance I could use the IgxTreeGridRowComponent for the dragged row data as I tried and failed?
Because of the Tree Grid Virtualization, wich optimizes DOM rendering and memory consumption, IgxTreeGrid renders only what is currently visible in the view port and swapping the displayed data while the user scrolls the data horizontally/vertically. For that reason when a row is dragged and the view port is changed the reference will point to a different row element. In this case the rowList will also return only the elements that are rendered in this current moment into the DOM. What I can suggest is to use the reference of the dragged row parent if it has parent. I crated a sample illustrating my approach for your reference, which you can find here. Please test it on your side and let me know whether you find it helpful. Please keep in mind that with the release of the 12.0 version of our product IgxGridRowComponent, IgxTreeGridRowComponent, IgxHierarchicalRowComponent, IgxGridGroupByRowComponent will be no longer exposed in the public API. Public APIs, which used to return an instance of one of the above, then will return objects implementing the new public RowType interface. The new update will migrate most of the uses of IgxGridRowComponent, IgxTreeGridRowComponent, IgxHierarchicalRowComponent, IgxGridGroupByRowComponent , like imports, typings and casts. If a place in your code using any of the above is not migrated, just remove the typing/cast, or change it with RowType. This release is planned to coincide with the release of Angular 12. This should be around the middle of May.
Please let me know if you need any further assistance with this matter.
Thank you for the reply. The solution is working fine.
I am glad that you find this suggestion helpful!
Thank you for choosing Infragistics components!