CODEWITHSUNDEEP
ag-grid-angular
NewbieAngular
NewbieAngular

Reputation: 61

AG-Grid, Unable to reorder the rows - Drag n Drop of rows within Grid

Souce files : HTML In below code I am not using pagination/sort/filter options. drag events are added to grid.

<div class="col-md-12">
<div class="card">
  <div class="card-header text-uppercase  font-weight-bold">
   RESULTS 
  </div>
<div class="card-body ">     

<br>
<div class="centered-content">    
  <div>    
      <ag-grid-angular #agGrid style="width: 100%; height: 358px;" class="ag-theme-balham" 
      [gridOptions]="gridOptions" 
      enableColResize 
      rowDragManaged=true 
      [animateRows]="true" 
      (gridReady)="onGridReady($event)"
      (rowDragEnter)="onRowDragEnter($event)"
      (rowDragEnd)="onRowDragEnd($event)"
      (rowDragMove)="onRowDragMove($event)"
      (rowDragLeave)="onRowDragLeave($event)">
          <ag-grid-column headerName="Name" field="fullName"></ag-grid-column>
          <ag-grid-column headerName="Address" field="address" [width]="150"></ag-grid-column>

      </ag-grid-angular>
  </div>

</div>
</div>
</div>

.ts file

import { Component, OnInit,  } from '@angular/core';

import {GridOptions, GridApi, Grid, RowDragEvent, RowDragEnterEvent, 
        RowDragMoveEvent, RowDragEndEvent, RowDragLeaveEvent} from "ag-grid-community";
@Component({
  selector: 'app-scangrid',
  templateUrl: './scangrid.component.html',
  styleUrls: ['./scangrid.component.scss']

})
export class ScangridComponent implements OnInit {
   private gridOptions: GridOptions;
   private gridApi:GridApi;
  private gridColumnApi;
  filterName: string | null;

  private columnDefs = [
    {

      headerName: "Name",
      field: "",       
      rowDrag : true

  },
  {
    headerName: "Address",
    field: "address",
}
];

private rowDefs = [
   {fullName: 'Name1',address:"address1"},
   {fullName: 'Name2',address:"address2"},
   {fullName: 'Name3',address:"address3"},
];

constructor() {
  this.gridOptions = {
      enableColResize: true,
      rowDragManaged: true,     
      animateRows: true, 
      onRowDragEnter: (event: RowDragEnterEvent) => {this.onRowDragEnter(event);},
      onRowDragEnd: (event: RowDragEndEvent ) => {this.onRowDragEnd(event);},
      onRowDragMove: (event: RowDragMoveEvent ) => {this.onRowDragMove(event);},
      onRowDragLeave: (event: RowDragLeaveEvent ) => {this.onRowDragLeave(event);}
    };
}
  ngOnInit() { 

    this.gridOptions.columnDefs = this.columnDefs;
    this.gridOptions.rowData = this.rowDefs;
   }

    onRowDragEnter(event: RowDragEnterEvent) {console.log('onRowDragEnter',event);}
    onRowDragEnd(event: RowDragEndEvent) {console.log('onRowDragEnd',event);} 
    onRowDragMove(event: RowDragMoveEvent) {console.log('onRowDragMove',event); }
    onRowDragLeave(event: RowDragLeaveEvent) {console.log('onRowDragLeave',event);}

    onGridReady(params) {
      this.gridApi = params.api;
      this.gridColumnApi = params.columnApi;     
      // this.gridOptions.api.addEventListener('rowDragEnter', this.onRowDragEnter);   
      // this.gridOptions.api.addEventListener('onRowDragEnd', this.onRowDragEnd);     
    }
  }

Have tried adding events using addEventListener(), kept commented in the above code sample.

Ultimately, Resultant rows on the grid can not be managed using drag n drop feature Row Header/Drag icon also not seen...

Thanks in Advance ASJ

Upvotes: 0

Views: 5246

Answers (1)

Damian C
Damian C

Reputation: 2171

After looking at the stackblitz and your orignal post, it appears your issue is in these two lines:

      <ag-grid-column headerName="Name" field="fullName"></ag-grid-column>
      <ag-grid-column headerName="Address" field="address" [width]="150"></ag-grid-column>

You can remove them since you can do all this configuration in your component.ts file. Also remove any configuration passed in through the agGridOptions since it is redundant.

<ag-grid-angular #agGrid style="width: 100%; height: 358px;" class="ag-theme-balham"
                 [gridOptions]="gridOptions"
                 (gridReady)="onGridReady($event)">
</ag-grid-angular>

This is all that you should need: 

this.gridOptions = {
    rowDragManaged: true,
    animateRows: true,
    onRowDragEnter: (event: RowDragEnterEvent) => {
        this.onRowDragEnter(event);
    },
    onRowDragEnd: (event: RowDragEndEvent) => {
        this.onRowDragEnd(event);
    },
    onRowDragMove: (event: RowDragMoveEvent) => {
        this.onRowDragMove(event);
    },
    onRowDragLeave: (event: RowDragLeaveEvent) => {
        this.onRowDragLeave(event);
    }
};

If you would like to have a column resizable, apply that directly to the column definition like this:

 private columnDefs = [
    {
      headerName: "Name",
      field: "fullName",
      resizable: true,
      rowDrag: true
    },
    {
      headerName: "Address",
      field: "address",
      width: 150
    }
  ];

This should get things moving along. Good luck!

Upvotes: 1

Related Questions