ag-grid: Make whole row a grip for row dragging

Question

I am using the Vue version of ag-grid 21.2.1 (https://www.ag-grid.com/vue-getting-started/) and implemented Row Dragging (https://www.ag-grid.com/javascript-grid-row-dragging/) on one of our tables. Everything seems to work out fine, but now I want to make the whole row a "grip" for dragging. I tried with pointer-events: none on .ag-row and making the native ag grip item bigger and clickable, but this doesn't seem to work:

.ag-icon-grip {
    position: absolute;
    width: 600px;
    pointer-events: auto;
}

Did anyone have any success on this?

Answer 1

There may be other methods with javascript but you can do it with css like below

css

.drag-row {
    overflow: unset !important;
}
.drag-row .ag-cell-value {
    padding-left: 24px;
}
.drag-row .ag-row-drag {
    position: absolute;
    width: 1200px;
    z-index: 2;
}

js

this.columnDefs = [
  {
    field: "athlete",
    cellClass: 'drag-row',
    rowDrag: true
  },
  // ...
];

working plunker https://next.plnkr.co/edit/naFYtZTBZUJJOCfB

Answer 2

Please check this working demo

---

First you need set rowDrag in defaultColDef like below

this.defaultColDef = {
  rowDrag: true,
  width: 150,
  sortable: true,
  filter: true
};

And after then you need to apply the CSS for others ag-icon-grip opactiy is 0 except first column like below

.ag-icon-grip {
  position: absolute;
  pointer-events: auto;
  top: 0;
  opacity: 0;
  width: 100%;
}
//Setting opacity for first column is 1
.first-drag-column .ag-icon-grip {
  opacity: 1;
}

And inside of vue component, Need to add cellClass to showing first column drag icon. Like below

this.columnDefs = [
  {field: "athlete",cellClass: 'first-drag-column',},
  { field: "country" },
  { field: "year" },
  { field: "date" },
  { field: "sport" },
  { field: "gold" },
  { field: "silver" },
  { field: "bronze" }
];