Copy Row in Angular TreeGrid

Created: 08 November 2017

In cases when you select multiple rows you may need to create a copy of these rows and place them at different position within the Tree Grid component. IntegralUI TreeGrid for Angular comes with built-in method that makes this process simple. In this article, you will learn how to create a deep copy of selected row and move it at different position using a context menu.

As demo shows, by right-clicking over selected rows, a context menu will popup. By selecting the COPY menu option, the selected rows are copied. Next, by opening the context menu again over some target row in the second Grid, you can select the PASTE option. This will place the copied row below the target row.

How to Copy a Row in Angular TreeGrid

In order to create a copy row, you need to use the cloneRow method. This method accepts a row as an argument, and returns a deep copy with all data from the original row including child rows. The clone object also has different id and pid values, so that it differs from the original object. This makes sure that the grid data doesn't have duplicates.

If you need copies of multiple rows (for example for all selected rows), you can create an array that will temporary hold the references of copied rows. Then, when PASTE option is selected, just add this array to the list.

Conclusion

To create a copy row in IntegralUI TreeGrid component for Angular is simple. You only need to call the cloneRow method, and an exact copy of specified row is created. The copied row has the same data as original row, only a different identifier to avoid creation of duplicates.

Newsletter

Sign-up to our newsletter and you will receive news on upcoming events, latest articles, samples and special offers.

Name:

Email: *

*By checking this box, I agree to receive a newsletter from Lidor Systems in accordance with the Privacy Policy. I understand that I can unsubscribe from these communications at any time by clicking on the unsubscribe link in all emails.