Ag-Grid show buttons to the left on row hover

Question

I need to show Action buttons to the left on row hover. The below reference have the solution I need but that has the action buttons to the right. I tried changing css but still it doesn't work. Is there any way I can achieve this thru CSS. Thanks in advance

Reference: ag-Grid - show buttons on row hover like in Gmail

Reference Plunker: https://plnkr.co/edit/X4hCimLy6aL3j4eh?preview

This is the css I used

.ag-pinned-left-header,
.ag-horizontal-left-spacer {
  width: 0 !important;
  min-width: 0 !important;
}

/* Add absolute position so that action buttons column will appear on top of other columns. pointer-events: none to pass on mousemove event to behind columns */
.ag-pinned-left-cols-container {
  position: absolute !important;
  left: 0;
  pointer-events: none;
}
/* Reset pointer-events so that click can happen on action buttons */
.ag-pinned-left-cols-container * {
  pointer-events: initial;
}

/* Hide border of left-cols-container */
.ag-pinned-left-cols-container .ag-cell {
  border: none !important;
}

/* Show action buttons only for row that is being hovered. For rows which are not being hovered, hide them by setting their width and padding to 0.*/
.ag-pinned-left-cols-container .ag-row:not(.ag-row-hover),
.ag-pinned-left-cols-container .ag-row:not(.ag-row-hover) .ag-cell {
  width: 0 !important;
  padding: 0 !important;
}

Do you have your React code as well? If you're not able to share it, then it's kinda hard to tell where it's going wrong, I assume the buttons might have to be above the rest of the rows in the render method, making it render first, if they're both children of the same parent. — Sodnarts, Jun 17 '21 at 07:08
@Sodnarts , This is the plunker sample I am working on [link](https://plnkr.co/edit/Rj7AHGhOM6xQT0TW ) In which If the "Action Buttons" column is pinned to right its working fine. Butt If its pinned to left, on hover the buttons are not shown — Amir, Jun 17 '21 at 07:44

Sodnarts · Accepted Answer · 2021-06-18T08:50:50.943

I've had a look through the plnkr and the reason pinning it to left doesn't work, is that the "pinned" property is affecting the className, not actually pinning it to the left, but rather giving it the className of ag-pinned-left-cols-container which is not helpful.

An easy fix is to change the right property to left instead in the css file as shown below. This is line 23-27 in the plnkr. Make sure you're changing the actual css property, and not the right inside the className

Edit:

After a lot of debugging I found the issue with the code. The reason why it's not working with the pinned: left is because it's being rendered as the left-most column, and everything rendering after it will be above it in the stack. So in practice, when setting it's position to position: absolute !important it was still there, just behind the other columns. Changing it's z-index will resolve the issue. You could tweak the value of the z-index to a smaller one if you want.

After changing the z-index I was able to display both the left and right action buttons. You have to change the z-index in ag-pinned-left-cols-container

.ag-pinned-left-cols-container {
    position: absolute !important;
    left: 0;
    z-index: 10000000;
    pointer-events: none;
}

In this case I could not use both left and right action icons right, I could use only either one of them. Is there any way I could use both left and right action icons — Amir, Jun 17 '21 at 10:13
"Action Column". My plan is to have 2 action columns one pin to right and one pin to left, on hover of a row both action column should be shown. [link] (https://plnkr.co/edit/Rj7AHGhOM6xQT0TW) — Amir, Jun 17 '21 at 10:42
I updated my answer, I believe that's the result you want, in your latest plnkr link. — Sodnarts, Jun 18 '21 at 08:51

Ag-Grid show buttons to the left on row hover

1 Answers1