How can I display action when hovers a row in Grid?

[minhhung23599 (Hùng Minh)]

Hi

I’m using Jmix 2.5.1 and I want the action icons to appear only when the mouse hovers over a row in the grid, as shown in the attached screenshot. How should I implement this behavior?

Best regards,
HungTM

[mbucan (Mladen Bucan)]

I see that the grid row is highlighted. Did it highlight because the mouse pointer was over it, or did you click on it?

[minhhung23599 (Hùng Minh)]

Yes, row is highlighted, when i gets brighter when I move the mouse, but when I select it it gets darker

[ntha79 (Nguyen Tien Ha)]

Hi Hung,
Here is an example:

Try 3 steps can help you:

1. Create variable in your application css file:
   html {
   –lumo-display-action-button: none;
   }

2. Define custom style:
   .my-grid-row-action{
   display: var(–lumo-display-action-button);
   }
   ::part(row) {
   color: #136c02;
   –lumo-display-action-button:none;
   }
   ::part(row):hover {
   color: #5f016e;
   –lumo-display-action-button:inline-block;
   }

3. Add “my-grid-row-action” style to you custom action component column in your DataGrid,
   @Supply(to = “coQuanDonVisDataGrid.actionColumn”, subject = “renderer”)
   private Renderer coQuanDonVisDataGridActionColumnRenderer() {
   return generateActionColumn();
   }
   private Renderer generateActionColumn(){
   Renderer renderColumn = new ComponentRenderer<>(item → {
   HorizontalLayout hbox = uiComponents.create(HorizontalLayout.class);
   hbox.setWidthFull();
   hbox.setJustifyContentMode(FlexComponent.JustifyContentMode.END);
   Button viewButton = uiComponents.create(Button.class);
   viewButton.setIcon(VaadinIcon.EYE.create());
   viewButton.setThemeName(“icon”);
   hbox.add(viewButton);
   Button editButton = uiComponents.create(Button.class);
   editButton.setIcon(VaadinIcon.EDIT.create());
   hbox.add(editButton);

        hbox.addClassName("my-grid-row-action");
   
        return hbox;
    });
    return renderColumn;
   

   }

Let go!

[minhhung23599 (Hùng Minh)]

Many thanks you