How Scroll the rows in the tree grid on drag and drop

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.

Thanks,

Mani

Hello Mani,

Can you please specify what do you mean by a particular row. I have tested the sample of my colleague, and I am able to scroll down to the last row of the current page.

If you mean dragging to another page, I don't believe this will be possible, however you can submit it as feature request and discuss it with our engineers.

If you have any further questions, please let me know.

Sincerely,
Tihomir Tonev
Associate Software Developer
Infragisitics

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

Thanks,

Mani

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.

Hello,

Thank you and Please let me know once the progress is made.

Thanks,

Mani

Hello Mani,

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.

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.

 

Hello,

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?

Thanks,

Mani

Hello Mani,

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.

 

Hello,

Thank you for the reply. The solution is working fine.

Thanks,

Mani

Hello Manikanta,

I am glad that you find this suggestion helpful!

Thank you for choosing Infragistics components!