This is a migrated thread and some comments may be shown as answers.

Row hover action bar

4 Answers 355 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Carl
Top achievements
Rank 1
Carl asked on 09 Apr 2019, 04:14 PM

Hi, 

I'm looking to implement an "action bar" when a user mouse hover a row. Just like in gmail or outlook365 when a user mouse is hover a message, icons appear to delete, mark as read, ...

 

All I found as of now, is to reserve a column and with jquery/css show/hide the icons. I don't want to reserve a specific column for that. I want it to be on either at the beginning (left) or at the end (right) of a row and on top of the row. I attached an image to demonstrate what I want to do.

 

An ideas ?

 

Thanks

4 Answers, 1 is accepted

Sort by
0
Accepted
Alex Hajigeorgieva
Telerik team
answered on 11 Apr 2019, 11:07 AM
Hi, Carl,

You can achieve the desired outcome with a template for the column which includes the icons and some CSS rules:

https://dojo.telerik.com/@bubblemaster/IcIzamUW

<style>
    .icons {
      display:none;
    }
    tr td:hover .icons {
      display:inline;
    }
  </style>
 
// grid columns
columns: [{
 field: "name" ,
 template: "#=name# <span class='icons' style='float:right'><span class='k-icon k-i-trash'></span> <span class='k-icon k-i-email'></span> <span class='k-icon k-i-warning'></span></span>"
}]

Kind Regards,
Alex Hajigeorgieva
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Carl
Top achievements
Rank 1
answered on 11 Apr 2019, 12:31 PM

Wonderful !

 

Thanks a lot

0
Stephane
Top achievements
Rank 1
Iron
answered on 17 Jun 2020, 01:12 PM

I share another solution I found for this problem. I use a tooltip to show the action bar: https://dojo.telerik.com/@kakone/oBusocud

 

0
Alex Hajigeorgieva
Telerik team
answered on 18 Jun 2020, 05:11 PM

Hi, Stephane,

Thank you very much for sharing your solution with the Kendo UI community. 

It looks great!

Regards,
Alex Hajigeorgieva
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Grid
Asked by
Carl
Top achievements
Rank 1
Answers by
Alex Hajigeorgieva
Telerik team
Carl
Top achievements
Rank 1
Stephane
Top achievements
Rank 1
Iron
Share this question
or