CODEWITHSUNDEEP
ag-gridag-grid-react
Connor Borden
Connor Borden

Reputation: 11

How do you style/modify the dragged element of a header component?

I'm using ag-grid-react 22.1.1 and ag-grid-community 22.1.1.

I want to style the element that shows up when you try to re-order the columns of a table. In addition, is it possible to change the data passed into the dragged component? As far as I can tell it's always the display name.

Image of component I want to style/modify

Upvotes: 1

Views: 713

Answers (2)

sun-rock-2022
sun-rock-2022

Reputation: 1

I use 'onDragStarted' and then get something like

function onDragStarted(evt) {
   if(evt.target.attributes['col-id'].nodeValue === 'my-target-col') {
      evt.api.dragAndDropService.eGhostIcon.nextElementSibling.innerHTML = 'my new header';
   }
 }

Upvotes: 0

Paritosh
Paritosh

Reputation: 11560

Have a look at this plunk: https://plnkr.co/edit/wEonbfGUwxhu7hOGWSDx?p=preview

I want to style the element that shows up when you try to re-order the columns of a table.

When you drag any column, the div.ag-dnd-host gets added as the last element of the body. You can apply style to that guy.

.ag-dnd-ghost {
  background-color: yellow !important;
}

enter image description here

Is it possible to change the data passed into the dragged component? As far as I can tell it's always the display name.

You are right, AFAIK, it's not possible to change the data passed here.

Upvotes: 1

Related Questions