CODEWITHSUNDEEP
angularag-grid-ng2
Poonam Thote
Poonam Thote

Reputation: 417

How to Drag and drop rows within ag-grid ng2 (reorder rows)

I need to drag and drop rows within ag-grid-ng2 and reorder the rows. I used processRowPostCreate but events(ondragstart,ondrop ) are not getting fired. Thanks in advance for any help

Upvotes: 0

Views: 1029

Answers (1)

ArunYogi
ArunYogi

Reputation: 11

I was able to do the reording based on drag and drop func. Here is my code for it. I skipped doing modification when the grid sorted by a column (drag-drop will not have any visual effect because of sorting). 

        processRowPostCreate: (params) => {
            params.eRow.draggable = true;
            params.eRow.ondragstart = (event: DragEvent) => {
                this._newRowIndex = params.rowIndex;
                this._currentRowIndex = params.rowIndex;
            };
            params.eRow.ondragenter = (event: DragEvent) => {
                this._newRowIndex = params.rowIndex;
            };
            params.eRow.ondragend = (event: DragEvent) => {
                let sortmodel = this.gridOptions.api.getSortModel();
                if (sortmodel.length === 0 && this._newRowIndex !== this._currentRowIndex) {
                    let record = params.node.data;
                    this.handleRearrangement();
                    this.records.splice(this._newRowIndex, 0, this.records.splice(this._currentRowIndex, 1)[0]);
                    this.gridOptions.api.removeItems([params.node], false);
                    this.gridOptions.api.insertItemsAtIndex(this._newRowIndex, [record], false);
                } else {
                    this._newRowIndex = this._currentRowIndex; // just to be sure
                }

            };
        }

Upvotes: 1

Related Questions