Transferring the rows from one table to another in angular 2 using angular material

Question

I am trying to transfer selected rows from one table to another.I have implemented a sample stack-blitz example which can be accessed using https://stackblitz.com/edit/angular-app-material-h2lcps?file=app%2Faccount%2Faccount.component.html

Using the above example I am gettinmg the following output in my console.

Here I have implemented the Remove selected Rows button.But I am unable to implement Transfer Selected Rows button.

Can anybody please guide me how can i implement this transfer functionality...?

@CommercialSuicide..... Yes even I am getting " angular-app-material-h2lcps.stackblitz.io’s server IP address could not be found. " in output window ...! How can I avoid this..? — Heena
@mast3rd3mon... I dont have any errors ... but when i select the rows from the table i want to display those rows in the another table ..! — Heena
I recomend create an array called selectedRows or something like this, then in your transferSelectedRows when find the index do "this.selectedRows.push(this.data[i])" before your splice it, then change item on ngFor by selectedRows <p *ngFor ="let i of selectedRows">{{i.position}}</p> — godie

Aarsh Aarsh · Accepted Answer · 2018-03-26T12:58:04

I can just give you hint. I have done swapping between grids in my project. I am using kendo-grid.

First on a selection of checkbox I took one array in which I push my selected row data. After that on swap button click( swapping from right to left ), I push data in left grid data and splice data from right grid data by checking both data positions.

This might help you with your problem. Code for swapping is much longer in my project because there are many validations too. So I providing you with some of my code.

OnSelectionChange(){
 if (event.selectedRows.length > 0 && event.selectedRows[0].dataItem != undefined) {
            for (let i = 0; i < event.selectedRows.length; i++) {
                this.rightGridSelectedData.push(event.selectedRows[i].dataItem);
            }
        }
        else if (event.deselectedRows.length > 0) {
            for (var index = 0; index < this.rightGridSelectedData.length; index++) {
                if (this.rightGridSelectedData[index].featureID === event.deselectedRows[0].dataItem.featureID && this.rightGridSelectedData[index].moduleID === event.deselectedRows[0].dataItem.moduleID) {
                    this.rightGridSelectedData.splice(index, 1);
                }
            }
        }
}

Transferring the rows from one table to another in angular 2 using angular material

1 Answers