CODEWITHSUNDEEP
reactjsdrag-and-dropag-grid
Bart Jan
Bart Jan

Reputation: 77

AgGrid custom html on drag

I'm jsut looking into changing the drag hover of the aggrid component. i cant find much on it... Anyone knows how to change the styles of the row in drag mode?

My goal is to have a different animation (full row) like material UI/UX

https://material.io/design/components/lists.html#behavior

enter image description here

Upvotes: 2

Views: 628

Answers (2)

Bogmag
Bogmag

Reputation: 69

It would be possible to replace the created ghost by:

  • Globally hiding the ghost on mouseover by adding a body class to prevent flickering of ghost (remember to remove the class on mouseout to allow other grids to use ghosts)
  • Set new content or change styling of ghost on drag enter and remove the body class to show the new ghost (remember ghosts are only present in the DOM during drag)

Hide ghost on mouse over and mouse out:

function onCellMouseOver(event) {
  document.body.classList.add('cellDragRendererOn');
}

function onCellMouseOut(){
  document.body.classList.remove('cellDragRendererOn');
}

gridOptions.onCellMouseOver = onCellMouseOver;
gridOptions.onCellMouseOut = onCellMouseOut;

Replace ghost and styling, and unhide ghost:

function onRowDragEnter() {
  var ghost = document.querySelector('.ag-dnd-ghost');
  ghost.style.background = 'red';
  ghost.innerHTML = '<span class="myClass">My message</span>';
  document.body.classList.remove('cellDragRendererOn');
}

gridOptions.onRowDragEnter = onRowDragEnter;

The body -> ghost CSS styling:

.cellDragRendererOn .ag-dnd-ghost{
  display: none !important;
}

enter image description here

Upvotes: 0

un.spike
un.spike

Reputation: 5113

So, actually, there is no possibility for now to modify 'ghost' template, you can try to explore deeper than I did, here is an entry point: ag-grid\src\ts\dragAndDrop\dragAndDropService.ts and createGhost method - exactly what you need. One thing that you can do is to override this place just for yourself and use instead of the original library.

Upvotes: 3

Related Questions